How to Authenticate Your Users with Firebase

Depending on your project, you might need to authenticate your users, give them the ability to sign up and log in.

Firebase Authentication

Why would you need that?

When it comes to separating your paying clients from the ‘window-shoppers’, getting their email addresses or your website just simply needs user authentication, your first thought might be: OMG that’s painful to set up!

Authenticating users the ‘old-school-way’ might not be the best experience, but you’ll still need to do it and spend countless hours on something you hate.

Good news, you don’t have to do that anymore! Let me introduce you to Firebase.

Hold on a sec. What’s that? I’ve never heard of Firebase!

I got you! Firebase should be your one-stop-shop when you’re thinking of any backend stuff, say authentication, real-time database, hosting, analytics, machine learning, etc.

Let me demonstrate with a simple React App!

(Pssst! If you’re only here to authenticate the user and you already know Firebase, skip to Step 3)

Step 1: Setting up your application with Firebase

Go to Firebase and log into your Google account. Next, let’s create a new project using the big ‘Add project’ button.

Create your project

Let’s give the project a name too!

Add a name to your project

Next up, turn analytics on or off, based on your preference.

Turn the analytics on or off

Hit ‘Continue’. Wait till Firebase provisions your resources, which might take a couple of seconds. Once that’s done, you should see the project dashboard.

If so, congrats! You’ve just completed Step 1!

Step 2: Connecting your application with the Firebase project you’ve just created

Click on the little icon representing your application type. In this tutorial, I’m going to use the web app option.

Add your app to the project

Quickly walk through the steps of adding your app, then find the little settings icon in the top left corner, then hit ‘Project settings’.

Scroll all the way to the bottom and select the relevant SDK snippet option. In this tutorial, I’m going to use the ‘Config’ option. (In case you’re creating a HTML file, just copy paste the whole CDN snippet to the bottom of your index.html file)

Copy and paste the snippet to a separate file — and don’t forget to install and import the dependencies, in this case,

firebase-tools

You can do it by simply running

npm i firebase-tools

Finally, let’s export the authentication services! After all, your firebase.js file should look somewhat like this — if you’re building a React app, this is exactly how it should look like.

import firebase from 'firebase'
const firebaseConfig = {
  apiKey: "YOU-API-KEY",
  authDomain: "YOUR-AUTH-DOMAIN",
  databaseURL: "YOUR-DB-URL",
  projectId: "YOUR-PROJECT-ID",
  storageBucket: "YOUR-STORAGE-BUCKET-URL",
  messagingSenderId: "YOUR-MESSAGING-SENDER-ID",
  appId: "YOUR-APP-ID"
};
const firebaseApp = firebase.initializeApp(firebaseConfig)
const auth = firebase.auth()
const provider = new firebase.auth.GoogleAuthProvider()
export { auth, provider }

Congrats! Step 2 done ✅

Step 3: Email/Password & Google Authentication

In this tutorial I’m only going to cover the two above as these two the most popular ones.

Let’s import the authentication services in the component that will use them.

⚠️ Make sure to import the component you just created, not the dependency

import { auth, provider } from './firebase'

All done? Cool! Let’s head back to Firebase, and switch the backend on…sound crazy, but that’s literally what we’ll do!

Select Authentication in the left sidebar and click ‘Set up sign-in method’. Once that’s done, turn on the authentication service you need, follow the on-screen instructions and you’re set! For this tutorial, we’re going to use the Email/Password and Google options as it follows.

Turn the authentication service you want to use

Now let’s set up Google Authentication in your app:

const signIn = () => {
  auth.signInWithPopup(provider).then((result) => {
    // this is, where you can store your logged in user 
    console.log(result)});
  }).catch((error) => {
    alert(error.message);
  });
};

And last, but not least, quickly let’s set up the Email/Password Authentication in your app:

const signUp = (event) => {
  // preventing React app to reload  
  event.preventDefault()
  auth.createUserWithEmailAndPassword(email, password)
      .then((authUser) => {
        // this is, where you can store your logged in user
        return authUser.user.updateProfile({
        displayName: username
      })
    }).catch((err) => alert(err.message))
}

const signIn = (event) => {
  // preventing React app to reload
  event.preventDefault()
  auth.signInWithEmailAndPassword(email, password)
      .catch((err) => alert(err.message))
}

Alright, that’s it! Your authentication service is now up and running!

But don’t go just yet! If you found this article useful, check out this free webinar to take your skills to the next level!

https://bit.ly/2JnP7bM