Guide: Native Google Auth on Android using Compose Auth

native_google_auth.md

Native Google Auth on Android using Compose Auth

Supabase supports different OAuth providers including Google. On Android there are multiple libraries to use Native Google Auth and figuring out how to use them with Supabase can be complicated! Luckily, there is a supabase-kt plugin which handles everything for you. In this guide you will learn how integrate Compose Auth into your Jetpack Compose Android App.

Add Compose Auth to your app

Gradle KTS

dependencies {
    val supabaseVersion = "VERSION"
    implementation("io.github.jan-tennert.supabase:compose-auth:$supabaseVersion")
    implementation("io.github.jan-tennert.supabase:gotrue-kt:$supabaseVersion")
}

Gradle

dependencies {
    def supabase_version = 'VERSION'
    implementation 'io.github.jan-tennert.supabase:compose-auth:${supabase_version}'
    implementation 'io.github.jan-tennert.supabase:gotrue-kt:${supabase_version}'
}

You can find the newest version of Compose Auth under supabase-kt releases

Compose Auth can also be used on other Compose Multiplatform supported platforms such as JVM, iOS and JS, however they rely on OAuth from GoTrue. This means you can use this library in a common module without using expect/actual declarations.

Creating OAuth credentials for Google

1. Create a new project in the Google Cloud Console.

2. Setup the OAuth consent screen for your project.

3. Go to credentials and create a new OAuth Client ID for a Web Application and put in your Supabase callback url, which looks like this: https://SUPABASE_ID.supabase.co/auth/v1/callback

4. Copy the OAuth Client ID and the Client Secret in the Supabase Google Provider settings

   

5. Create another OAuth Client ID for an Android App with your the package name you specified in your build file/Android manifest and your SHA-1 certificate

   You can get the debug SHA-1 certificate by executing gradlew signingReport in your app project directory. Copy the string after SHA1:.

   Alternatively, you can use the keytool to get the SHA-1 certificate for a keystore:

   keytool -keystore path-to-debug-or-production-keystore -list -v

6. Copy the OAuth Client ID you just created for an Android App and put it in the Authorized Client IDs in your Supabase Dashboard

   

Create a new Supabase Client with GoTrue and Compose Auth

After you did all previous steps, you can now easily access all your secrets in your app:

val supabaseClient = createSupabaseClient(
    supabaseUrl = "SUPABASE_URL",
    supabaseKey = "SUPABASE_KEY"
) {
    install(GoTrue)
    install(ComposeAuth) {
        nativeGoogleLogin("WEB_GOOGLE_CLIENT_ID") //Use the Web Client ID, not the Android one!
    }
}

Use Compose Auth in your composable

Create Auth State

in Compose Auth, you create a Auth State which can be later called by Buttons to start the actual Auth flow:

val authState = supabaseClient.composeAuth.rememberLoginWithGoogle()

You can also add a callback for results such as errors:

val authState = supabaseClient.composeAuth.rememberLoginWithGoogle(
    onResult = {
        when(it) {
            NativeSignInResult.ClosedByUser -> errorMessage = "Closed by user"
            is NativeSignInResult.Error -> errorMessage = it.message
            is NativeSignInResult.NetworkError -> errorMessage = it.message
            NativeSignInResult.Success -> println("Success!")
        }
    }
)

(Optional) When you are programming a Compose Multiplatform app, you can also call this function in the common code and other platforms use GoTrue#loginWith(Google) as fallback. If you wish to change that logic, you can do so by supplying a custom fallback:

val authState = supabaseClient.composeAuth.rememberLoginWithGoogle(
    onResult = {
        when(it) {
            NativeSignInResult.ClosedByUser -> errorMessage = "Closed by user"
            is NativeSignInResult.Error -> errorMessage = it.message
            is NativeSignInResult.NetworkError -> errorMessage = it.message
            NativeSignInResult.Success -> println("Success!")
        }
    },
    fallback = {
        //some custom OAuth flow
    }
)

Start the login flow

After a user e.g. pressed a Button, you can start the login flow by calling:

authState.startFlow()

That's it! You may also checkout Compose Auth UI which provides multiple composables such as easy to use Provider Buttons, Password Fields, etc.

Hi @jan-tennert ! Should this implementation be enough for iOS too and show the native Google Sign In dialog?

Following this example it works on both platforms but differently, it shows the native Google sign in dialog, but on iOS, it opens the browser application (not a web view inside the app, but a separate browser app) and shows there the "Choose your account" web version.

I don't know what this gist was, but this is heavily outdated. Please use the Supabase docs or the Compose Auth README

Thank you very much @jan-tennert ! The first documentation link clearly states "Currently, Compose Auth only supports Native Auth for Android with Google (via the Credential Manager) and iOS with Apple, other variations such as JS and JVM rely on fallback which by default is GoTrue-kt OAuth flow." which was the answer I was looking for 😃 for anyone else that may find this useful