Adding Firebase Authentication to Your Web Application

In the previous article of our Firebase for Web series, we looked at how to configure Firebase with a web app and add services like Analytics and Realtime Database. In this article, we will continue the series by covering another important topic from Firebase: Authentication with web apps. By the end of this article series, you will be a Firebaser (Firebase expert) and able to add robust authentication and authorization to your web applications.

Check out the previous article :

Firebase for Web: A Step-by-Step Tutorial

As we know user authentication and authorization is a crucial aspects of any web application.

Firebase Authentication is a service provided by Firebase that makes it easy for developers to add this functionality to their web applications.

With support for multiple authentication methods such as email and password, phone number, and social media providers like Google, Facebook, and Twitter,

Firebase Authentication is a versatile and powerful tool for web developers. In this article, we will be diving into how to use Firebase Authentication in your web application, including how to set it up and how to use its various features.

https://medium.com/media/fd137e21235dd7b88c1aff7c841529ae/href

Here’s a Step by Step Guide to adding email & password authentication in the web app

Enable the Authentication Service in Firebase Console

1. Initializing Firebase in a Web Application (check out the previous article or check Firebase docs)

var firebaseConfig = {
    apiKey: "your-api-key",
    authDomain: "your-project-id.firebaseapp.com",
    databaseURL: "https://your-project-id.firebaseio.com",
    projectId: "your-project-id",
    storageBucket: "your-project-id.appspot.com",
    messagingSenderId: "your-sender-id",
    appId: "your-app-id"
  };
  firebase.initializeApp(firebaseConfig);

2. Using the Firebase Authentication SDK in Web App

Add this to your Index.html file and create a form in to get the user email and password

Email:



Password:



Sign Up
Sign In
Sign Out

So we have created a webpage of our web app with a form including 2 input fields and 3 buttons to perform auth functions with the email password method with Javascript’s OnClick method

3. Create an Auth.js and Initialize it in Index.html

  
   // To get the User Entered Values from the WebPage
  var emailInput = document.getElementById("email");
  var passwordInput = document.getElementById("password");

Now to Enable the Signup function will use the firebase’s function

createUserWithEmailAndPassword("your@email.com", "userpassword")

Now here’s the signup function to create a new user account

will use the firebase app-initialized variable with auth() function to call the create, sign in, and sign out the user from the web app

Add the following code in Auth.js for each function to call onClick

SignUp :

Create a new user with an email and password

 function signUp() {
    var email = emailInput.value;
    var password = passwordInput.value;
    firebase.auth().createUserWithEmailAndPassword(email, password)
      .catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
       console.log('Error: '+ errorMessage)

      });
  }

SignIn :

Sign in an existing user with email and password

  function signIn() {
    var email = emailInput.value;
    var password = passwordInput.value;
    firebase.auth().signInWithEmailAndPassword(email, password)
      .catch(function(error) {
       console.log('Error: '+ errorMessage)
      });
  }

Sign Out :

Sign out the current user

 function signOut() {
    firebase.auth().signOut().then(function() {
      // Sign-out successful.
    }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
// Handle Errors here.
console.log('Error: '+ errorMessage)
    });
  }

Now we are done with all necessary functions so, now we can create, sign, and sign out of our web application

In order to enable the user to stay logged in even if the page is refreshed, you can use the onAuthStateChanged method to detect changes in the user's authentication state and update the UI accordingly.

Here's an example of how to use this method:

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
console.log('User Logged in with email ' +  user.email)
    document.getElementById("email").innerHTML = user.email;
    document.getElementById("sign-out").style.display = "block";
    document.getElementById("sign-in").style.display = "none";
    document.getElementById("sign-up").style.display = "none";
  } else {
    // User is signed out.
console.log('User Signed Out')
    document.getElementById("email").innerHTML = "";
    document.getElementById("sign-out").style.display = "none";
    document.getElementById("sign-in").style.display = "block";
    document.getElementById("sign-up").style.display = "block";
  }
});

after handeling the userAuth state

Check out the Github Repo Given below

GitHub - codersalman/firebase_auth

In conclusion : Firebase Authentication provides a flexible and secure solution for managing user accounts in your web app.

I hope this article has provided you with a solid foundation for working with Firebase Authentication in your web applications. Remember to test your implementation thoroughly, handle errors properly and don’t hesitate to refer to the Firebase Authentication documentation for more information and best practices.

Thank you for reading this article and I hope it has been helpful in your journey of web development with Firebase. I look forward to providing more insights and tips on Firebase in the future. If you have any questions or feedback, please feel free to reach out on coder88salman@gmail.com.

This article is published w/ Scattr ↗️