Create a Basic Android Application

Create MainActivity.kt

Open MainActivity.kt and add the following content. This corresponds to a minimal Activity.

Then define the backend URL constant using BuildConfig:

Creating the UI with Jetpack Compose

In this section, we’ll build the user interface for our verification flow. There’s no networking yet because the goal is to create a clean UI that we can later connect to the backend endpoints.

The new MainActivity will look like this:

Let’s implement VerifyApp()

Our UI has a small number of “moments” (screens) that depend on the current verification step:

1. Enter phone number
2. Loading
3. Enter SMS code (fallback)
4. Verified
5. Error

Jetpack Compose makes this easy if we model the screen as a state machine.

Create a UI State Machine

We define a sealed class to represent all possible UI states:

Even though we’re not integrating with the backend yet, we already include a requestId in the SMS state because it will be needed later.

Create the Screen and Its Local UI State

Inside VerificationScreen() we store user inputs and current UI state with remember { mutableStateOf(...) }:

Build the Layout with a Simple Column

We create a centered layout using Column, Spacer, and Modifier:

Inside it we show:

• A title
• Phone input
• Optional SMS input
• Buttons based on the current UI state
• A status message at the bottom

Phone Input

Notes:

• We disable input while loading to prevent double-submits.
• We use KeyboardType.Phone to show a phone-friendly keyboard.

SMS Input

SMS input will be implemented with a conditional rendering. Compose makes conditional UI very straightforward.

We show the SMS input only if we are in EnterSms:

Later, when we integrate with the backend, this requestId will come from /verification.

Render the Correct Action Button Based on UI State

We use when (uiState):

• Loading → show a spinner
• EnterPhone / Error → show “Start verification”
• EnterSms → show “Submit code”
• Verified → show success + “Verify another number”

This is the core Compose pattern used in real apps: UI = function(state).