Is it easier than you think?
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.
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.
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.
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:
Now, we shall provide a vacant division for the Firebase UI to be displayed and initiate its display using start() function with the config.
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.
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! 🙂