Vervebot

Firebase Web Authentication Using Google Sign-In

Before you begin

  1. Add Firebase to your JavaScript project.
  2. Enable Google Sign-In in the Firebase console:
    1. In the Firebase console, open the Auth section.
    2. On the Sign in method tab, enable the Google sign-in method and click Save.

Handle the sign-in flow with the Firebase SDK

If you are building a web app, the easiest way to authenticate your users with Firebase using their Google Accounts is to handle the sign-in flow with the Firebase JavaScript SDK. (If you want to authenticate a user in Node.js or another non-browser environment, you must handle the sign-in flow manually.)

To handle the sign-in flow with the Firebase JavaScript SDK, follow these steps:

  1. Create an instance of the Google provider object:
import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();

2. Optional: Specify additional OAuth 2.0 scopes that you want to request from the authentication provider. To add a scope, call addScope. For example:

provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js

3. Optional: To localize the provider’s OAuth flow to the user’s preferred language without explicitly passing the relevant custom OAuth parameters, update the language code on the Auth instance before starting the OAuth flow. For example:

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

4. Optional: Specify additional custom OAuth provider parameters that you want to send with the OAuth request. To add a custom parameter, call setCustomParameters on the initialized provider with an object containing the key as specified by the OAuth provider documentation and the corresponding value. For example:

provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js

Reserved required OAuth parameters are not allowed and will be ignored. See the authentication provider reference for more details.

5. Authenticate with Firebase using the Google provider object. You can prompt your users to sign in with their Google Accounts either by opening a pop-up window or by redirecting to the sign-in page. The redirect method is preferred on mobile devices.

  • To sign in with a pop-up window, call signInWithPopup:
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    // The signed-in user info.
    const user = result.user;
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });

Also notice that you can retrieve the Google provider’s OAuth token which can be used to fetch additional data using the Google APIs.

This is also where you can catch and handle errors. For a list of error codes have a look at the Auth Reference Docs.

To sign out a user, call signOut:

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Leave a Comment

Your email address will not be published. Required fields are marked *