Getting started with user authentication and Firebase
I had lots of fun creating my latest app with React and Firebase. React makes UI development straightforward and Firebase makes user authentication, database management, and analytics easy.
I like Firebase when it comes to building native apps or fast prototyping. It’s a great tool and knowing how to use it will benefit you greatly. Did I mention it’s free for small apps?
Here’s a simple way to get started with user authentication and Firebase.
I already set up the boilerplate, if you want to code along, you can clone the Github repository here.
Created with CodeSandbox. Contribute to indreklasn/react-fire-auth-example development by creating an account on…
Here’s a form you’ve seen a thousand times by now
If you cloned the repository or opened the CodeSandBox, inside the
src folder you should see 4 main files. Please familiarize yourself with the project and files. So far we have some boiler code, markup, and styling. This tutorial covers the authentication bits.
index.js— The main file which renders the React app.
Login.js— Login form markup
Join.js— Join form markup
Header.js— Top navigation
routes.js— Application routes
The main fun is happens in the
- We’re creating a
isLoggedInstate. This will determine if we let users pass our guarded routes.
- Render the routes based on the
- Setup the
AuthContextcontext. This is so we lift the state from
App.js.If the context syntax is new to you, check out this post before continuing.
Notice we’re using hooks. If hooks are new to you, check out this blog post.
Now that we got the nitty-gritty out of the way, we can finally begin implementing the Firebase auth.
Head to the Firebase website and click “Get started”
After you have successfully signed in, you should be at the project’s dashboard. Click on “new project”.
If everything went well, you should see this notification with the name you gave the project.
Next, create a Firebase app. We’re going to build a web app, so choose the web app option.
Name your app, and grab the config variables. Place these inside the
Cool! We started a project and created our firebase app. Now let’s initialize the Firebase config.
If we log the firebase object and see no errors, everything is good.
Firebase gives us a lot. For this app, we only need to use the
Remember, our goal is to create a user, store it in the database, and manage auth sessions.
Before we start coding, we need to activate password and Google sign-in methods from our Firebase dashboard.
Creating our user with email and password
src/Join.js file and find the
handleForm function. Inside the function, we’re going to place the user creation logic.
First, import the
firebase object to the
Join.js file so we can access the object.
Firebase gives us an API to directly talk with the database in real time. Luckily, the API is modern and promise based. If you are a stranger to promises, here’s a nice post about them.
How we create a user is simple, there’s a method called
createUserWithEmailAndPassword on the
auth property. We just pass the email and password as arguments.
Now you fill the form and submit, a user will be created.
Our user hasappeared on the database — magic!
Sign in with an existing user
Login.js and just like before, import the firebase object. Signing in with an existing user is straightforward — we use the
signInWithEmailAndPassword method and pass our email and password as the arguments.
Let’s see if it’s working.
Indeed it is working. How do we know? Well, the
is logged in: true tells us we are logged in. But how can we really know if it’s working?
Good question. The moment we send the email and password to Firebase, firebase will try to unlock the user and send us the response back. Go ahead, log out the
res inside the promise.
On successful auth, Firebase sends us a lot of information about the user (nothing sensitive though).
We know when it works, but do we know when things don’t work?
Try logging in with a user that doesn’t exist or using invalid credentials:
You bet — Firebase sends us a response to handle our errors too. Log
e object inside the
catch block if you’re curious to see all the error messages.
Ok, creating a user and authentication works. We still have some work to do.
What about signing in with the Google button? Or managing user sessions? If we refresh the page, our user will log out.