Firebase Authentication with Google Identity (GoogleYOLO)

Question

Is it possible to combine Google Identity (GoogleYOLO) with the Firebase Authentication web stack? If so, how? Thanks!

FirebaseUI generally implements all the patterns if you want examples: https://github.com/firebase/FirebaseUI - can you say a little more about what features you were looking to integrate though (in general: everything can work!) — Ian Barber, May 09 '18 at 17:16
Sure. My application utilizes a custom Firebase authentication system instead of the firebase UI. I utiilize the current sign in with Google, however would like the user to be able to login without going to say a sign up page. However, I would wish to know how to connect the firebase auth backend with Google YOLO (how do we save auth?) For example: I can utilize firebase.auth.signInWithGoogle() to sign in with google on the click of a button and firebase auth will save and handle the data passthrough with the backend. Can this be done with Google YOLO? — Brandon Fan, May 09 '18 at 17:19
As mentioned by Ian, you should check out FirebaseUI-web which already integrates with one-tap sign-up and auto sign-in: https://github.com/firebase/firebaseui-web#one-tap-sign-up — bojeil, May 09 '18 at 17:41
So this is not possible with a custom firebase authentication system that does not work with FirebaseUI? By simply utilizing the base firebase auth package? — Brandon Fan, May 09 '18 at 17:49
Your question was too vague. It is possible. Check response below. — bojeil, May 09 '18 at 18:15

score 8 · Accepted Answer · answered May 09 '18 at 18:15

8

You can sign in with googleyolo using Firebase Auth as follows:

hintPromise.then((credential) => {
  if (credential.idToken) {
    // Initialize firebase Auth credential with Google ID token
    // obtained from googleyolo.
    const cred = firebase.auth.GoogleAuthProvider.credential(credential.idToken);
    // Sign in with
    return firebase.auth().signInWithCredential(cred);
  }
  throw new Error;
}).then((result) => {
  // User signed in.
}).catch((error) => {
  // Handle error.
});

answered May 09 '18 at 18:15

bojeil

29,642
4
69
76

This is great! Thank you so much @bojeil! I was thinking that it had to be done with something with `firebase.auth.GoogleAuthProvider`, but I did not know I had to utilize the `signInWithCredential` – Brandon Fan May 09 '18 at 18:22

score 0 · Answer 2 · answered Mar 19 '22 at 12:31

Building on @bojeil's reply, the ID token required by Firebase's signInWithCredential function exists within the credential property of the credential object. Therefore, rather than retrieving the token using credential.idToken, you must retrieve the token with credential.credential. Here is a sample function below using Firebase V8.

// firebase V8
function handleCredentialResponse(credential) {
  if (credential) {
    const cred = auth.GoogleAuthProvider.credential(credential.credential);

    // Sign in with credential from the Google user.
    return auth().signInWithCredential(cred);
  }
}

The credential param is a credential response returned from the Google one-tap function callback.

 google?.accounts.id.initialize({
    client_id: your-google-app-client-id.apps.googleusercontent.com,
    callback: handleCredentialResponse,
 });
 google?.accounts.id.prompt((notification) => {
    console.log(notification);
 });

Firebase Authentication with Google Identity (GoogleYOLO)

2 Answers2