Skip to content
Related Articles

Related Articles

Improve Article

Firebase Integration With Web

  • Last Updated : 14 Jul, 2021

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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
Recommended Articles
Page :