One tap login not working

[trueman1]

Hi,
When trying to add one tap login to the config, React throws an undefined error
credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO

How to fix?

[jamiegood]

Howdy,
same issue here rising for awareness.
Many thanks
Jamie

[jamiegood]

Hi,

Looks like firebaseui.auth.CredentialHelper.GOOGLE_YOLO is actually a string.

So in your firebeasui-web-react config instead of credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
put
credentialHelper: 'googleyolo'

Seems to be working for me so far. I.E does the google one tap login in Chrome.
Your usage may vary.

[plbstl]

Try importing firebaseui:

import * as firebaseui from 'firebaseui'

[trueman1]

Try importing firebaseui:

import * as firebaseui from 'firebaseui'

This does not work as it generates window not defined error on next js.

[trueman1]

Hi,

Looks like firebaseui.auth.CredentialHelper.GOOGLE_YOLO is actually a string.

So in your firebeasui-web-react config instead of credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO put credentialHelper: 'googleyolo'

Seems to be working for me so far. I.E does the google one tap login in Chrome. Your usage may vary.

Could you please share a code block or demo.. as it still doesn't work even after manually adding 'googleyolo' to credentialHelper.

[plbstl]

Try importing firebaseui:

import * as firebaseui from 'firebaseui'

This does not work as it generates window not defined error on next js.

You cannot SSR FirebaseUI. See firebase/firebaseui-web#213

You could do something like this:

const FirebaseAuth = () => {
  const [renderAuth, setRenderAuth] = useState(false)

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setRenderAuth(true)
    }
  }, [])

  return (
    <div>
      {renderAuth ? (
        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebaseApp.auth()} />
      ) : null}
    </div>
  )
}

Also, you need to import FirebaseUI as:

import * as firebaseui from 'firebaseui'

[jamiegood]

Hi,
Looks like firebaseui.auth.CredentialHelper.GOOGLE_YOLO is actually a string.
So in your firebeasui-web-react config instead of credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO put credentialHelper: 'googleyolo'
Seems to be working for me so far. I.E does the google one tap login in Chrome. Your usage may vary.

Could you please share a code block or demo.. as it still doesn't work even after manually adding 'googleyolo' to credentialHelper.

Hi @trueman1

it would be something like this:
`import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseAuthConfig = {
signInFlow: 'popup',
signInOptions: [
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
requireDisplayName: false,
},
{
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
clientId: ENV_VAR_FOR_YOUR_GOOGLEAUTHPROVIDER_CLIENT_ID,
},
{
provider: firebase.auth.GithubAuthProvider.PROVIDER_ID,
},
],
signInSuccessUrl: '/dashboard',
credentialHelper: 'googleyolo',
callbacks: {
signInSuccessWithAuthResult: () =>
false,

},
};`

But there is more to it than the above.

the ENV_VAR_FOR_YOUR_GOOGLEAUTHPROVIDER_CLIENT_ID would be your GOOGLEAUTHPROVIDER_CLIENT_ID
You'd get this by using Google Cloud Platform.

You'll need to setup on Google Cloud Platform a Google API client ID
https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid