Giter Club home page Giter Club logo

Comments (7)

jamiegood avatar jamiegood commented on August 16, 2024

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

from firebaseui-web-react.

jamiegood avatar jamiegood commented on August 16, 2024

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.

from firebaseui-web-react.

plbstl avatar plbstl commented on August 16, 2024

Try importing firebaseui:

import * as firebaseui from 'firebaseui'

from firebaseui-web-react.

trueman1 avatar trueman1 commented on August 16, 2024

Try importing firebaseui:

import * as firebaseui from 'firebaseui'

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

from firebaseui-web-react.

trueman1 avatar trueman1 commented on August 16, 2024

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.

from firebaseui-web-react.

plbstl avatar plbstl commented on August 16, 2024

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'

from firebaseui-web-react.

jamiegood avatar jamiegood commented on August 16, 2024

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

from firebaseui-web-react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.