Firebase Authentication – Using Google – Federated identity provider integration

Step 1: Create firebase account

Go to https://firebase.google.com and create a account

Step 2: Create new Project

Create new project by clicking ‘Add Project’ button from the dashboard. Fill all the details as mentioned in below image and proceed to create project.

Step 3: Enable Email and password based authentication

Go to Project Overview -> Develop tab -> Authentication -> Click on setup sign in method.

Check the Email/Password option from the sign-in providers tab

Enable Google Sign-in from dashboard

Step 4: Download firebase quick-start html file

Download all files from official github project: https://github.com/firebase/quickstart-js/tree/master/auth

Open google-popup.html and replace the config section from your project details which you can find Firebase Authentication -> web setup button as shown in image below.

Replace this line of code

<script src="/__/firebase/5.7.0/firebase-app.js"></script>
<script src="/__/firebase/5.7.0/firebase-auth.js"></script>
<script src="/__/firebase/init.js"></script>

To

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script>

<script>
  var config = {
    // Your configuration data from your project as shown in image
  };
  firebase.initializeApp(config);
</script>

Step 5: Open the google-popup.html in web browser

You will get following window, where you can sign-in & sign-up using google

That’s all! You can integrate google firebase authentication into any of your website.

Sign in with Google

You can sign in using your google credential seamlessly.

Options Step 1: This app isn’t verified warning

Since this google login API is private, your account should be whitelisted to access and authenticate using in production website, use this link verify the app. https://support.google.com/cloud/answer/7454865?hl=en&ref_topic=3473162

Optional Step 2: Add your localhost or production website URL in dashboard

Go to Dashboard -> Authentication -> Sign in method -> (Scroll down) Authorised domains

User Management from Firebase Dashboard

You can manage all users of your website from the firebase dashboard itself, you can delete user, disable user and reset password for user from dashboard.

Dashboard -> Authentication -> users

Thanks, For any clarification please write in comment box below!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.