Firebase Auth + One Tap UI on Android
Learn how to implement One Tap sign-in and sign-up on your existing Firebase Android app
Google has recently introduced One Tap sign-in and sign-up on Android. This service allows your app’s new users to create an account, securely with just a single tap on a beautiful dialog.
Users who already have an account can also have the same experience, so they don’t need to remember the username or password they had previously used when they created an account in that app.
You can read more about One Tap in this other post.
Here’s what that beautiful dialog looks like:
In this post, I’ll show you how to connect the One Tap UI with Firebase Authentication.
Firebase Auth with Google Sign-In
I’ll assume that you’ve already implemented Google Sign-in using Firebase Auth on your Android app, so I’ll not go over the steps on how to do that. But if you haven’t, you can still do so by following this guide on the documentation. Also, I’ll be using some of the methods created on this same documentation, so in case you see a method/property that you don’t recognize, please be sure to look for it on that page or on the sample app I’ve created.
Google’s One Tap UI comes bundled in com.google.android.gms:play-services-auth , which you might already be using, since this library is needed when you’re implementing Google Sign-In. Just check the dependencies on your build.gradle(app) file to make sure you’re using version 18.0.0 or higher.
Now the next thing we need to do is declare some variables and initialize them on the Activity’s onCreate() or (in my case) the fragment’s onViewCreated():
Notice that on our BeginSignInRequest we’re setting filterByAuthorizedAccounts to true. This means the OneTap UI will only display accounts that have previously logged in to this app. If you’re displaying the Google Sign -In option on a Sign up screen, you should set filterByAuthorizedAccounts to false instead, so that the UI displays all user accounts available on that Android device.
Those variables that we just declared will be used to initiate the One Tap sign-in flow on our updateUI() method (the one called from onStart()):
If the OnFailureListener gets executed, it means the user has never logged in to this app before or another error occurred. One other error that might happen is the 24-hour cooldown period, which the OneTap UI uses as a way to limit the prompts that it shows. If you face this error during development, the documentation recommends:
“… reset the cooldown by clearing Google Play services’ app storage.”
But otherwise, if the SuccessListener gets executed instead, startIntentSenderForResult() will display the One Tap UI for users to select the account they wish to use in order to continue. So we need to update our onActivityResult code in order to receive and handle the result coming from One Tap:
Note that if the user closes the One Tap UI, getSignInCredentialFromIntent() returns an ApiException with the status code CommonStatusCodes.CANCELED. In that case, we set our variable back to false and we don’t prompt the user again. Although using this variable may work fine, you can also use SharedPreferences instead, if you prefer.
And that’s it! You can now run your app and test the One Tap UI. This is what the One Tap UI with Google Sign-In should look like:
Firebase Auth with Email/Password
If your app also provides Email/Password authentication, One Tap UI can also help your users signing in to your app using that method. You’ll need to update the BeginSignInRequest we created earlier and handle the result in the onActivityResult() function:
This password request feature is backed by the Autofill framework which was introduced in Android 8.0 (API level 26), so you’ll need to optimize your app for Autofill. This means you should add android:autofillHints to your EditText’s XML as shown below:
And this should do it. Now in order to test this feature, you’ll need to enable Autofill on your testing device, if you’re not already using it. To do that, make sure your device is running Android 8.0 (or above) and navigate to Settings > System > Language and Input > Autofill and select an Autofill framework.
Once you login for the first time on the app, Autofill will prompt if you want to save your credentials. If you accept, the next time you login to the app, One Tap UI should display your saved credentials:
Additionally, if you also have a website or a web app on the same Firebase project, you can also enable automatic sign-in between apps and websites, which will allow your users to sign-in to your web app with the password they saved on the mobile app and vice-versa.
And that’s all for today. I hope this helps you implement One Tap sign-in and sign-up in your Firebase Apps. You can find the sample app on Github:
