Getting Started with Firebase Authentication: A Comprehensive Guide

Start using Firebase today and thank me later 😃

Firebase Authentication is a service provided by Google that allows you to add user authentication to your app with ease. It provides a range of authentication methods and features that make it easy to manage user authentication, protect user data, and build secure and scalable apps.

Why You Should go for Firebase Authentication 🤔 ?

• Easy to use:

Firebase Authentication provides a simple and easy-to-use interface for authentication. The Firebase SDKs offer a range of APIs and libraries for various platforms, making it easy to integrate authentication into your app.

• Security:

Firebase Authentication offers a range of security features, including multi-factor authentication, custom claims, OAuth2 integration, and more. This ensures that your app and user data remain secure.

• Multiple sign-in methods:

Firebase Authentication supports multiple sign-in methods, including email and password, Google, Facebook, Twitter, GitHub, and more. This allows you to offer your users a range of sign-in options.

• Customization:

Firebase Authentication offers a range of customization options, such as custom email templates, that allow you to tailor the authentication experience to your app's needs.

Overall, Firebase Authentication is a reliable and secure authentication solution that can save you time and effort in implementing authentication in your app.

Here's a step-by-step guide to help you get started with Firebase Authentication:

Step 1: Set up your Firebase project

To get started with Firebase Authentication, you'll need to create a Firebase project. Go to the Firebase console, create a new project, and enable Firebase Authentication in the Authentication tab.

Step 2: Choose an authentication method

Firebase Authentication supports a range of authentication methods, including email and password, Google, Facebook, Twitter, GitHub, and more. Choose the authentication method that best suits your app's needs.

Let's Create a Login SignUp Form :

Create a Signup.Html File

HTML CODE :

<div class="card-container">
    <div class="box">
      <h1 class="form-heading">Signup</h1>
      <form action="" class="form" method="post">
        <div class="input-cotainer">
          <input type="text" name="fname" placeholder="Enter First Name" id="fname">
          <input type="text" name="lname" placeholder="Enter Last Name" id="lname">

        </div>
        <input type="email" name="email" placeholder="Enter your Email" id="email">
        <input type="password" name="password" placeholder="Enter your Password" id="password">
        <button type="submit" id="signUpbutton">Signup</button>
        <p>Already Have Account <a href="login.html" class="link">Login</a></p>
      </form>

    </div>
  </div>

JS CODE For Signing up New Users :

<script type="module">
  import { app } from './index.js'

  import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-auth.js";

  const auth = getAuth()

  import { set, ref, push, child, } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-database.js";

  const signUpButton = document.getElementById('signUpbutton')


  signUpButton.addEventListener('click', (e) => {
    e.preventDefault()
    const fname = document.getElementById('fname').value
    const lname = document.getElementById('lname').value
    const email = document.getElementById('email').value
    const password = document.getElementById('password').value

    console.log(email)
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in 
        const user = userCredential.user;
        console.log(user)
        const userId = push(child(ref(database), 'users')).key
        set(ref(database, 'users/' + userId), {
          fname: fname,
          lname: lname,
          email: email,
          password: password
        }).then(() => {

          console.log('Data saved')
          // window.location.href = 'login.html'
        }).catch((error) => {
          console.log(error)
        })
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        alert(errorMessage)
        // ..
      });

  })


</script>

Create a LogIn.Html File

HTML CODE :

<div class="card-container">
    <div class="box">
      <h1 class="form-heading">Login</h1>
      <form action="" class="form">
        <input type="email" name="email" placeholder="Enter your Email" id="email">
        <input type="password" name="password" placeholder="Enter your Password" id="password">
        <button type="submit" id="logInbutton">Log In</button>
        <p>Create New Account <a href="index.html" class="link">Signup</a></p>
      </form>

    </div>
  </div>

JS CODE for Logging In User:

<script type="module">
  import { database} from './index.js'
  import { ref, update } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-database.js";
  import { getAuth, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-auth.js";
  const auth = getAuth();
  const logInButton = document.getElementById('logInbutton')

  logInButton.addEventListener('click', (e) => {
    e.preventDefault()
    const email = document.getElementById('email').value
    const password = document.getElementById('password').value
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in 

        const user = userCredential.user;
        update(ref(database, 'loggedIn/' + user.uid), {
          email: email,
          password: password,
          lastLogin: new Date().toLocaleString()

        }).then(() => {
          alert('Login Successful')
          console.log('Data saved')
          window.location.href = 'home.html'

        }).catch((error) => {
          console.log(error)
        })

        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        alert(errorMessage)
      });


  })

</script>

If you have implemented above steps
Congratulations🎉 You are done with Firebase Authentication

You can download Source Code from here Authentication in Firebase

Want to learn about Web Development Follow me 😀

LinkedIn : Shahab Malik
Twitter : Shahab Malik