How to Implement Sign-in Options Using Firebase in React.js?

Firebase authentication can be used to allow users to sign into your application using multiple sign-in methods. One can sign in using email and password sign-in and also using other federated identity providers such as Google, Facebook, Apple, GitHub, Microsoft, Twitter, Yahoo, etc.
To implement sign-in using these identity providers you can either use the Firebase SDK to carry out the sign-in flow or do it manually using the sign-in with the respective identity provider’s library and passing the resulting ID token in case of Google or access token in case of Facebook or Twitter to Firebase. In the following document, we will learn how to use the SDK to implement the sign-in flow.

Firebase Dashboard Overview

Before adding Firebase to your project you will have to create a Firebase project and register your application with that project. After which you will be provided with a configuration object with Firebase which in turn will connect your app with your Firebase project.

1. Setting Up the Firebase Console

☑️ In the Firebase console, click on Create a Project/Add a Project

☑️ Enter the project name you want to review and accept the Firebase terms and click continue.

☑️ Setting up Google Analytics for your project is optional.

☑️ After following the above steps you will see that your new project is ready, click on continue which will take you to the Project overview of the respective project.

2. Adding Firebase to Your Project

☑️ In the center of the Firebase console page locate and click on the Web icon(</>), to register your app.

☑️ Enter your app’s name and click Register app.

☑️ After your app is registered, you will find the command to install Firebase and also the configuration object to initialize Firebase.

Initializing Sign-in Option Using Firebase in React.js

1. Command to Install Firebase

$ npm install firebase

2. Initialize Firebase in the App

Adding and initializing the Firebase authentication SDK.

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
// ...
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);


// Initialize Firebase Authentication and get a reference to the service
const authApp = getAuth(app);

Enabling the Sign-in Methods on the Firebase Console

☑️ On the left end of the Firebase console locate build under product categories, expand its options and

☑️ Click on authentication.

☑️ Click on get started.

☑️ Under authentication, you will find sign-in methods and all the sign-in providers offered by Firebase.

☑️ For Google on the sign-in method tab, enable the Google sign-in method and click save.

☑️ To enable Facebook login

1. In the Firebase console, open the Auth section.
2. On the Sign-in method tab, enable the Facebook sign-in method and specify the App ID and App Secret you got from Facebook.
3. Then, make sure your OAuth redirect URI (e.g. my-app-demo.firebaseapp.com/__/auth/handler) is listed as one of your OAuth redirect URIs in your Facebook app’s settings page on the Facebook for Developers site in the Product Settings > Facebook Login config.

Authentication Using Google

In a web application, the easiest way to deal with Google authentication is by handling the sign-in flow using Firebase JavaScript SDK.

1. Creating an Instance of the Google Provider Object to Handle the Sign-in Flow

auth_google_provider_create.js

import { GoogleAuthProvide} from "firebase/auth";

const googleProvider = new GoogleAuthProvider();

2. Authenticate with Firebase

Authentication with Firebase using Google provider object, where you can give the users two options to sign-in via their Google accounts either by redirecting to the sign-in page or by showing a sign-in popup.

Both the options listed below consist of error handling, also if one wants they can fetch additional data from the Google APIs using the Google token which in turn is the Google provider OAuth token.

⚫ Sign-in with a Popup Window

auth_signin_redirect.js
import { getAuth, signInWithPopup, GoogleAuthProvider} from "firebase/auth";
const authApp = getAuth();
signInWithPopup(authApp, googleProvider)
.then((result) => {
// This gives you a Google Access Token. You can use it to access the Google API.
const googleCredential = GoogleAuthProvider.credentialFromResult(result);
const googleToken = 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.customData.email;
// The AuthCredential type that was used.
const googleCredential = GoogleAuthProvider.credentialFromError(error);
// ...
});

⚫ Sign-in with a Sign-in Page

auth_signin_redirect.js

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

const authApp = getAuth();
signInWithRedirect(authApp, provider);

3.  To Catch and Handle Errors, One can Retrieve the Google Provider’s OAuth Token by Calling getRedirectedResult when your Page Loads.

auth_google_signin_redirect_result.js

import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";

const authApp = getAuth();
getRedirectResult(authApp)
.then((result) => {
// This gives you a Google Access Token. You can use it to access Google APIs.
const googleCredential = GoogleAuthProvider.credentialFromResult(result);
const googleToken = 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.customData.email;
// The AuthCredential type that was used.
const googleCredential = GoogleAuthProvider.credentialFromError(error);
// ...
});

4. To Sign-out a User

auth_sign_out.js

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

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

Authentication Using Facebook

1. Creating an Instance of the Facebook Provider Object

auth_facebook_provider_create.js

import { FacebookAuthProvider } from "firebase/auth";

const facebookProvider = new FacebookAuthProvider();

2. Authenticate with Firebase

Similar to Google or Facebook authentication can be done either with a popup window or via a sign-in page. But in the case of mobile devices, the sign-in page method is preferred.

⚫ Sign-in with a Popup Window

auth_signin_redirect.js

import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";

const authApp = getAuth();
signInWithPopup(authApp, facebookProvider)
.then((result) => {
// The signed-in user info.
const user = result.user;

// This gives you a Facebook Access Token. You can use it to access the Facebook API.
const facebookCredential = FacebookAuthProvider.credentialFromResult(result);
const facebookAccessToken = credential.accessToken;

// ...
})
.catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.customData.email;
// The AuthCredential type that was used.
const facebookCredential = FacebookAuthProvider.credentialFromError(error);

// ...
});

⚫ Sign-in with a Sign-in Page

auth_signin_redirect.js

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

const authApp = getAuth();
signInWithRedirect(authApp, facebookProvider);

3. To Catch and Handle Errors, One Can Retrieve the Facebook Provider’s OAuth Token by Calling getRedirectedResult when your Page Loads.

auth_facebook_signin_redirect_result.js

import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";

const authApp = getAuth();
getRedirectResult(authApp)
.then((result) => {
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
const facebookCredential = FacebookAuthProvider.credentialFromResult(result);
const facebookToken = credential.accessToken;

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.customData.email;
// AuthCredential type that was used.
const facebookCredential = FacebookAuthProvider.credentialFromError(error);
// ...
});

4. To Sign-out a User

Follow the same step as Google authentication sign-out.

Advantages of Using Firebase Console

• Easy to Implement. To get the build authentication flow working for any social sign-in one has to flow fewer steps.
• A number of Sign-in methods. Multiple ways are provided by Firebase which lets you authenticate your application. Google, Facebook, Email, Apple, etc.