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.

Here’s a form you’ve seen a thousand times by now

What our boilerplate looks like

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.

— The main file which renders the React app. Login.js — Login form markup

— Login form markup Join.js — Join form markup

— Join form markup Header.js — Top navigation

— Top navigation routes.js — Application routes

The main fun is happens in the index.js file.

We’re creating a isLoggedIn state. This will determine if we let users pass our guarded routes.

state. This will determine if we let users pass our guarded routes. Render the routes based on the router.js file.

file. Setup the AuthContext context. This is so we lift the state from Login.js to 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.