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.
