Integrate Google sign in with Jetpack Compose

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. In this tutorial, we’re going to integrate Google sign in with our app.

This tutorial assumes that you’ve already setup google credentials (https://console.cloud.google.com/apis/credentials) in Google Cloud Platform. We’ll mainly focus on android part of google sign in integration. (Note: You can easily generate SHA1 for your app with gradlew signingReport command in your IDE, which is required in Google console.)

We’ll start by creating a utility method that will provide GoogleSignInClient

Next, we’ll create Contract for ActivtyResultAPI which will get sign in result from Google prompt.

Now, let’s create a composable for sign in button

which will create sign in button as below

Now, we’ll create AuthView that contains sign in button and error text to display error occurred during sign in process (if any).

Finally, we’ll create AuthScreen that will launch google sign in prompt upon clicking on sign in button, and navigate to HomeScreen if sign in is successful, or show error if it occurs.

That’s it. App is ready to handle Google sign in with compose UI. You can launch and test the Google sign in flow.

Adding some animations

As you’ll notice, when you click on sign in button, circular loading bar appears directly without animation, which looks boring. We can add smooth animations to make it eye catching.

You can find complete code on GitHub. Press the clap button and follow me if you find this article helpful.

Software architect/developer. Kotlin is ❤