Firebase Authentication with ReactJS

Authentication is the process that many organizations are used to confirm that only the right people, services, and apps with the right permissions can get organizational resources.

It’s an important part of cybersecurity because a hacker or an unauthorized person’s number one priority is to get the unauthorized access to systems. They do this by stealing the credentials (username and password) of authorized users.

User authentication is a crucial aspect of any web application. Ensuring secure and seamless access for your users can be challenging, but with the right tools, it becomes much more manageable.

Step-by-Step Guide: Firebase Authentication with Google, Facebook, GitHub, and Phone in ReactJS.

Introduction:

In today’s digital landscape, user authentication is a crucial aspect of web development, ensuring that only authorized users can access certain features or data within an application. However, implementing authentication systems from scratch can be complex and time-consuming.

That’s where Firebase Authentication comes in handy. Firebase Authentication provides a simple and secure way to authenticate users in web and mobile applications, allowing developers to focus on building great user experiences without worrying about the intricacies of authentication.

Firebase, a comprehensive platform by Google, offers robust authentication services that can be seamlessly integrated into your Web applications.

In this blog post, we’ll explore how to implement Firebase authentication using popular social login providers like Google, Facebook, GitHub, and even phone authentication, all within a ReactJS environment.

Why Firebase Authentication?

Firebase Authentication provides a simple and secure way to authenticate users, allowing you to focus on building great user experiences without worrying about the complexities of authentication flows and security protocols. With Firebase, you can easily integrate popular social login providers, implement custom authentication methods, and manage user accounts with ease.

Prerequisites:

Before we begin, make sure you have the following:

• Node.js and npm installed on your system.
• Basic knowledge of ReactJS.
• A Firebase project created in the Firebase console (https://console.firebase.google.com/).

Step 1: Set up a ReactJS Project

If you haven’t already created a ReactJS project, you can set one up using Create React App. Open your terminal and run the following commands:

npx create-react-app firebase-auth-react

cd firebase-auth-react

Step 2: Install Firebase

Next, install the Firebase SDK and Firebase Authentication module in your ReactJS project:

npm install firebase

Step 3: Configure Firebase in Your Project

Head to the Firebase console (https://console.firebase.google.com/) and create a new project. Once your project is created, click on “Add app” and select the web platform (</>). Follow the instructions to register your app and copy the Firebase configuration object.

In your ReactJS project, create a new file named firebase.js in the src directory. Paste the Firebase configuration object into this file:

// src/firebase.js

// Import the functions you need from the SDKs you need

import { initializeApp } from "firebase/app";

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

const firebaseConfig = {

  apiKey: "YOUR_API_KEY",

  authDomain: "YOUR_AUTH_DOMAIN",

  projectId: "YOUR_PROJECT_ID",

  storageBucket: "YOUR_STORAGE_BUCKET",

  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",

  appId: "YOUR_APP_ID"

};

// Initialize Firebase

const app = initializeApp(firebaseConfig);

// Initialize Firebase Auth provider

const provider = new GoogleAuthProvider();

// whenever a user interacts with the provider, we force them to select an account

provider.setCustomParameters({   

    prompt : "select_account "

});

export const auth = getAuth();

export const signInWithGooglePopup = () => signInWithPopup(auth, provider);

Replace the placeholder values with your actual Firebase project configuration.

Step 4: Set Up Firebase Authentication Providers

Now, let’s enable the authentication providers we want to use in our Firebase project.

1. Google Authentication: Firebase offers built-in support for Google authentication out of the box. To enable Google authentication in your app, you’ll need to configure Firebase with your Google OAuth credentials and enable the Google sign-in provider in the Firebase console. Once configured, you can use Firebase’s signInWithPopup method to initiate the Google authentication flow in your ReactJS app.
   • In the Firebase console, navigate to Authentication > Sign-in method.
   • Enable Google as a sign-in provider and follow the setup instructions.
2. Facebook Authentication: Similar to Google authentication, Firebase supports Facebook authentication as well. Configure Firebase with your Facebook OAuth credentials and enable the Facebook sign-in provider in the Firebase console. Then, use Firebase’s signInWithPopup method to implement Facebook authentication in your ReactJS app.
   • Enable Facebook as a sign-in provider and follow the setup instructions.
3. GitHub Authentication: GitHub authentication can also be integrated seamlessly with Firebase. Configure Firebase with your GitHub OAuth credentials and enable the GitHub sign-in provider in the Firebase console. Utilize Firebase’s signInWithPopup method to enable GitHub authentication in your ReactJS app.
   • Enable GitHub as a sign-in provider and follow the setup instructions.
4. Phone Authentication: Firebase provides phone authentication as an alternative to social logins. With phone authentication, users can sign in to your app using their phone numbers, receiving a verification code via SMS. Configure Firebase with your reCAPTCHA credentials and enable phone authentication in the Firebase console. Then, use Firebase’s signInWithPhoneNumber method to implement phone authentication in your ReactJS app.
   • Enable Phone as a sign-in provider and follow the setup instructions.

Step 5: Implement Firebase Authentication in ReactJS

In your ReactJS application, you can now implement Firebase Authentication using the Firebase SDK. Let’s create a simple authentication component for demonstration.

// src/components/Auth.js

import React from 'react';

import firebase from '../firebase';

const Auth = () => {

  // Function to handle sign-in with Google and Github using popup auth methods.

  // Replace the console.log statements with your own code to handle the sign-in.

  // For example, you can redirect the user to a different page after successful sign-in.

  // You can also handle errors and display appropriate messages to the user.

  // You can also use the response object to access the user's profile information.

  // For example, you can use the response object to display the user's name or avatar image.

  // Example usage:

  // const response = await signInWithGooglePopup();

  // console.log("google signin response: ", response);

  // Replace the console.log statements with your own code to handle the sign-in.

  const handleGoogleSignIn = async () => {

    try {

      const respose = await signInWithGooglePopup();

      console.log("google signin response: ", respose);

      // Handle successful sign-in

    } catch (error) {

      console.error(error.message);

    }

  };

  const handleGithubSignIn = async () => {

    try {

      const response = await signInWithGithubPopup();

      console.log("github signin response: ", response);

      // Handle successful sign-in

    } catch (error) {

      console.error(error.message);

    }

  };

  // Similar functions for other providers (facebook and etc.)

  return (

    <>

      <div>

        <h2>Sign In</h2>

        <button onClick={handleGoogleSignIn}>Sign in with Google</button>

        <button onClick={handleGithubSignIn}>Sign in with Github</button>

        {/* Add buttons for other authentication providers */}

      </div>

    </>

  );

};

export default Auth;

In this post I have implemented the Google Authentication and Github Authentication. Similarly you can implement the functions for other providers.

Step 6: Test Authentication

You can now test your authentication setup by running your ReactJS application and attempting to sign in using the enabled providers.

npm start

This command will run your application on http://localhost:3000.

Conclusion:

Congratulations! we’ve explored how to implement Firebase authentication using Google, Facebook, GitHub, and phone authentication in a ReactJS application. Firebase’s comprehensive authentication services make it easy to provide secure and seamless access for your users, regardless of their preferred authentication method. By leveraging Firebase authentication, you can streamline the authentication process in your ReactJS apps and focus on delivering exceptional user experiences.

Firebase Authentication offers a wide range of features, including email/password authentication, social sign-in, multi-factor authentication, and more, enabling you to tailor the authentication experience to your application’s specific requirements.

So why wait? Get started with Firebase Authentication in your ReactJS project today and take your application to the next level of user authentication and security. Happy coding!

Start integrating Firebase authentication into your ReactJS applications today and empower your users with secure and convenient access to your app’s features. Happy coding!This tutorial is also available on GitHub for reference.

Tags: FirebaseFirebase AuthenticationGithub AuthenticationGoogle AuthenticationReactJS