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 https://github.com/firebase/firebaseui-web/issues/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