Step-Up Authentication

package com.example.sessiontest

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardOptions
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import androidx.lifecycle.viewmodel.compose.viewModel
import kotlinx.coroutines.launch
import so.prelude.android.auth.*
import java.net.URL

private const val APP_ID = "YOUR_APP_ID"

enum class StepUpView { Login, Code, Logged, StepUpOtp, Done }

class StepUpViewModel(ctx: android.content.Context) : ViewModel() {
    val client = PreludeAuthClient(
        context = ctx,
        baseUrl = URL("https://$APP_ID.session.prelude.dev"),
    )

    var view by mutableStateOf(StepUpView.Login); private set
    var error by mutableStateOf<String?>(null); private set
    var profile by mutableStateOf<PreludeProfile?>(null); private set
    private var challenge: PreludeStepUpChallenge? = null

    fun sendLoginOtp(phone: String) {
        error = null
        viewModelScope.launch {
            try {
                client.startOTPLogin(
                    StartOTPLoginOptions(
                        identifier = PreludeIdentifier(
                            type = PreludeIdentifierType.PHONE_NUMBER,
                            value = phone,
                        ),
                    ),
                )
                view = StepUpView.Code
            } catch (e: PreludeAuthError) { error = e.message }
        }
    }

    fun checkLoginOtp(code: String) {
        error = null
        viewModelScope.launch {
            try {
                val user = client.checkOTP(code)
                profile = user.profile
                view = StepUpView.Logged
            } catch (e: PreludeAuthError.InvalidOTPCode) { error = "Wrong code." }
            catch (e: PreludeAuthError) { error = e.message }
        }
    }

    fun requestStepUp() {
        error = null
        viewModelScope.launch {
            try {
                val c = client.requestStepUp("transfer:write")
                if (c.status == PreludeStepUpStatus.BLOCKED) {
                    error = "Your hook denied this scope."
                    return@launch
                }
                if (c.currentStep in setOf("verify_email", "verify_sms")) {
                    client.sendStepUpOTP(c)
                }
                challenge = c
                view = StepUpView.StepUpOtp
            } catch (e: PreludeAuthError) { error = e.message }
        }
    }

    fun submitStepUpOtp(code: String) {
        val c = challenge ?: return
        error = null
        viewModelScope.launch {
            try {
                val next = client.submitStepUpOTP(c, code)
                if (next != null) {
                    if (next.currentStep in setOf("verify_email", "verify_sms")) {
                        client.sendStepUpOTP(next)
                    }
                    challenge = next
                } else {
                    profile = client.refresh().profile
                    view = StepUpView.Done
                }
            } catch (e: PreludeAuthError.InvalidOTPCode) { error = "Wrong code." }
            catch (e: PreludeAuthError) { error = e.message }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface {
                    val vm: StepUpViewModel = viewModel(factory = viewModelFactory(applicationContext))
                    var phone by remember { mutableStateOf("") }
                    var loginCode by remember { mutableStateOf("") }
                    var stepUpCode by remember { mutableStateOf("") }

                    Column(Modifier.fillMaxSize().padding(24.dp)) {
                        Text("Step-Up Demo", style = MaterialTheme.typography.titleMedium)
                        Spacer(Modifier.height(12.dp))
                        vm.error?.let {
                            Text(it, color = MaterialTheme.colorScheme.error)
                            Spacer(Modifier.height(8.dp))
                        }
                        when (vm.view) {
                            StepUpView.Login -> {
                                OutlinedTextField(
                                    phone, { phone = it },
                                    label = { Text("+14155551234") },
                                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone),
                                    modifier = Modifier.fillMaxWidth(),
                                )
                                Spacer(Modifier.height(8.dp))
                                Button(onClick = { vm.sendLoginOtp(phone) }) { Text("Send OTP") }
                            }
                            StepUpView.Code -> {
                                OutlinedTextField(
                                    loginCode, { loginCode = it },
                                    label = { Text("Login code") },
                                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                                    modifier = Modifier.fillMaxWidth(),
                                )
                                Spacer(Modifier.height(8.dp))
                                Button(onClick = { vm.checkLoginOtp(loginCode) }) { Text("Verify") }
                            }
                            StepUpView.Logged -> {
                                Text("Logged in.", style = MaterialTheme.typography.titleSmall)
                                Spacer(Modifier.height(8.dp))
                                Button(onClick = { vm.requestStepUp() }) {
                                    Text("Request transfer:write")
                                }
                            }
                            StepUpView.StepUpOtp -> {
                                Text("Enter the step-up code.")
                                OutlinedTextField(
                                    stepUpCode, { stepUpCode = it },
                                    label = { Text("Code") },
                                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                                    modifier = Modifier.fillMaxWidth(),
                                )
                                Spacer(Modifier.height(8.dp))
                                Button(onClick = { vm.submitStepUpOtp(stepUpCode) }) { Text("Verify") }
                            }
                            StepUpView.Done -> {
                                Text("Scope granted.", style = MaterialTheme.typography.titleSmall)
                                Text("session: ${vm.profile?.sessionId ?: "-"}")
                            }
                        }
                    }
                }
            }
        }
    }
}

import 'package:flutter/material.dart';
import 'package:prelude_flutter_auth_sdk/prelude_flutter_auth_sdk.dart';

const appID = 'YOUR_APP_ID';

void main() => runApp(const MyApp());

enum _Screen { login, code, logged, stepUpOtp, done }

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late final client = PreludeAuthClient(
    endpoint: Endpoint.custom('https://$appID.session.prelude.dev'),
  );

  final _phone = TextEditingController();
  final _loginCode = TextEditingController();
  final _stepUpCode = TextEditingController();

  _Screen _view = _Screen.login;
  StepUpChallenge? _challenge;
  PreludeProfile? _profile;
  String? _error;

  Future<void> _sendLoginOtp() async {
    setState(() => _error = null);
    try {
      await client.startOTPLogin(
        StartOTPLoginOptions(
          identifier: PreludeIdentifier.phoneNumber(_phone.text),
        ),
      );
      setState(() => _view = _Screen.code);
    } on PreludeAuthException catch (e) {
      setState(() => _error = e.message);
    }
  }

  Future<void> _checkLoginOtp() async {
    setState(() => _error = null);
    try {
      final user = await client.checkOTP(_loginCode.text);
      setState(() {
        _profile = user.profile;
        _view = _Screen.logged;
      });
    } on InvalidOTPCodeException {
      setState(() => _error = 'Wrong code.');
    } on PreludeAuthException catch (e) {
      setState(() => _error = e.message);
    }
  }

  Future<void> _requestStepUp() async {
    setState(() => _error = null);
    try {
      final c = await client.requestStepUp(scope: 'transfer:write');
      if (c.status == StepUpStatus.blocked) {
        setState(() => _error = 'Your hook denied this scope.');
        return;
      }
      if (c.currentStep == 'verify_email' ||
          c.currentStep == 'verify_sms') {
        await client.sendStepUpOTP(c);
      }
      setState(() {
        _challenge = c;
        _view = _Screen.stepUpOtp;
      });
    } on PreludeAuthException catch (e) {
      setState(() => _error = e.message);
    }
  }

  Future<void> _submitStepUpOtp() async {
    final c = _challenge;
    if (c == null) return;
    setState(() => _error = null);
    try {
      final next = await client.submitStepUpOTP(c, _stepUpCode.text);
      if (next != null) {
        if (next.currentStep == 'verify_email' ||
            next.currentStep == 'verify_sms') {
          await client.sendStepUpOTP(next);
        }
        setState(() => _challenge = next);
      } else {
        final user = await client.refresh();
        setState(() {
          _profile = user.profile;
          _view = _Screen.done;
        });
      }
    } on InvalidOTPCodeException {
      setState(() => _error = 'Wrong code.');
    } on PreludeAuthException catch (e) {
      setState(() => _error = e.message);
    }
  }

  @override
  void dispose() {
    _phone.dispose();
    _loginCode.dispose();
    _stepUpCode.dispose();
    client.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Widget body;
    switch (_view) {
      case _Screen.login:
        body = Column(mainAxisSize: MainAxisSize.min, children: [
          TextField(
            controller: _phone,
            keyboardType: TextInputType.phone,
            decoration: const InputDecoration(labelText: '+14155551234'),
          ),
          const SizedBox(height: 12),
          FilledButton(onPressed: _sendLoginOtp, child: const Text('Send OTP')),
        ]);
      case _Screen.code:
        body = Column(mainAxisSize: MainAxisSize.min, children: [
          TextField(
            controller: _loginCode,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(labelText: 'Login code'),
          ),
          const SizedBox(height: 12),
          FilledButton(onPressed: _checkLoginOtp, child: const Text('Verify')),
        ]);
      case _Screen.logged:
        body = Column(mainAxisSize: MainAxisSize.min, children: [
          const Text('Logged in.'),
          const SizedBox(height: 12),
          FilledButton(
            onPressed: _requestStepUp,
            child: const Text('Request transfer:write'),
          ),
        ]);
      case _Screen.stepUpOtp:
        body = Column(mainAxisSize: MainAxisSize.min, children: [
          const Text('Enter the step-up code.'),
          TextField(
            controller: _stepUpCode,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(labelText: 'Code'),
          ),
          const SizedBox(height: 12),
          FilledButton(onPressed: _submitStepUpOtp, child: const Text('Verify')),
        ]);
      case _Screen.done:
        body = Column(mainAxisSize: MainAxisSize.min, children: [
          const Text('Scope granted.', style: TextStyle(fontSize: 18)),
          const SizedBox(height: 8),
          Text('session: ${_profile?.sessionID ?? "-"}',
              style: const TextStyle(fontFamily: 'monospace')),
        ]);
    }

    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(24),
          child: Center(
            child: Column(mainAxisSize: MainAxisSize.min, children: [
              const Text('Step-Up Demo', style: TextStyle(fontSize: 18)),
              const SizedBox(height: 12),
              if (_error != null) ...[
                Text(_error!, style: const TextStyle(color: Colors.red)),
                const SizedBox(height: 8),
              ],
              body,
            ]),
          ),
        ),
      ),
    );
  }
}

import {
  Endpoint,
  InvalidOTPCodeError,
  PreludeIdentifier,
  PreludeProfile,
  PreludeAuthClient,
  PreludeAuthError,
  StepUpChallenge,
} from "@prelude.so/react-native-auth-sdk";
import { useEffect, useRef, useState } from "react";
import { Button, Text, TextInput, View } from "react-native";

const APP_ID = "YOUR_APP_ID";

type Stage = "login" | "code" | "logged" | "stepUpOtp" | "done";

export default function Home() {
  const clientRef = useRef<PreludeAuthClient | null>(null);
  const [stage, setStage] = useState<Stage>("login");
  const [phone, setPhone] = useState("");
  const [loginCode, setLoginCode] = useState("");
  const [stepUpCode, setStepUpCode] = useState("");
  const [profile, setProfile] = useState<PreludeProfile | null>(null);
  const challengeRef = useRef<StepUpChallenge | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const c = new PreludeAuthClient({
      endpoint: Endpoint.custom(`https://${APP_ID}.session.prelude.dev`),
    });
    clientRef.current = c;
    return () => { c.dispose().catch(() => {}); };
  }, []);

  async function run(fn: () => Promise<void>) {
    setError(null);
    try { await fn(); }
    catch (e) {
      if (e instanceof InvalidOTPCodeError) setError("Wrong code.");
      else if (e instanceof PreludeAuthError) setError(e.message);
      else setError(String(e));
    }
  }

  const sendLoginOtp = () => run(async () => {
    await clientRef.current!.startOTPLogin({
      identifier: PreludeIdentifier.phoneNumber(phone),
    });
    setStage("code");
  });

  const checkLoginOtp = () => run(async () => {
    const user = await clientRef.current!.checkOTP(loginCode);
    setProfile(user.profile);
    setStage("logged");
  });

  const requestStepUp = () => run(async () => {
    const c = await clientRef.current!.requestStepUp("transfer:write");
    if (c.status === "block") {
      setError("Your hook denied this scope.");
      return;
    }
    challengeRef.current = c;
    setStage("stepUpOtp");
  });

  const submitStepUp = () => run(async () => {
    const c = challengeRef.current;
    if (!c) return;
    const next = await clientRef.current!.submitStepUpOTP(c, stepUpCode);
    if (next !== null) {
      challengeRef.current = next;
    } else {
      const user = await clientRef.current!.refresh();
      setProfile(user.profile);
      setStage("done");
    }
  });

  return (
    <View style={{ padding: 24, gap: 8 }}>
      <Text style={{ fontSize: 18 }}>Step-Up Demo</Text>
      {error && <Text style={{ color: "red" }}>{error}</Text>}
      {stage === "login" && (
        <>
          <TextInput
            placeholder="+14155551234"
            value={phone}
            onChangeText={setPhone}
            keyboardType="phone-pad"
            style={{ borderWidth: 1, padding: 8 }}
          />
          <Button title="Send OTP" onPress={sendLoginOtp} />
        </>
      )}
      {stage === "code" && (
        <>
          <TextInput
            placeholder="Login code"
            value={loginCode}
            onChangeText={setLoginCode}
            keyboardType="number-pad"
            style={{ borderWidth: 1, padding: 8 }}
          />
          <Button title="Verify" onPress={checkLoginOtp} />
        </>
      )}
      {stage === "logged" && (
        <>
          <Text style={{ fontWeight: "600" }}>Logged in.</Text>
          <Button title="Request transfer:write" onPress={requestStepUp} />
        </>
      )}
      {stage === "stepUpOtp" && (
        <>
          <Text>Enter the step-up code.</Text>
          <TextInput
            placeholder="Code"
            value={stepUpCode}
            onChangeText={setStepUpCode}
            keyboardType="number-pad"
            style={{ borderWidth: 1, padding: 8 }}
          />
          <Button title="Verify" onPress={submitStepUp} />
        </>
      )}
      {stage === "done" && (
        <>
          <Text style={{ fontWeight: "600" }}>Scope granted.</Text>
          <Text>session: {profile?.sessionID ?? "-"}</Text>
        </>
      )}
    </View>
  );
}