How to easily add sign-in to your React app with FirebaseUI

2 min readNov 6, 2022

Authentication is used to identify users, which allows the app to store personal user data and provide a personalized experience across all the user’s devices. Think of any app that requires you to create an account like e-commerce website.

Now, we will build a simple authentication system using Firebase, FirebaseUI and React.js.

Step-1: Create a React app

To create a react app, run the command on your command line:

npx create-react-app firebase-auth

Step-2: Set up firebase project

Go to Firebase Console. Then create a new project and enable your Authentication options from sign in method.

Step-3: Install Firebase and FirebaseUI

On your command line:

npm install firebase --save
npm install firebaseui --save

Step-4: Initialise Firebase and Config firebase

Then, initialise Firebase and begin using the SDKs for the products that you’d like to use.

import firebase from 'firebase/compat/app';const firebaseConfig = {
  apiKey: "YOUR API KEY",
  authDomain: "YOUR AUTH DOMAIN",
  projectId: "YOUR PROJECT ID",
  storageBucket: "YOUR STORAGE BUCKET",
  messagingSenderId: "YOUR MESSAING SENDER ID",
  appId: "YOUR APP ID"
};firebase.initializeApp(firebaseConfig);

Step-5: Import firebase, firebaseui and firebaseui.css in your signIn component; like `AuthProvider.js`

import firebase from 'firebase/compat/app';
import * as firebaseui from 'firebaseui'
import 'firebaseui/dist/firebaseui.css'

Initialize the FirebaseUI.

const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(props.auth)

Add the OAuth provider ID to the list of FirebaseUI signInOptions. OAuth providers (Google, Facebook, Twitter, GitHub, Email and Password and Phone Number)

ui.start('.firebase-auth-container', {
    signInFlow: 'popup',
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        firebase.auth.GithubAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
    ],
    signInSuccessUrl: '/authenticated',
    privacyPolicyUrl: '/privacy'
})

Define the HTML element where the FirebaseUI sign-in widget will be rendered.

<div className=’firebase-auth-container’></div>

I am adding the entire project code below for your better understanding.

AuthProvider.js Full code:

Import AuthProvider.js in App.js and here’s full code:

Congratulations! Your Authentication system is implemented in your React app.

Happy coding!!!