In this tutorial, we are going to follow a step-by-step guide on how to set up the Firebase authentication service, and then walk through how to implement the service in your application. An authentication service protects your website from unverified users having access to the website's features or contents. It ensures users are who they say they are. It proves users' identity is genuine by verifying their credentials, which are usually the username/email and password. We've all experienced this on platforms such as Facebook, Instagram or Twitter when we are trying to sign into our accounts. An authentication service such as Firebase authentication provided by Google's Backend as a Service (BaaS) product, makes the authentication process super easy for developers. It provides an array of authentication methods, ranging from native providers such as plain email and password or social providers like Facebook, Twitter, LinkedIn, GitHub & Google. Implementing the social sign-up/sign-in providers in the sign-up and sign-in flow improves the experience of users on your website. Signing up or signing in through this process is less stressful cognitively, users do not have to start trying to remember their password when they could just click on a social sign-in button, and be signed up or signed in seamlessly without any hassle whatsoever. Setting Up Firebase Authentication Service Step 1 Proceed to https://console.firebase.google.com Sign into your Firebase account or sign-up if you don't have an account. Click the Add project box to set up a new project. Step 2 Type your project name. Disable the Google Analytics functionality on the next page, we don't need it for this project. Click the button. Create project Step 3 Click the icon button, since we are building a sign-in system for a web app. </> Type a name for your web app. Click the button. Register app Step 4 Create a firebase.js file in your code editor. Copy the firebase configuration content in the blue box image above. Paste it into the firebase.js file At this point your firebase.js file should look like this: // Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "*************************",
  authDomain: "**********************",
  projectId: "*****************",
  storageBucket: "****************",
  messagingSenderId: "*******",
  appId: "*************"
};

// Initialize Firebase and export
export const app = initializeApp(firebaseConfig); The parts hashed out above should be replaced with your unique value provided by the Firebase SDK. It was hashed out for security purposes. Step 5 Head back to the Firebase console. Click the button. Continue to console Now you just created a web app in your firebase project. It's possible to create another app as well like a mobile app if you are developing a mobile app. In this case, you will be clicking the android or icon (depending on the operating system architecture for the mobile app) in the interface in step 3. iOS With this newly created web app, we can access any Firebase service available on the console like the authentication service we will be using shortly. To avoid prolonging this article unnecessarily by putting too much focus on the steps of setting the authentication process, you can follow the rest of the where you can work with a clear visual illustration of the steps. I would strongly advise you to visit the link above to complete the authentication setup on the firebase console. setup flow As stated earlier in step 4, Firebase provides SDKs for any product that we want to utilize in our project. However, before we can have access to the authentication SDK we need to install it into our project. The SDK can be installed by running the following command in your CLI or terminal: npm install firebase Make sure you change the directory (cd) to the folder your project is sitting in before running the command above in your command line. Sign-Up Flow The sign-up process is a user's introduction to a website, and before the user can be trusted to enjoy the resources or view the content of the website, they need to be authenticated, which is a way of ensuring a user is who they say they are on the internet. Password-based Sign-Up As stated earlier, we are going to be authenticating our users in two ways: via email/password and via Google, of course, there are more ways to authenticate too, Phone, Facebook, Twitter, Apple, and GitHub among others. Before any serious coding commences, let's get the form interface design out of the way first. import { Link } from "react-router-dom";
import {
  createUserWithEmailAndPassword,
  getAuth
} from "firebase/auth";
import { useState } from "react";

const PasswordSignUp = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  // instantiate the auth service SDK
  const auth = getAuth();

  const handleChange = (e) => {
    const { name, value } = e.target;

    if (name === "email") setEmail(value);
    if (name === "password") setPassword(value);
  };

  // Handle user sign up with email and password
  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      // create a new user with email and password
      const userCredential = await createUserWithEmailAndPassword(
        auth,
        email,
        password
      );

      // Pull out user's data from the userCredential property
      const user = userCredential.user;
    } catch (err) {
      // Handle errors here
      const errorMessage = err.message;
      const errorCode = err.code;

      setError(true);

      switch (errorCode) {
        case "auth/weak-password":
          setErrorMessage("The password is too weak.");
          break;
        case "auth/email-already-in-use":
          setErrorMessage(
            "This email address is already in use by another account."
          );
        case "auth/invalid-email":
          setErrorMessage("This email address is invalid.");
          break;
        case "auth/operation-not-allowed":
          setErrorMessage("Email/password accounts are not enabled.");
          break;
        default:
          setErrorMessage(errorMessage);
          break;
      }
    }
  };

  return (
    <div className='signupContainer'>
      <div className='signupContainer__box'>
        <div className='signupContainer__box__inner'>
          <h1>Sign Up</h1>
          <form className='signupContainer__box__form' onSubmit={handleSubmit}>
            <input
              type='email'
              placeholder='Email'
              onChange={handleChange}
              name='email'
              value={email}
            />
            <input
              type='password'
              placeholder='Password'
              onChange={handleChange}
              name='password'
              value={password}
            />
            <button type='submit'>Sign Up</button>
            {error && <p>{errorMessage}</p>}
          </form>

          <div className='signupContainer__box__login'>
            <p>
              Already have an account? <Link to='/signin'>Sign In</Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PasswordSignUp; A lot is going on in the code above so we will dive into every aspect of the code and try to understand the message it is conveying. First off, we are importing the method and the method in lines 4 to 6. createUserWithEmailAndPassword getAuth The method aid in creating a new user account with the and from the input value which will be provided as arguments in the method along with the variable instantiated in line 16, is an auth instance from the firebase auth service. createUserWithEmailAndPassword email password auth auth Then, on successful creation of the user account (once the returned Promise is resolved), the user will be signed into the website or application. The returned Promise is the user credential object ( ), from this user credential ( ) we can pull out the email we provided to sign-up from the property, the username, phone number and the image URL can be accessed as , and properties respectively. userCredential userCredential.user email displayName phoneNumber photoURL The input value we pulled from is used to get the email and password the user typed, since we are using one function in lines 18 to 23 for the prop for the email and password input field we can decide which input value is needed based on what the input name attribute value ( )is equal to, or . e.target handleChange onChange e.target.name email password In the catch block, lines 39 to 64, we handle the errors gracefully with a switch statement. Firebase auth service provides error codes for developers to provide an appropriate contextual message for their users, like if is equal to we can tell the user that the , improving the user experience and accessibility of our website in the process. err.code auth/invalid-email email address is invalid The state is updated with the right message according to the context of the error, then we do a conditional rendering in line 88 to check if there is an error, in that case, display a certain error message. errorMessage The moment any of your users signs up successfully their respective user account details will be saved onto Firebase authentication, you can access this by clicking the n the Authentication page. The user's id together with the email address used, provider (email/password, Google or Twitter), date the user first signed up and their latest sign-in date will be provided. Users tab o Google Authentication Sign-Up Firebase Google authentication provider should be enabled before proceeding with this part. Follow the setup flow provided earlier to enable the Google authentication provider on your Firebase console. import googleLogo from "../assets/images/googleLogo.webp";
import { Link } from "react-router-dom";
import {
  signInWithPopup,
  GoogleAuthProvider,
  getAuth
} from "firebase/auth";
import { useState } from "react";

const GoogleSignUp = () => {
  const [error, setError] = useState(false);
  const [googleErrorMessage, setGoogleErrorMessage] = useState("");

  // Instantiate the auth service SDK
  const auth = getAuth();

  // Handle user sign up with google
  const handleGoogleSignUp = async (e) => {
    e.preventDefault();

     // Instantiate a GoogleAuthProvider object
    const provider = new GoogleAuthProvider();
    
    try {
      // Sign in with a pop-up window
      const result = await signInWithPopup(auth, provider);

      // Pull signed-in user credential.
      const user = result.user;
    } catch (err) {
      // Handle errors here.
      const errorMessage = err.message;
      const errorCode = err.code;

      setError(true);

      switch (errorCode) {
        case "auth/operation-not-allowed":
          setGoogleErrorMessage("Email/password accounts are not enabled.");
          break;
        case "auth/operation-not-supported-in-this-environment":
          setGoogleErrorMessage("HTTP protocol is not supported. Please use HTTPS.")
          break;
        case "auth/popup-blocked":
          setGoogleErrorMessage("Popup has been blocked by the browser. Please allow popups for this website.")
          break;
        case "auth/popup-closed-by-user":
          setGoogleErrorMessage("Popup has been closed by the user before finalizing the operation. Please try again.")
          break;
        default:
          setGoogleErrorMessage(errorMessage);
          break;
      }
    }
  };

  return (
    <div className='signupContainer'>
      <div className='signupContainer__box__google'>
        <button onClick={handleGoogleSignUp}>
          <span>
            <img src={googleLogo} alt='Google Logo' />
          </span>
            Sign Up with Google
        </button>
          {error && <p>{googleErrorMessage}</p>}
      </div>

          <div className='signupContainer__box__login'>
            <p>
              Already have an account? <Link to='/signin'>Sign In</Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default GoogleSignUp; From the code above in lines 3 to 7 you can see we imported method which authenticates users using a popup-based OAuth authentication flow, which is an instance of the Google provider object and the instance to connect to the Firebase authentication service. signInWithPopup GoogleAuthProvider getAuth In lines 15 and 21 we instantiate the authentication service and the Google Authentication Provider respectively. We proceed to run an asynchronous operation with the method in line 23, if the operation succeeds the signed-in user is returned along with the provider's credential in the constant in line 23. signInWithPopup result To pull out the user's credentials like , and (this is the image attributed to the Google account the user used to sign-up) we implement , we may want to use these credentials on the home page to display the user's name or image. displayName email photoURL result.user It's always a best practice to handle errors in your code gracefully to enhance the user's experience while interacting with your website. Plus, it is necessary to deal with form validation on both the client side and server side to ensure consistency in the user's data that was input in the form fields. Lines 37 to 53 implement a switch statement to handle various error messages provided by Firebase authentication when signing up with the Google provider is unsuccessful, with these error messages we create appropriate feedback for the user based on the action taken by the user. Navigate to your Firebase console authentication page, and click the tab where all the users that have signed up on your website will be displayed showing the provider used for authentication under the column. Google G icon will be displayed for users that sign up with Google. Users Providers Sign-In Flow At this point, we will be implementing the sign-in authentication flow using password-based authentication and Google authentication provider to ease the sign-in process for the users without the constant pressure to remember their password. Password-based Sign-In import { Link } from "react-router-dom";
import { useState } from "react";
import {
  signInWithEmailAndPassword,
  getAuth
} from "firebase/auth";

const PasswordSignIn = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");
  
  // Instantiate the auth service SDK
  const auth = getAuth();

  const handleChange = (e) => {
    const { name, value } = e.target;

    if (name === "email") setEmail(value);
    if (name === "password") setPassword(value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      // Sign in with email and password in firebase auth service
      const userCredential = await signInWithEmailAndPassword(
        auth,
        email,
        password
      );

      // The signed-in user info
      const user = userCredential.user;
    } catch (err) {
     // Handle Errors here.
      const errorMessage = err.message;
      const errorCode = err.code;

      setError(true);
      console.log(errorCode)

      switch (errorCode) {
        case "auth/invalid-email":
          setErrorMessage("This email address is invalid.");
          break;
        case "auth/user-disabled":
          setErrorMessage(
            "This email address is disabled by the administrator."
          );
          break;
        case "auth/user-not-found":
          setErrorMessage("This email address is not registered.");
          break;
        case "auth/wrong-password":
          setErrorMessage("The password is invalid or the user does not have a password.")
          break;
        default:
          setErrorMessage(errorMessage);
          break;
      }
    }
  };

  return (
    <div className='signinContainer'>
      <div className='signinContainer__box'>
        <div className='signinContainer__box__inner'>
          <h1>Sign In</h1>
          <form className='signinContainer__box__form' onSubmit={handleSubmit}>
            <input
              type='email'
              placeholder='Email'
              name='email'
              onChange={handleChange}
            />
            <input
              type='password'
              placeholder='Password'
              name='password'
              onChange={handleChange}
            />
            <button type='submit'>Sign In</button>
            {error && <p>{errorMessage}</p>}
          </form>

          <div className='signinContainer__box__signup'>
            <p>
              Don't have an account? <Link to='/signup'>Sign Up</Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PasswordSignIn; The code for the sign-in flow using email/password is not too different from the signup flow code, the only difference is the method imported in lines 4 to 9. We sign in the user in lines 26 to 30 with the email and password they entered in the form fields, then we store the returned Promise inside the . signInWithEmailAndPassword userCredential constant From this we get all the user's info using as in line 33 above. Afterward, we handle any errors in the catch block if the sign-in process failed. The appropriate error message feedback will be displayed in crimson color under the Sign In button. userCredential constant userCredential.user Google Authentication Sign In The code that handles the sign-up and sign-in flow using the Google authentication provider is the same really since the user's Google account email and password will always remain consistent considering the Google details were saved on the Firebase authentication during the sign-up process. The only thing that will change is just instead of a it will be a button. Sign Up With Google button Sign In With Google Signing Out The sign-out implementation is not complex, it's pretty straightforward. import { signOut, getAuth } from "firebase/auth";

const Home = () => {
 // Instantiate the auth service SDK
 const auth = getAuth();

  return (
    <section className='home'>
      <div className='home__container'>
        <button onClick={() => signOut(auth)}>Sign Out</button>   
      </div>
    </section>
  );
};

export default Home; From the code displayed above, we can see all we need to do is import the Firebase authentication SDKs, the and method. The instantiated auth service SDK, will be provided as an argument to the method we imported earlier. The current user will be signed out of the website and removed from the Firebase authentication users' account upon clicking the button. signOut getAuth auth signOut Sign Out Conclusion Firebase's suite of products has been valuable in building dynamic, efficient web and mobile applications among them being the authentication service, it also provides tools to monitor deployed applications' performance like Crashlytics and Performance Monitoring. Firebase comes with a complete package of tools to aid companies, businesses, and developers in creating top-value digital products that tackle their customer's pressing needs. We will be introduced to Firebase Firestore in my next Firebase article. Cheers✌

This story contains new, firsthand information uncovered by the writer.

How to Build a Smooth Authentication Flow System with Firebase

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Deconstructing React 18

161 Stories To Learn About Authentication

3 Reasons for B2C Enterprises to Implement Single Sign-on Authentication

4 Dangers of Sticking with Outdated MFA Methods

The Noonification: Tailwindcss? Ill Pass (8/27/2023)

80% Devices in 2023 Are Already Passkey-Ready: Apple, Microsoft, and Google Pushing It Even Higher

Deconstructing React 18

161 Stories To Learn About Authentication

3 Reasons for B2C Enterprises to Implement Single Sign-on Authentication

4 Dangers of Sticking with Outdated MFA Methods

The Noonification: Tailwindcss? Ill Pass (8/27/2023)

80% Devices in 2023 Are Already Passkey-Ready: Apple, Microsoft, and Google Pushing It Even Higher

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps