Stytch Android UI

Stytch is an authentication platform, written by developers for developers, with a focus on improving security and user experience via passwordless authentication. Stytch offers direct API integrations, language-specific libraries, and SDKs (like this one) to make the process of setting up an authentication flow for your app as easy as possible.

The module contains our pre-built UI components, and incorporates our headless SDK under-the-hood, so you can use both together, or the UI on it's own, depending on your project's needs.

Currently, only Stytch Consumer projects are supported.

Requirements

This SDK supports Android API level 23 and above (distribution stats)

Installation and setup

To start using the Stytch Android UI SDK, import the following dependency:

implementation("com.stytch.sdk:ui:latest")

Add the necessary manifest placeholders for our OAuth manager/receiver activities (if you are not using our Third-Party OAuth providers, you must still include this, but can leave the values blank). These values can be any valid scheme or host, and do not relate to your OAuth settings in the Stytch Dashboard. These are only used internally within your app to register a receiver activity. More information is available in the ../sdk/src/main/java/com/stytch/sdk/consumer/oauth.

android {
    defaultConfig {
        manifestPlaceholders = [
            'stytchOAuthRedirectScheme': '[YOUR_AUTH_SCHEME]', // eg: 'app'
            'stytchOAuthRedirectHost': '[YOUR_AUTH_HOST]', // eg: 'myhost'
            'STYTCH_UI_PUBLIC_TOKEN': '[YOUR_PUBLIC_TOKEN]' // we use this to setup deeplink handlers
        ]
    }
}

Getting app secrets ready

1. Go to https://stytch.com/dashboard, and sign up/log in with your email address.

2. Once you are on the dashboard, click on the "API Keys" tab on the left. Scroll down to the "Public tokens" section and copy your public token.

3. In your android app, before you call any other part of the Stytch SDK, you must first call the configure function and pass in your applicationContext and public token:

import com.stytch.sdk.consumer.StytchClient

StytchClient.configure(
    context = application.applicationContext,
    publicToken = BuildConfig.STYTCH_PUBLIC_TOKEN
)

Setting up deelinks

In the Stytch Dashboard, ensure you add the following URL as a redirect URL for Signups, Logins, and Password Resets:

"stytchui-[YOUR_PUBLIC_TOKEN]://deeplink"

This enables the Stytch UI to intercept all incoming magic links and handle them appropriately

Setting up the UI

The Stytch UI uses the Builder pattern to initialize the UI, and allows you to fully customize the look, feel, and supported products.

Within your host activity, define the UI and any configuration options you would like. An example is below:

import com.stytch.sdk.ui.StytchUI
private val stytchUi = StytchUI.Builder().apply {
    activity(this@MyActivity)
    productConfig(
        StytchProductConfig(
            products = listOf(
                StytchProduct.OAUTH,
                StytchProduct.EMAIL_MAGIC_LINKS,
                StytchProduct.OTP,
                StytchProduct.PASSWORDS,
            ),
            googleOauthOptions = GoogleOAuthOptions(
                clientId = BuildConfig.GOOGLE_OAUTH_CLIENT_ID
            ),
            oAuthOptions = OAuthOptions(
                loginRedirectURL = "uiworkbench://oauth", // This should match what you defined in your manifestPlaceholders in the section above
                signupRedirectURL = "uiworkbench://oauth", // This should match what you defined in your manifestPlaceholders in the section above
                providers = listOf(OAuthProvider.GOOGLE, OAuthProvider.APPLE, OAuthProvider.GITHUB)
            ),
            otpOptions = OTPOptions(
                methods = listOf(OTPMethods.SMS, OTPMethods.WHATSAPP),
            )
        )
    )
    onAuthenticated {
        when (it) {
            is StytchResult.Success -> {
                Toast.makeText(this@UiWorkbenchActivity, "Authentication Succeeded", Toast.LENGTH_LONG).show()
            }
            is StytchResult.Error -> {
                Toast.makeText(this@UiWorkbenchActivity, it.exception.message, Toast.LENGTH_LONG).show()
            }
        }
    }
}.build()

Then, simply call the authenticate method from your UI to launch the Stytch UI:

Button(modifier = Modifier.fillMaxSize(), onClick = stytchUi::authenticate) {
   Text("Launch Authentication")
}

The result of the authentication flow, either successful or not, will be reported to the onAuthenticated handler that you specified when building the StytchUI instance.

Example

An example of all of the above can be found within the ../uiworkbench module in this repository