Skip to content
Related Articles
Open in App
Not now

Related Articles

Firebase Integration With Web

Improve Article
Save Article
  • Last Updated : 14 Jul, 2021
Improve Article
Save Article

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=
    </script>
  
    <script src=
    </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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!