Getting Started with Firebase Authentication: A Comprehensive Guide
Tags: javascript, webdev, firebase, frontend
Published: 2023-04-16 01:12:50

#### 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4prbh7kxo53wn79bawvl.jpg)

#### 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkmlkchwwsfsvt7go3qp.jpg)


#### 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](https://github.com/Shahab-Malikk/Firebase-CRUD-Application)

Want to learn about Web Development Follow me 😀 

LinkedIn : [Shahab Malik](https://www.linkedin.com/in/shahab-malik/)
Twitter : [Shahab Malik](https://twitter.com/malik_227710)