Firebase Integration With Web

Firebase is a platform developed by Google for creating mobile and web applications. We will see how to integrate or connect firebase with our sample Web application.

Approach: Follow the below steps to integrate your web app with firebase.

Firstly we will create a HTML page in the index.html file.
Once the html page is created, we will create JavaScript with the name form.js.
Once this is created, log in to the firebase console and create a new project.
Add any name of your choice. Once that is done, go to Authentication=>Sign-in-method
Now click on enable Email/Password.
Once this step is done, Run the HTML file.

Below is the implementation of above approach

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />

    <script src=
"https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js">
    </script>

    <script src=
"https://www.gstatic.com/firebasejs/8.2.7/firebase-auth.js">
    </script>
    
    <script src="form.js"></script>
    <title>Login System</title>
</head>

<body>
    <div class="formContainer">
        <h1>Enter Credentials Here:</h1>
        <input type="email" 
            placeholder="email here" id="email" />
        <br />
        <input type="password" 
            placeholder="password here" id="password" />
        <br />
        <button onclick="signUp()" id="signUp">
            SignUp
        </button>
        <button onclick="signIn()" id="signIp">
            SignIn
        </button>
        <button onclick="signOut()" id="signOut">
            SignOut
        </button>
    </div>
</body>

</html>

Now make a form.js file and add javascript code that will contain firebase configuration details and API key.

form.js

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later,
// measurementId is optional
var firebaseConfig = {
  apiKey: "AIzaSyAv_PFCLcflPPO5NYtXkz5r-H9J2IEQzUQ",
  authDomain: "login-demo-a03bf.firebaseapp.com",
  projectId: "login-demo-a03bf",
  storageBucket: "login-demo-a03bf.appspot.com",
  messagingSenderId: "831896060677",
  appId: "1:831896060677:web:a0616c95abc1bcdedf6d6c",
  measurementId: "G-XWHF8K6XSV",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const auth = firebase.auth();

// Signup function
function signUp() {
  var email = document.getElementById("email");
  var password = document.getElementById("password");

  const promise = auth.createUserWithEmailAndPassword(
    email.value,
    password.value
  );
  promise.catch((e) => alert(e.message));
  alert("SignUp Successfully");
}

// SignIN function
function signIn() {
  var email = document.getElementById("email");
  var password = document.getElementById("password");
  const promise = auth.signInWithEmailAndPassword(
            email.value, password.value);
  promise.catch((e) => alert(e.message));
}

// SignOut
function signOut() {
  auth.signOut();
  alert("SignOut Successfully from System");
}

// Active user to homepage
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    var email = user.email;
    alert("Active user " + email);
  } else {
    alert("No Active user Found");
  }
});

Now in the firebase dashboard, go to Authentication=>Sign-in-method.

Now to see the complete output of the above implementation do the following:

Once you enter the details, and click the sign-up button, the page will display a pop-up message saying the user is successfully signed in. This means that the data is saved in firebase. Go to firebase->build->authentication->users. Here you will find the email-id and the password saved.

Output:

Now your web application is integrated with firebase.

Firebase Integration With Web

Explore