DEV Community

Cover image for How use FirebaseUI for user authentication on your React project 🔥
Nico Montiel
Nico Montiel

Posted on • Updated on

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;


Enter fullscreen mode Exit fullscreen mode

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:
Image description

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

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)

Collapse
 
shane-js profile image
shane-js • 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)

Collapse
 
shane-js profile image
shane-js

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

Collapse
 
horty profile image
Richard Horton

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