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.
