Firebase Integration With Web

0 0 2 minutes read

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.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!