Node.js

Create the Mobile UI

Building the Main Activity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent { VerifyApp() }
    }
}

@Composable
fun VerifyApp() {
    MaterialTheme {
        Surface(modifier = Modifier.fillMaxSize()) {
            VerificationScreen()
        }
    }
}

ComponentActivity: The base class for activities that use Jetpack Compose.
setContent: Sets the UI content using Compose.
MaterialTheme and Surface: Wrap the UI in a material design surface for consistency.

Composable Function for Verification Screen

@Composable
fun VerificationScreen() {
    var phone by remember { mutableStateOf("") }
    var code by remember { mutableStateOf("") }
    var message by remember { mutableStateOf("") }
    var isLoading by remember { mutableStateOf(false) }
    var fallbackToSms by remember { mutableStateOf(false) }
    val coroutineScope = rememberCoroutineScope()

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        OutlinedTextField(
            value = phone,
            onValueChange = { phone = it },
            label = { Text("Phone Number") },
            keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Phone),
            modifier = Modifier.fillMaxWidth()
        )

remember: Allows us to save state across recompositions.
coroutineScope: Launches asynchronous operations without blocking the UI.
OutlinedTextField: Input field for entering the phone number.

Loading Indicator and Button

        if (isLoading) {
            CircularProgressIndicator()
        } else {
            Button(onClick = {
                coroutineScope.launch {
                    isLoading = true
                    message = "Starting verification..."
                    try {
                        val (requestId, authUrl) = startVerification(phone)
                        currentRequestId = requestId
                        message = "Verification started!"
                    } catch (e: Exception) {
                        message = "Error: ${e.message}"
                    } finally {
                        isLoading = false
                    }
                }
            }) {
                Text("Start Verification")
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        Text(text = message)
    }
}

CircularProgressIndicator: Shows a loading spinner while waiting for the response.
Button: Starts the verification process.
Text: Displays status messages to the user.