Firebase Integration With Web - GeeksforGeeks

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.
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 optionalvar 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 Firebasefirebase.initializeApp(firebaseConfig);  const auth = firebase.auth();  // Signup functionfunction 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 functionfunction 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));}  // SignOutfunction signOut() {  auth.signOut();  alert("SignOut Successfully from System");}  // Active user to homepagefirebase.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
JavaScript-Questions
Picked
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?