FirebaseUI Authentication for Web
Code

FirebaseUI Authentication for Web

Share with your friends

By :Bharti Dua, Web App Intern, ETI Labs

Bharti Dua
Bharti Dua

FirebaseUI Authentication for Web

FirebaseUI is one of the libraries that provide easy login methods that include login directly using Google account, Facebook account, normal Email sign-in, and much more. You can use these built-in functionalities in your app with the utmost ease. It enables you to customize it as per your requirements since it is fully open-sourced. 

In this blog, I’ll demonstrate how to use FirebaseUI auth to Sign-In and Sign-Up on the web. So let’s get started.

Steps are as follows:

  1. Go to Firebase console and add a project to follow the steps and create the project.
  2. On the left side menu, under the Develop section, select Authentication.
  3. Enable the Email-Password under the sign-in method tab.
  4. Now go to the Project Overview on the top left corner and copy the Firebase SDK snippet.
  5. Refer to the Firebase Docs or follow the Github link for much detailed information and customizing FirebaseUI. In this post, I have referred to the information in Github.
  6. Create a main.html file in the editor of your choice and copy the following code. In this code, I have used Email Link as the sign-in provider.
  7. In signInSuccessUrl, mention the URL you want to navigate to, after successful sign-in.Note: To execute, run it on a local server or use ‘firebase serve’ instead to test your app locally.Voila!

    Now the user is authenticated, you can handle the upcoming flows as per your requirements.

    Happy Coding 🙂

    References: 

    https://github.com/firebase/firebaseui-web/blob/master/README.md

    https://firebase.google.com/docs/auth/web/firebaseui

Share with your friends