How use FirebaseUI for user authentication on your React project 🔥

Hey! :D

I will help you to configurate this tool from Firebase. Is super useful if you don't want to manage all the authentication of your users.
If you want to read more about this and when to use it, please read the documentation about authentication
Also, you can use this same exact logic if you are writing your project in other framework like Svelte or Vue.

To be able to use the Authentication of Firebase, you need to have a Firebase account and the firebase package in your project. I already make a tutorial about that, please read this before.

So now you are ready, so let's do this.

Create the Authentication service

First, I recommend you to create a file called auth.ts, here we can initialize the authentication layer.

import firebaseApp from './firebase' // This is the Firebase object from the previous tutorial
import { getAuth } from "firebase/auth";

const auth = getAuth(firebaseApp);

export default auth;

Create the Login page on your project.

So, let's create a login page. I didn't use any styles here, just the logic.

	// FirebaseUI
	import firebase from 'firebase/compat/app';
	import * as firebaseui from 'firebaseui'
	import 'firebaseui/dist/firebaseui.css'
	// React stuff
	import { useEffect } from 'react';
	import { useNavigate } from "react-router-dom";
	// Auth service
	import auth from '../services/auth'
	export default () => {
	useEffect(() => {
	const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth);
	ui.start('#firebaseui-auth-container', {
	callbacks: {
	signInSuccessWithAuthResult: function(authResult, redirectUrl) {
	// Action if the user is authenticated successfully
	},
	uiShown: function() {
	// This is what should happen when the form is full loaded. In this example, I hide the loader element.
	document.getElementById('loader')!.style.display = 'none';
	}
	},
	signInSuccessUrl: 'https://www.anyurl.com', // This is where should redirect if the sign in is successful.
	signInOptions: [ // This array contains all the ways an user can authenticate in your application. For this example, is only by email.
	{
	provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
	requireDisplayName: true,
	disableSignUp: {
	status: true
	}
	}
	],
	tosUrl: 'https://www.example.com/terms-conditions', // URL to you terms and conditions.
	privacyPolicyUrl: function() { // URL to your privacy policy
	window.location.assign('https://www.example.com/privacy-policy');
	}
	});
	}, []);
	return (
	<>
	<h1 className="text-center my-3 title">Login Page</h1>
	<div id="firebaseui-auth-container"></div>
	<div id="loader" className="text-center">Loading form</div>
	</>
	)
	}

view raw Login.tsx hosted with ❤ by GitHub

With just that, you already have a login form with all the security from Firebase.
This is how is showed on the screen:

I even put a random email there, and you can see how firebase already validate this for me.

In this example, you can see how flexible and customizable the library is.
For full documentation, you can see the github repository page here.

Also, all the options for configuration are also on their github repository.
The documentation is super clear and robust about this library, but you can use this post as a starting point.

That's all, I hope it can be helpful for you 🥳

Comments

[shane-js]

I'm still figuring out why but this didn't work right away for me - it says the "is not authorized to view the requested page" for any email address I use even those that are signed up already. (new to firebase so I am sure this is a user error on my part to be clear)

[shane-js]

For others that come across this perhaps firebaseui-web is not the go to anymore? github.com/firebase/firebaseui-web...

[Richard Horton]

Good spotting shane-js. Thanks for posting - this will save me a bunch of frustration