[Firebase] Firebase Authentication with React

Firebase gives us tremendous convenience.

In this posting, let's learn about authentication using Firebase.

React Application

For this practice, I used CRA (Create-React-App) that is the most used.

I made the sign-in form.

The explanation of the React application omits since I assumed that you can make a React application.

I used styled-icons for the first time and it's not bad.

The code was longer and there were many packages to install, but it was easy to style using styled-components.

While the FontAwesome is simple to use, but it is inconvenient to style.

Firebase Configuration

Go to the Firebase console.

The main page of the Firebase is in English, but I move to the console, it is changed in Korean.

My system language is English, so I don't know why and how to change this.

Let's click the [Add Project] button.

Give the name of the project.

And press the [Continue] button.

I won't use Google Analytics, because this project is just for practice.

Press the [Create Project] button.

Yay~! Our project is created.

Press the [Continue] button.

Now, add our application.

Select the web, because our React application is a web application.

Give a nickname, and press the [Register App] button.

Keep this information for later usage.

Move on to the console.

Go to the Authentication, and click the [Login Method Setting] button.

I chose the Email/Password and Google method. The other methods are similar to these.

Click the [Save] button.

Great. We can use those methods now.

Link Firebase Authentication to Our React Application

First, install the Firebase.

$ yarn add firebase

 

Next, create the .env file in the project root folder.

REACT_APP_FIREBASE_API_KEY              =
REACT_APP_FIREBASE_AUTH_DOMAIN          =
REACT_APP_FIREBASE_DATABASE_URL         =
REACT_APP_FIREBASE_PROJECT_ID           =
REACT_APP_FIREBASE_STORAGE_BUCKET       =
REACT_APP_FIREBASE_MESSAGING_SENDER_ID  =
REACT_APP_FIREBASE_APP_ID               =

Put previously kept information into this code.

I will add this file in the .gitignore for preventing to upload this secret information to a remote repository.

 

And create fbConfig.js file in the src folder.

import * as firebase from "firebase/app";
import "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

firebase.initializeApp(firebaseConfig);

export const firebaseInstance = firebase;
export const authService = firebase.auth();

Now, it is prepared to use Firebase's authentication.

Email/Password

First, let's try the email/password method.

import { authService } from "../fbConfig";

const onSignIn = async () => {
  try {
    await authService.signInWithEmailAndPassword(email, password);
    setIsLoggedIn(true);
  } catch (e) {
    setError(e.message);
  }
};

const onSignUp = async () => {
  try {
    await authService.createUserWithEmailAndPassword(email, password);
    setIsLoggedIn(true);
  } catch (e) {
    setError(e.message);
  }
};

const onSignOut = async () => {
  await authService.signOut();
  setIsLoggedIn(false);
};

Import the authService we made.

And I made three functions for sign-in, sign-up, sign-out each.

Bind this function to each button to React application.

The important function is signInWithEmailAndPassword, createUserWithEmailAndPassword, and signOut.

Currently, we don't have any users, so let's make an account.

I made an account with the above information.

Let me check this in the Firebase console.

Awesome!!! We easily made a user account.

The sign-out function works fine as well.

Google

Add this code to the application.

const onSignInWithGoogle = async (event) => {
  const {
    target: { name },
  } = event;

  let provider;
  if (name === "google") {
    provider = new firebaseInstance.auth.GoogleAuthProvider();
  }
  await authService.signInWithPopup(provider);
  setIsLoggedIn(true);
};

Create a provider as GoogleAuthProvider, and provide it into the signInWithPopup function.

Bind this function with the Sign In with Google button.

 

If you try it, it will work well.

Make your own application with this content.