Firebase Authentication for Web
Firebase is a mobile and web app development platform that provides plenty of tools to help developers utilize realtime databases, monetize their apps, track crash reports and so much more. This post is going to primarily focus on the Firebase Realtime Database. This is essentially a cloud-hosted NoSQL database that lets you store and sync between your users in realtime. What we are going to implement is Firebase authentication for web.
Let’s get right to it. First, you need to have your preferred text editor installed. I personally prefer Visual Studio Code for its unique simplicity. Create a file and name it login.html and write the following code:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Login Page</title></head><body><script src="firebase.js"></script><script src="login.js"></script></body></html>
Create another file and name it main.html and repeat the process with the code above. Change the title to Main Page or whatever name you’d like.
Next, head over to your Firebase console and click on Add Project and accept the terms. On the project dashboard, click on Add Firebase to your web project. Copy the script below and paste it on your login.html and main.html pages before the closing </head> tag:
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase.js"></script>Add a new file and name it firebase.js. In it copy the code that initializes Firebase which comes right after the above code snippet above. (Do not copy the <script> tags). It is advisable to wrap your firebase script with a self invoked function to make it private. So my code looks like this:
var app_firebase = {};
(function(){//Initialize firebasevar config = {
apiKey: "MY_API_KEY",//placeholder for real API key
authDomain: "MY_APP.firebaseapp.com", //placeholder for app name
databaseURL: "https://MY_APP.firebaseio.com",
projectId: "MY_APP",
storageBucket: "MY_APP.appspot.com",
messagingSenderId: "2236250329"
};
firebase.initializeApp(config);app_firebase = firebase;
})()
Create another file and name it login.js and write the following code:
(function(){
var ui = new firebaseui.auth.AuthUI(firebase.auth());var uiConfig = {callbacks: {signInSuccessWithAuthResult: function(authResult, redirectUrl) {// User successfully signed in.// Return type determines whether we continue the redirect automatically// or whether we leave that to developer to handle.return true;},uiShown: function() {// The widget is rendered.// Hide the loader.document.getElementById('loader').style.display = 'none';}},// Will use popup for IDP Providers sign-in flow instead of the default, redirect.signInFlow: 'popup',signInSuccessUrl: 'main,html',signInOptions: [// Leave the lines as is for the providers you want to offer your users.firebase.auth.GoogleAuthProvider.PROVIDER_ID, //Google sign infirebase.auth.FacebookAuthProvider.PROVIDER_ID, //Facebook sign infirebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter sign infirebase.auth.GithubAuthProvider.PROVIDER_ID, //Github sign infirebase.auth.EmailAuthProvider.PROVIDER_ID, //Email sign infirebase.auth.PhoneAuthProvider.PROVIDER_ID //Phone sign in],// Terms of service url.tosUrl: '<your-tos-url>', //replace with your terms of service url// Privacy policy url.privacyPolicyUrl: '<your-privacy-policy-url>' //replace with your privacy policy url};ui.start('#firebaseui-auth-container', uiConfig);})()
Next, head over to your login.html page and copy this code in the <body> section:
<h1>Welcome to My Firebase Auth App</h1><div id="firebaseui-auth-container"></div><div id="loader">Loading...</div>
After that is done, go to the login.html page and copy the script below right under the firebase js script:
<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />This will initialize the firebase ui with its own custom css and js features.
In the main.html page, write your own welcome page in the <body> tag:
<h1>Welcome to the Main Page</h1>Head over to your firebase console and click on the sign in method tab. Enable all the sign in features you want buy clicking on the pencil icon. In the login.js file, choose the sign up option you want and remove or comment out the rest. Test your working web app on a local server preferably. You should be good to go.
