Firebase Integration With Web (original) (raw)

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 `

<script src=

"" title="undefined" rel="noopener noreferrer">https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js">

<script src=

"" title="undefined" rel="noopener noreferrer">https://www.gstatic.com/firebasejs/8.2.7/firebase-auth.js">

<script src="form.js"></script>
<title>Login System</title>

`

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.