Prebuilt Android Components

We're excited to introduce prebuilt UI views that make it incredibly easy to add authentication flows to your Android applications.

These new Android views provide complete authentication experiences out of the box, eliminating the need to build custom sign-in and user management interfaces from scratch. With just a few lines of code, you can now add authentication and user management to your Android app that matches Material Design standards and includes advanced features like multi-factor authentication, social sign-in, and comprehensive user profile management.

AuthView - Complete Authentication Flow

The AuthView provides a comprehensive authentication experience supporting both sign-in and sign-up flows, multi-factor authentication, password reset, account recovery and more.

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.Alignment
import androidx.compose.ui.layout.fillMaxSize
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.clerk.api.Clerk
import com.clerk.ui.auth.AuthView
import com.clerk.ui.userbutton.UserButton

@Composable
fun HomeView() {
  val user by Clerk.userFlow.collectAsStateWithLifecycle()
  Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center,
  ) {
      if (user != null) {
        UserButton()
      } else {
        AuthView()
      }
   }
}

UserButton - Profile Access Made Simple

The UserButton displays the current user's profile image in a circular button and opens the full user profile when tapped.

import androidx.compose.material3.TopAppBar
import com.clerk.ui.userbutton.UserButton

TopAppBar(title = {}, actions = { UserButton() })

UserProfileView - Comprehensive Account Management

The UserProfileView provides a complete interface for users to manage their accounts, including personal information, security settings, account switching, and sign-out functionality.

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.Alignment
import androidx.compose.ui.layout.fillMaxSize
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.clerk.api.Clerk
import com.clerk.ui.userprofile.UserProfileView

@Composable
fun ProfileView() {
  val user by Clerk.userFlow.collectAsStateWithLifecycle()
  Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center,
  ) {
      if (user != null) {
        UserProfileView()
      }
   }
}

ClerkTheme - Customization

The new theming system allows you to customize the appearance of all Clerk views to match your app's design.

import android.app.Application
import androidx.compose.ui.graphics.Color
import com.clerk.ui.theme.ClerkTheme
import com.clerk.ui.theme.ClerkColors
import com.clerk.api.Clerk

class MyApplication : Application() {

  override fun onCreate() {
    super.onCreate()
      Clerk.initialize(
        this,
        key,
        options = ClerkConfigurationOptions(enableDebugMode = true),
        theme = ClerkTheme(colors = ClerkColors(primary = Color.Red)),
      )
  }
}

Light and Dark Mode Support

All Clerk Android views automatically support both light and dark mode appearance, adapting seamlessly to the user's system preferences.

Breaking changes

The Clerk Android SDK has been split into two packages:

• com.clerk:clerk-api - The core Clerk SDK for authentication and user management. (This was previously called com.clerk:clerk-android)
• com.clerk:clerk-ui - The Clerk UI components for authentication and user management.

The com.clerk:clerk-ui pulls the com.clerk:clerk-api package as a dependency, so you only need to add the com.clerk:clerk-ui package to your dependencies if you're using the Clerk UI components.

Getting Started

To get started follow the Quickstart Guide and see the views docs:

• AuthView
• UserButton
• UserProfileView
• ClerkTheme

Feedback

We're excited to see what you build with these new views! Share your feedback and join the conversation in our Discord community⁠.