Unable to implement Google Sign-In in Wails app in React

[iambilalriaz]

Description

I'm facing an issue while trying to implement Google Sign-In in my Wails app using React. I have provided the relevant code snippets from my Auth/index.tsx and main.tsx files below. Auth/index.tsx

import { GoogleLogin } from '@react-oauth/google';

const Auth = () => {
  
  return (
    <div className='grid place-items-center h-screen'>
      <div className='flex flex-col justify-center items-center'>
        <img src={ERPLogo} alt='' />
        <GoogleLogin
          onSuccess={(credentialResponse) => {
            console.log(credentialResponse);
          }}
          onError={() => {
            console.log('Login Failed');
          }}
        />
        ;
      </div>
      <div className='absolute bottom-0 left-0'>
        <img src={designItems} alt='' />
      </div>
    </div>
  );
};

export default Auth;

main.tsx

import { createRoot } from 'react-dom/client';
import './style.css';
import App from './App';
import { Provider } from 'react-redux';
import { store } from '@app/store';
import { GoogleOAuthProvider } from '@react-oauth/google';

const container = document.getElementById('root');

const root = createRoot(container!);

root.render(
  <Provider store={store}>
    <GoogleOAuthProvider clientId='-----'>
      <App />
    </GoogleOAuthProvider>
    ;
  </Provider>
);

To Reproduce

1. Set up a Wails app with Go and React.
2. Add the necessary dependencies for Google Sign-In.
3. Implement the Google Sign-In component in the Auth component.
4. Provide the Google Client ID in the GoogleOAuthProvider component in the main.tsx file.
5. Attempt to log in using the Google Sign-In button in the app.

Expected behaviour

Upon clicking the Google Sign-In button, the app should initiate the authentication process with Google and provide the necessary credentials to the onSuccess callback function in the Auth component.

Screenshots

Attempted Fixes

I've tried @react-oauth/google & react-google-login packages to implement google sign-in

System Details

# System

OS           | MacOS
Version      | 13.4
ID           | 22F66
Go Version   | go1.19.4
Platform     | darwin
Architecture | amd64

# Wails

Version | v2.5.1

# Dependencies

Dependency                | Package Name | Status    | Version
Xcode command line tools  | N/A          | Installed | 2397
Nodejs                    | N/A          | Installed | 18.16.0
npm                       | N/A          | Installed | 9.5.1
*Xcode                    | N/A          | Installed | 14.1 (14B47b)
*upx                      | N/A          | Available |
*nsis                     | N/A          | Installed | v3.08
* - Optional Dependency

# Diagnosis

Your system is ready for Wails development!
Optional package(s) installation details:
  - upx : Available at https://upx.github.io/

Additional context

I have verified that the Google Client ID is correct and matches the one provided in the Google Cloud Console. I have also ensured that all the necessary dependencies are installed.

I would greatly appreciate any assistance or insights on resolving this issue. Thank you!

[leaanthony]

Looks like the javascript is calling something that's not available in a webview, perhaps window.open. It's hard to know because that code isn't in the issue. Did you click on the line that's reporting the error client:44?

[iambilalriaz]

clicking on it takes me to the client file:

[stffabi]

I think PopUP are currently not allowed on macOS and need some native code to be allowed. But even if it would show, I suspect it won't work because Google will not allow to use wails:// scheme as Origin.

[iambilalriaz]

@stffabi exactly. any workaround you'll suggest?

[garraflavatra]

Not sure if this is possible, but you could try to override and imitate window.open or whichever method it uses, and — instead of opening a new window natively — open a modal in your frontend containing an iframe that points to the URL it tries to open.

I think PopUP are currently not allowed on macOS and need some native code to be allowed. But even if it would show, I suspect it won't work because Google will not allow to use wails:// scheme as Origin.

As far as I know there is no possible internal workaround if Google just doesn’t allow it. If this is indeed the case, you may also try to use BrowserOpenURL to open it in the user’s browser if you are to override the Window API.

[leaanthony]

I believe the workaround is to open an http server locally, just to process the pingback. I wish I knew more about it because I really want to build a v3 plugin for this. If you are willing to discuss how it would work, I'm sure I could get a plugin to make this easier. If you aren't on the discord server yet, please join and I'll set up a thread in the wails3 channel so we can make this happen 👍

[Albinzr]

Can some one provide solution to this, Lots of devs are moving away from wails just because of such small blockers

[leaanthony]

Can some one provide solution to this, Lots of devs are moving away from wails just because of such small blockers

Feel free to open a PR!

[leaanthony]

I've written a Wails 3 plugin that implements this. If anyone wants to use it as a reference for their own implementations, feel free! For v2 you'd probably have to use the same window as that's a limitation in v2. Here's it working in v3:

https://github.com/wailsapp/wails/assets/1943904/797beaf7-5f87-4771-89e3-616bd4ecc16b

[jankrynauw]

I've written a Wails 3 plugin that implements this. If anyone wants to use it as a reference for their own implementations, feel free! For v2 you'd probably have to use the same window as that's a limitation in v2. Here's it working in v3:

oauth.mp4

This is great - have you tried setting this up for Google? I'm trying with the Provider specified as Google:

oAuthPlugin := oauth.NewPlugin(oauth.Config{
		Providers: []goth.Provider{
			google.New("....-.....apps.googleusercontent.com", "...MYSECRET....", "http://localhost:9876/auth/google/callback", "email", "profile"),
		},
	})

But just get a 'blank page' when running the oAuthPlugin.Google() command?

[leaanthony]

Does the GitHub one work for you? It may well be that the plugin code has regressed due to recent changes. Alpha quality. Unstable. Etc etc 😅

[jankrynauw]

Hmm... it seems to work when I run wails3 build & launch the generated binary. When I run the application in dev mode using wails3 dev I get the blank page. Any idea what may be causing this?

[leaanthony]

Not at this moment. Alpha is still unstable so it could be a number of things.