Firebase Integration With Web
Last Updated :
25 Jul, 2024
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.
Similar Reads
Integrating with Other Firebase Services Firebase is an app development platform developed by Google that provides services to the application development process and enhances the users experience and the performance of the applications. So the Firebase integration of many services can provide a powerful addition to our applicationâs funct
6 min read
Firebase - Introduction Firebase, a product of Google, is a powerful platform that enables developers to build, manage, and scale applications with ease. It simplifies app development by offering a secure and efficient backend, eliminating the need for server-side programming. Firebase supports multiple platforms, includin
7 min read
Google Sign In With Firebase in Flutter Web Firebase is a Google product that helps developers build, manage, and grow their apps easily. It also helps developers build their apps faster and more securely. No programming is required on the Firebase side, which makes it easy to use its features more efficiently. You can sign in with Google Sig
4 min read
Introduction to Firebase Cloud Storage Firebase Cloud Storage is a robust and cloud-based solution which is customize for storing and serving user-generated content such as photos, videos and other media files. As an integral part of the Firebase platform, it easily integrates with various Firebase and Google Cloud Platform (GCP) service
4 min read
Server-side code with Firebase Functions Firebase Functions provides a serverless framework for simplifying backend development within the Firebase ecosystem. They integrate with other Firebase services, enabling developers to create responsive functions triggered by various events such as user authentication changes, Firestore updates, an
3 min read