This library allow you to easily integrate One-Tap Sign in with Google(Credential Manager) to your project with Jetpack Compose. It hides all the boilerplate code away from you. You get an extracted Google User object that you can use to obtain a basic user information. And there's a new OneTapGoogleButton composable that you can use out of the box, with various customization options.
Add the dependency below to your module's build.gradle file:
dependencies {
implementation("com.github.stevdza-san:OneTapCompose:1.0.12")
}Add a repository in your settings.gradle file:
dependencyResolutionManagement {
repositories {
...
maven(url = "https://jitpack.io")
}
}
Before you can use this library, you need to create a new project on a Google Cloud Platform.
You need to create OAuth Client ID (ANDROID & WEB), because you will need that same Client ID (WEB), in order to implement One-Tap Sign in with Google.
After that, just call OneTapSignInWithGoogle() function, and pass that same information you've obtained through Google Cloud Platform.
You will also pass OneTapSignInState, because that state is used later to trigger One-Tap dialog.
val state = rememberOneTapSignInState()
OneTapSignInWithGoogle(
state = state,
clientId = "YOUR_CLIENT_ID",
onTokenIdReceived = { tokenId ->
Log.d("LOG", tokenId)
},
onDialogDismissed = { message ->
Log.d("LOG", message)
}
)To trigger One-Tap dialog, just call open() function.
Button(onClick = { state.open() }) {
Text(text = "Sign in")
}And if you wish to extract a user information from a token id, that's now possible too! getUserFromTokenId() allows you to do exactly that. It returns a GoogleUser object, that contains lot's of different information related to that same user.
onTokenIdReceived = { tokenId ->
Log.d("LOG", getUserFromTokenId(tokenId).toString())
}Available GoogleUser information:
- Sub
- EmailVerified
- FullName
- GivenName
- FamilyName
- Picture
- IssuedAt
- ExpirationTime
- Locale
You can also use a drop-in opinionated button composable that works out of the box and encapsulates all the sign in logic and follows Google's Sign in with Google Branding Guidelines:
OneTapGoogleButton(
clientId = "YOUR_CLIENT_ID"
)According to the design guidelines, the button is available in 3 themes:
- Dark
- Light
- Neutral
You can customise the theme using the theme parameter in the composable:
OneTapGoogleButton(
clientId = "YOUR_CLIENT_ID",
theme = GoogleButtonTheme.Neutral
)The buttons are also available in icon-only mode for all the themes:
It can be activated using the iconOnly parameter in the composable:
OneTapGoogleButton(
clientId = "YOUR_CLIENT_ID",
iconOnly = true
)| Name | Type | Description |
|---|---|---|
| clientId | String | CLIENT ID (Web) of your project, that you can obtain from a Google Cloud Platform. |
| state | OneTapSignInState | One-Tap Sign in State. Can be used to detect whether the sign in operation has already been triggered. |
| rememberAccount | Boolean | Remember a selected account to sign in with, for an easier and quicker sign in process. |
| nonce | String? | Optional nonce that can be used when generating a Google Token ID |
| onTokenIdReceived | ((String) -> Unit)? | Lambda that will be triggered after a successful authentication. Returns a Token ID. |
| onUserReceived | ((String) -> Unit)? | This function returns a GoogleUser object using the received tokenId. |
| onDialogDismissed | ((String) -> Unit)? | Lambda that will be triggered when One-Tap dialog disappears. Returns a message in a form of a string. |
| iconOnly | Boolean | Whether the button should only show the Google logo. |
| theme | GoogleButtonTheme | Sets the button style to either be Light, Dark, or Neutral which is in accordance with the official Google design guidelines. |
| colors | ButtonColors | ButtonColors that will be used to resolve the colors for this button in different states. |
| border | BorderStroke? | the border to draw around the container of this button |
| shape | Shape | defines the shape of this button's container, border (when border is not null) |
| onClick | (() -> Unit)? | called when this button is clicked |
If you are planning on publishing your app, be sure to generate a release SHA-1 fingerprint, and create a new oAuth credentials on your Google Cloud Platform project.
Also when you upload your app on Play Console, you'll find there a section (Release > Setup > App signing) that will generate the release SHA-1 fingerprint. You take it and create another oAuth credential.
In some cases you may encounter "Google Account not Found." message inside onDialogDismiss lambda, even if you have already connected a Google account
on your Android Emulator. Android emulators are prone to that issues (Not sure why and when that's gonna get fixed).
My suggestion in that case is to try and add a Google account on some other Android Emulator.
If that doesn't work either, then use a real device instead.
It's important to implement your own rate limiting of One Tap sign-in prompts. If you don't, and a user cancels several prompts in a row, the One Tap client will not prompt the user for the next 24 hours.
Also to debug your app better, check the logs and search for a OneTapCompose tag, it might contain additional information to help you out with your issue.
⭐ Give a star to this repository.
☕ Buy me a coffee: https://ko-fi.com/stevdza_san
Designed and developed by 2022 stevdza-san (Stefan Jovanović)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent