How to implement OneTap Signup using Firebase UI?

Is it easier than you think?
OneTap Sample
OneTap Image from 9to5google.com

Just after integrating a web app with OneTap feature, I felt that there is a need for this documentation for the other developers who may be researching the same. More than the time taken to implement this, the time it has taken to find the right documentation for Web was longer. Though I found the right documentation [2], it was kind of too much for my requirement. So I just thought of quickly framing the minimal steps to attain this in any of your component-based Web apps.

Image from The official Android Developers publication on Medium

If you are wondering what OneTap signup is, it is just a simple signup mechanism with just one tap, without interrupting the users with a sign-up screen. Users get a secure, token-based, passwordless account on your site, protected by their Google Account. For the returning users, it helps sign in users automatically when they return to your site on any device or browser, even after their session expires [1].

Before we start with OneTap signup, we need to have the Firebase installed and ready to use. If you have not installed Firebase, please install along with us.

Image from talkmobiledev.com

Add FirebaseUI

In the project root directory, execute the install command for firebaseui package. You can also include FirebaseUI via one of the options provided by Firebase. In my case, I installed using the npm Module in my Stencil PWA application.

Run this in the CLI of the project root directory

Once you have your Firebase and FirebaseUI installed, we can import or require the packages in the component source file, where we would like to show the OneTap popup. The best practice is to have the Firebase imported in a service source file. In my case, I am importing only firebaseui in the file app-home.tsx, and the firebase is imported in the service.

For simplicity, I am pasting the screenshot of all imports in one below:

Include this in the source files, where you would like to access firebase and firebaseui.

Now, we shall provide a vacant division for the Firebase UI to be displayed and initiate its display using start() function with the config.

Screenshot of the div section in the component source file.
The id value comes as firebase-auth-container by default

Next, we are just going to invoke the firebase UI using the GoogleAuthProvider and GOOGLE_YOLO credentialHelper. Here is the function to display the OneTap Signup UI. the auto sign-in for returning users is enabled by default. You can disable by using ui.disableAuthSignIn() function.

Please ensure that the clientID (OAuth 2.0 Client ID) is obtained from the Google API console of your project and replace it in the above snippet. Do not forget to add the Authorized JavaScript origins based on your need.

Authorized JavaScript origins image

Now, you should see OneTap in Action.

How do you think the working of OneTap signup is? Was it as much easy as you were expecting it to be? Should you face any issues in following the steps, comment below to troubleshoot it quickly.

PS: I’m not a tech geek, but I do love coding and have developed a couple of apps, and been a part of a few live projects. Read more about me here.

References:
1. One-tap sign-up and auto sign-in on websites
2. Firebase UI

Thank you! 🙂

Leave a Reply

Your email address will not be published.

Scroll to top