Simple Email and Google Auth with React and Firebase

Indrek Lasn
Jun 24, 2019 · 6 min read

Getting started with user authentication and Firebase

Image for post
Image for post

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

Image for post
Image for post
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.
  • 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 index.js file.

  • We’re creating a isLoggedIn state. This will determine if we let users pass our guarded routes.
  • Render the routes based on therouter.js file.
  • Setup the AuthContextcontext. 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.

Image for post
Image for 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”

Image for post
Image for post
https://firebase.google.com/

After you have successfully signed in, you should be at the project’s dashboard. Click on “new project”.

Image for post
Image for post
Firebase projects dashboard

If everything went well, you should see this notification with the name you gave the project.

Image for post
Image for post

Next, create a Firebase app. We’re going to build a web app, so choose the web app option.

Image for post
Image for post

Name your app, and grab the config variables. Place these inside the src/firebase.config.js file.

Image for post
Image for post
Image for post
Image for post
Don’t show these variables to the public. However, since this only a demo, it’s fine.

Cool! We started a project and created our firebase app. Now let’s initialize the Firebase config.

Initialize Firebase

Image for post
Image for post

If we log the firebase object and see no errors, everything is good.

Image for post
Image for post

Firebase gives us a lot. For this app, we only need to use the auth object.

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.

Image for post
Image for post
Enabling password and Google sign-in

Creating our user with email and password

Open the 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.

Image for post
Image for post

Our user hasappeared on the database — magic!

Sign in with an existing user

Head to 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.

Image for post
Image for post
Logging in

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.

Image for post
Image for post
Firebase user object

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:

Image for post
Image for post
Firebase error

You bet — Firebase sends us a response to handle our errors too. Log e object inside thecatch 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.

Follow me to the next chapter where we explore all of the above.

Here’s the source code for this chapter:

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Node + React web engineer, High Quality Tech Writers For-hire: https://vowelmagic.com/, connect with me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Node + React web engineer, High Quality Tech Writers For-hire: https://vowelmagic.com/, connect with me on Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium