Easy Authentication System with React and Firebase for beginners

Victoria Lo
May 25 · 6 min read
Image for post
Image for post

So, what’s an authentication system?

It is used to identify users which allows the app to store personal user data and provide a personalized experience across all the user’s devices. Think of any apps that requires you to create an account like e-commerce apps, productivity apps, etc.

These days, most apps have an authentication system in order to provide their users a personalized and distinct experience. But how do we design and implement a good authentication system? In this tutorial, we will build a simple authentication system using Firebase Authentication and React (for front-end).

Step 1: Set up Firebase Project

If you don’t have a Firebase account, go here to create an account.

Then, create a new project and fill in the details:

Image for post
Image for post

Using Google Analytics is completely up to you:

Image for post
Image for post

Accept terms and create the project:

Image for post
Image for post

After creating the project, you will be taken to the project dashboard. There are 4 round icons in the middle (iOS, Android, Web and Unity). For this tutorial, choose the Web icon.

Image for post
Image for post

You will then have to register the app. Fill in the details. We can skip the Firebase Hosting option for now.

Image for post
Image for post

After clicking ‘Register App’, you will see the screen below. These configurations will be important so copy the and keep it somewhere for now. We will come back to it later.

Image for post
Image for post

Set up Firebase Authentication

Now that we have our app created, let’s head over to the left sidebar of the dashboard. Under the Develop tab, click on the Authentication option.

Image for post
Image for post

Now click on the Set up sign-in method button to get started.

Image for post
Image for post

Then let’s click on Email/Password option to enable it. And done! Once we connect Firebase to our app, our users will be able to log into the app with their email and password. This tutorial will not cover how to set up other methods of sign in because it requires a few more steps. Do let me know if you want me to show you how to use the other methods!

Image for post
Image for post

Step 3: Create React App

We have set up the necessary Firebase stuff for our React App. So let’s now create the app!

On your command line:

npx create-react-app myProject

Then run:

npm install firebase

Now, retrieve the that you have saved and copy it to the index.js like so:

const firebaseConfig = {
apiKey: APP_API_KEY,
authDomain: AUTH_DOMAIN,
databaseURL: DATABASE_URL,
projectId: PROJECT_ID,
storageBucket: STORAGE_BUCKET,
messagingSenderId: MESSAGING_SENDER_ID,
};
firebase.initializeApp(firebaseConfig);

Add the at the top and this is what it should look like:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as firebase from 'firebase';
const firebaseConfig = {
apiKey: APP_API_KEY,
authDomain: AUTH_DOMAIN,
databaseURL: DATABASE_URL,
projectId: PROJECT_ID,
storageBucket: STORAGE_BUCKET,
messagingSenderId: MESSAGING_SENDER_ID,
};
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
ReactDOM.render(
<App />
document.getElementById('root')
);

Step 4 Sign In Page

This is the home page of my project. In order to sign in, the user will click the top right button and this button will open the Firebase Authentication UI to login. Then the user will be redirect to a home page with a personalized account page. Let’s write that in code!

Image for post
Image for post

First, install the Firebase UI by running:

npm install --save react-firebaseui

Then, create sign_in.js to display the authentication login page and setup the sign in options:

this.uiConfig = {
signInFlow: "popup",
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
callbacks: {
signInSuccessWithAuthResult: () => false
}
};

The configurations will be entirely up to you, based on what you want to do after the user logs in. Read the documentation for details.

Then, have a state that tracks whether the user is logged in or not. We can then update the state using the firebase.auth().onAuthStateChanged() function:

componentDidMount() {
firebase.auth().onAuthStateChanged(user => {
this.setState({
isSignedIn: !!user,
}, () => {this.props.setSignedIn(this.state.isSignedIn)
})
})
}

To redirect the page back to home after the user logs in, run:

npm install react-router-dom

Set it up in the sign_in.js and it should look like so:

import React from 'react';
import '../App.css';
import { FirebaseAuth } from 'react-firebaseui';
import firebase from 'firebase';
import {Redirect} from 'react-router-dom';
class SignIn extends React.Component {
constructor(props) {
super(props);
this.uiConfig = {
signInFlow: "popup",
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
callbacks: {
signInSuccessWithAuthResult: (result) => false
}
};
this.state = {
isSignedIn: false
}
}
componentDidMount() {
firebase.auth().onAuthStateChanged(user => {
this.setState({
isSignedIn: !!user,
}
})
}
render() {
return (
<div>
{this.state.isSignedIn ? <Redirect to={{pathname: "/"}}/> :
<div className="section">
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="section-title">
<h2 className="title">Sign In</h2>
</div>
<FirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
</div>
</div>
</div>
</div>}
</div>
);
}
}
export default SignIn;

CONGRATULATIONS! Your Firebase Authentication React App should be good to go! If everything is right, upon clicking SIGN IN, the user should see:

Image for post
Image for post

Step 5: Next Steps

This is the end of what this long tutorial can cover for now. But the next steps to this authentication system is to update the home page if the user signed in to be more personalized. (i.e. have their name and profile picture replace the generic one on the top right corner). I went ahead and did it already:

Image for post
Image for post

As seen in the top right corner, after signing in, the app knows exactly who I am and display both my name and profile picture. It also changes the ‘SIGN IN/JOIN’ to a ‘SIGN OUT’. A simple way to sign a user out is:

firebase.auth().signOut()

Hope this tutorial is helpful for new coders trying to deal with Firebase Authentication and React. Feel free to ask me questions if I could help with any issues regarding the implementation of this tutorial. Cheers!

A note In Plain English

Did you know that we have four publications and a YouTube channel? You can find all of this from our homepage at plainenglish.io — show some love by giving our publications a follow and subscribing to our YouTube channel!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store