How use FirebaseUI for user authentication on your React project 🔥

#firebase #react #vue #webdev

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.

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 🥳

Top comments (3)

shane-js • Jul 11 • Edited

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)