Social Login - Prelude Docs

This guide covers how to implement social login (OAuth) in your mobile application. Make sure you have configured a social login provider on your backend before proceeding. Pick your platform once: tabs across this section stay in sync. On the web the flow is three separate steps — redirect, callback, and finalize. On mobile the SDK runs all three for you in a single call:

Present — loginWithOAuth opens the provider’s login page in a system web session (ASWebAuthenticationSession on iOS, a Chrome Custom Tab on Android)
Callback — the provider redirects back to your app’s custom URL scheme with a challenge_token, which the SDK captures
Finalize — the SDK exchanges the challenge_token for a session and persists the tokens in the platform’s secure store

The call returns a FinalizeOAuthLoginResult: either the user is logged in, or an OTP step is required. The second case only happens when the provider has verify_email enabled and the IdP returns an email it has not verified — see Verify email via OTP below.

How is the OAuth flow secured?

The entire flow is protected by PKCE (Proof Key for Code Exchange). The SDK generates a unique code_verifier and code_challenge pair for each login attempt, and the challenge_token can only be finalized once. This protects against:

Authorization code interception — a stolen challenge_token is useless without the code_verifier, which never leaves the device
Replay attacks — the challenge_token is invalidated after a single use
Cross-site request forgery (CSRF) — the server validates that the finalize request matches the original authorization request

Every attempt carries its own verifier, so concurrent logins never share state. Once finalized, the session’s tokens are bound to the device with DPoP.

Platform setup

The provider redirects back to your app through a custom URL scheme (e.g. myapp://oauth-callback) — not an https URL. Passing an http/https redirect throws an invalid-configuration error before any network call. The redirect URI must also be allowlisted in your provider’s configuration.

iOS
Android
Flutter
React Native

No additional setup is required. The system web session captures the redirect scheme directly, so you don’t need to register it in Info.plist.Social login lives in the PreludeAuthSocial product — an opt-in module so apps that skip social pull no extra code. Add it alongside PreludeAuth in Package.swift:

.product(name: "PreludeAuthSocial", package: "apple-auth-sdk"),

Social login opens the provider page in a Chrome Custom Tab. Add androidx.browser to your module’s build.gradle.kts (the SDK references it compileOnly, so apps that skip social pull no extra dependency):

dependencies {
    implementation("androidx.browser:browser:1.8.0")
}

Then declare the redirect target in AndroidManifest.xml, with the data scheme matching your redirectUri. The SDK supplies the activity’s behavioral attributes; your app only contributes the intent-filter:

<activity
    android:name="so.prelude.android.auth.social.OAuthRedirectActivity"
    android:exported="true"
    android:launchMode="singleTask"
    android:theme="@android:style/Theme.Translucent.NoTitleBar">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="myapp" />
    </intent-filter>
</activity>

iOS — no extra configuration; the system web session captures the redirect scheme directly.

Android — social login opens a Chrome Custom Tab. Add androidx.browser to android/app/build.gradle.kts and declare the redirect target in android/app/src/main/AndroidManifest.xml, with the data scheme matching your redirectUri:

dependencies {
    implementation("androidx.browser:browser:1.8.0")
}

<activity
    android:name="so.prelude.android.auth.social.OAuthRedirectActivity"
    android:exported="true"
    android:launchMode="singleTask"
    android:theme="@android:style/Theme.Translucent.NoTitleBar">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="myapp" />
    </intent-filter>
</activity>

iOS — add the scheme to CFBundleURLTypes in Info.plist (or ios.infoPlist in app.json).

Android — depend on androidx.browser and declare the redirect activity in AndroidManifest.xml, with the data scheme matching your redirectUri:

implementation("androidx.browser:browser:1.8.0")

<activity
    android:name="so.prelude.android.auth.social.OAuthRedirectActivity"
    android:exported="true"
    android:launchMode="singleTask"
    android:configChanges="keyboardHidden|orientation|screenSize"
    android:theme="@android:style/Theme.Translucent.NoTitleBar">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" />
  </intent-filter>
</activity>

Call loginWithOAuth with a provider and your redirect URI. The SDK presents the provider’s page, handles the callback, and finalizes the session. Supported providers are google, apple, microsoft, github, okta, and facebook.

iOS
Android
Flutter
React Native

import PreludeAuthSocial

let result = try await client.loginWithOAuth(
    OAuthLoginOptions(
        provider: .google,
        redirectURI: URL(string: "myapp://oauth-callback")!
    )
)

Set prefersEphemeralSession: true to start every login from a clean session with no shared browser cookies.

import so.prelude.android.auth.*
import so.prelude.android.auth.social.*

val result = client.loginWithOAuth(
    context = context,
    options = OAuthLoginOptions(
        provider = OAuthProvider.GOOGLE,
        redirectUri = "myapp://oauth-callback",
    ),
)

import 'package:prelude_flutter_auth_sdk/prelude_flutter_auth_sdk.dart';

final result = await client.loginWithOAuth(
  OAuthLoginOptions(
    provider: OAuthProvider.google,
    redirectUri: 'myapp://oauth-callback',
  ),
);

Set prefersEphemeralSession: true (iOS only) to start every login from a clean session with no shared browser cookies.

const result = await client.loginWithOAuth({
  provider: "google",
  redirectUri: "myapp://oauth-callback",
});

Set prefersEphemeralSession: true (iOS only) to start every login from a clean session with no shared browser cookies.

Handle the result

On success the SDK persists the access and refresh tokens in the platform’s secure store and returns the outcome. Handle the two cases: the user is logged in, or an email OTP step is required. A dismissed page surfaces as a cancellation — usually swallowed rather than shown as an error.

iOS
Android
Flutter
React Native

import PreludeAuth
import PreludeAuthSocial

do {
    let result = try await client.loginWithOAuth(
        OAuthLoginOptions(
            provider: .google,
            redirectURI: URL(string: "myapp://oauth-callback")!
        )
    )
    switch result {
    case .loggedIn(let user):
        // User is now authenticated.
    case .otpRequired(let challenge, let email):
        // Provider email unverified — a code was sent to `email`.
        // Route to your OTP screen; see "Verify email via OTP".
    }
} catch PreludeAuthError.cancelled {
    // User dismissed the page — not an error.
} catch PreludeAuthError.conflict {
    // Another social login is already in progress.
} catch PreludeAuthError.invalidConfiguration {
    // redirectURI is not a custom scheme.
} catch PreludeAuthError.expiredChallengeToken {
    // Login expired — restart the flow.
} catch PreludeAuthError.rateLimited {
    // Too many attempts.
}

import so.prelude.android.auth.*
import so.prelude.android.auth.social.*

try {
    val result = client.loginWithOAuth(
        context = context,
        options = OAuthLoginOptions(
            provider = OAuthProvider.GOOGLE,
            redirectUri = "myapp://oauth-callback",
        ),
    )
    when (result) {
        is FinalizeOAuthLoginResult.LoggedIn -> {
            // result.user is now authenticated.
        }
        is FinalizeOAuthLoginResult.OtpRequired -> {
            // Provider email unverified — a code was sent to result.email.
            // Route to your OTP screen; see "Verify email via OTP".
        }
    }
} catch (e: PreludeAuthError.Cancelled) {
    // User dismissed the page — not an error.
} catch (e: PreludeAuthError.Conflict) {
    // Another social login is already in progress.
} catch (e: PreludeAuthError.InvalidConfiguration) {
    // redirectUri is not a custom scheme.
} catch (e: PreludeAuthError.RateLimited) {
    // Too many attempts.
}

import 'package:prelude_flutter_auth_sdk/prelude_flutter_auth_sdk.dart';

try {
  final result = await client.loginWithOAuth(
    OAuthLoginOptions(
      provider: OAuthProvider.google,
      redirectUri: 'myapp://oauth-callback',
    ),
  );
  switch (result) {
    case OAuthLoggedIn(:final user):
      // User is now authenticated.
    case OAuthOtpRequired(:final challenge, :final email):
      // Provider email unverified — a code was sent to `email`.
      // Route to your OTP screen; see "Verify email via OTP".
  }
} on CancelledException {
  // User dismissed the page — not an error.
} on ConflictException {
  // Another social login is already in progress.
} on InvalidConfigurationException {
  // redirectUri is not a custom scheme.
} on RateLimitedException {
  // Too many attempts.
}

import {
  CancelledError,
  ConflictError,
  InvalidConfigurationError,
  RateLimitedError,
} from "@prelude.so/react-native-auth-sdk";

try {
  const result = await client.loginWithOAuth({
    provider: "google",
    redirectUri: "myapp://oauth-callback",
  });
  if (result.kind === "loggedIn") {
    // result.user is now authenticated.
  } else if (result.kind === "otpRequired") {
    // Provider email unverified — a code was sent to result.email.
    // Route to your OTP screen; see "Verify email via OTP".
  }
} catch (e) {
  if (e instanceof CancelledError) {
    // User dismissed the page — not an error.
  } else if (e instanceof ConflictError) {
    // Another social login is already in progress.
  } else if (e instanceof InvalidConfigurationError) {
    // redirectUri is not a custom scheme.
  } else if (e instanceof RateLimitedError) {
    // Too many attempts.
  } else {
    throw e;
  }
}

Verify email via OTP

When the provider config has verify_email enabled and the IdP returns an unverified email, loginWithOAuth does not finalize the login. Instead it returns an OTP-required result carrying a resumable challenge and the email the code was sent to. The code has already been sent. Show your OTP screen, then pass the code the user enters — along with the challenge from the result — to checkOAuthEmailOTP. On success it returns the authenticated user. A wrong code leaves the challenge valid so the user can retry.

iOS
Android
Flutter
React Native

// From the .otpRequired case above:
do {
    let user = try await client.checkOAuthEmailOTP(
        codeFromUser,
        resuming: challenge
    )
    // User is now authenticated.
} catch PreludeAuthError.invalidOTPCode {
    // Wrong code — the challenge is still valid, let the user retry.
}

// From the OtpRequired branch above:
try {
    val user = client.checkOAuthEmailOTP(
        code = codeFromUser,
        resuming = challenge,
    )
    // User is now authenticated.
} catch (e: PreludeAuthError.InvalidOTPCode) {
    // Wrong code — the challenge is still valid, let the user retry.
}

// From the OAuthOtpRequired case above:
try {
  final user = await client.checkOAuthEmailOTP(challenge, codeFromUser);
  // User is now authenticated.
} on InvalidOTPCodeException {
  // Wrong code — the challenge is still valid, let the user retry.
}

import { InvalidOTPCodeError } from "@prelude.so/react-native-auth-sdk";

// From the otpRequired result above:
try {
  const user = await client.checkOAuthEmailOTP(codeFromUser, challenge);
  // User is now authenticated.
} catch (e) {
  if (e instanceof InvalidOTPCodeError) {
    // Wrong code — the challenge is still valid, let the user retry.
  } else {
    throw e;
  }
}

Present your own web session

loginWithOAuth presents the provider page for you. If you’d rather present it yourself — a custom web view or your own browser session — use the lower-level pair instead. initiateOAuthLogin returns the provider’s authorization URL; present it, capture the challenge_token delivered to your redirect URI, then redeem it with finalizeOAuthLogin, which returns the same result type as loginWithOAuth.

iOS
Android
Flutter
React Native

import PreludeAuth

let context = try await client.initiateOAuthLogin(
    InitiateOAuthLoginOptions(
        provider: .google,
        redirectURI: "myapp://oauth-callback"
    )
)
// Present context.authorizationURL, capture the challenge_token, then:
let result = try await client.finalizeOAuthLogin(context, challengeToken: token)

import so.prelude.android.auth.*

val context = client.initiateOAuthLogin(
    InitiateOAuthLoginOptions(
        provider = OAuthProvider.GOOGLE,
        redirectUri = "myapp://oauth-callback",
    ),
)
// Present context.authorizationUrl, capture the challenge_token, then:
val result = client.finalizeOAuthLogin(context, token)

final Uri authUrl = await client.initiateOAuthLogin(
  InitiateOAuthLoginOptions(
    provider: OAuthProvider.google,
    redirectUri: 'myapp://oauth-callback',
  ),
);
// Present authUrl, capture the challenge_token, then:
final result = await client.finalizeOAuthLogin(token);

const url = await client.initiateOAuthLogin({
  provider: "google",
  redirectUri: "myapp://oauth-callback",
});
// Present url, capture the challenge_token, then:
const result = await client.finalizeOAuthLogin(token);

Try it

Each example presents provider buttons, completes the login, and drops into an OTP screen when the provider’s email needs verifying. Use the redirect scheme you configured in Platform setup.

iOS
Android
Flutter
React Native

Add the PreludeAuthSocial product, then replace ContentView.swift with:

ContentView.swift

import SwiftUI
import PreludeAuth
import PreludeAuthSocial

private let appID = "YOUR_APP_ID"
private let redirectURI = URL(string: "myapp://oauth-callback")!

enum Step { case login, otp, done }

@MainActor
final class OAuthModel: ObservableObject {
    let client = try! PreludeAuthClient(
        endpoint: .custom("https://\(appID).session.prelude.dev")
    )

    @Published var step: Step = .login
    @Published var user: PreludeUser?
    @Published var error: String?

    private var challenge: OAuthEmailChallenge?

    func signIn(_ provider: OAuthProvider) async {
        error = nil
        do {
            let result = try await client.loginWithOAuth(
                OAuthLoginOptions(provider: provider, redirectURI: redirectURI)
            )
            switch result {
            case .loggedIn(let user):
                self.user = user
                step = .done
            case .otpRequired(let challenge, _):
                self.challenge = challenge
                step = .otp
            }
        } catch PreludeAuthError.cancelled {
            // Dismissed — leave state untouched.
        } catch {
            self.error = "Something went wrong. Please try again."
        }
    }

    func verify(_ code: String) async {
        guard let challenge else { return }
        error = nil
        do {
            user = try await client.checkOAuthEmailOTP(code, resuming: challenge)
            step = .done
        } catch PreludeAuthError.invalidOTPCode {
            error = "Wrong code. Please try again."
        } catch {
            self.error = "Something went wrong. Please try again."
        }
    }
}

struct ContentView: View {
    @StateObject private var model = OAuthModel()
    @State private var code = ""

    private let providers: [OAuthProvider] = [.google, .apple, .microsoft, .github, .okta, .facebook]

    var body: some View {
        VStack(spacing: 12) {
            switch model.step {
            case .login:
                ForEach(providers, id: \.self) { provider in
                    Button("Continue with \(provider.rawValue.capitalized)") {
                        Task { await model.signIn(provider) }
                    }
                    .buttonStyle(.borderedProminent)
                }
            case .otp:
                TextField("Enter code", text: $code)
                    .keyboardType(.numberPad)
                    .textFieldStyle(.roundedBorder)
                Button("Verify Code") {
                    Task { await model.verify(code) }
                }
                .buttonStyle(.borderedProminent)
            case .done:
                Text("Logged in").font(.headline)
                Text(model.user?.profile.userID ?? "—").font(.caption.monospaced())
            }
            if let error = model.error {
                Text(error).foregroundStyle(.red).font(.caption)
            }
        }
        .padding()
    }
}

Add androidx.browser and declare OAuthRedirectActivity (see Platform setup), then replace MainActivity.kt with:

MainActivity.kt

package com.example.sessiontest

import android.content.Context
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.platform.LocalContext
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 so.prelude.android.auth.social.*
import java.net.URL

private const val APP_ID = "YOUR_APP_ID"
private const val REDIRECT_URI = "myapp://oauth-callback"

enum class Step { Login, Otp, Done }

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

    var step by mutableStateOf(Step.Login); private set
    var user by mutableStateOf<PreludeUser?>(null); private set
    var error by mutableStateOf<String?>(null); private set

    private var challenge: OAuthEmailChallenge? = null

    fun signIn(context: Context, provider: OAuthProvider) {
        error = null
        viewModelScope.launch {
            try {
                val result = client.loginWithOAuth(
                    context = context,
                    options = OAuthLoginOptions(provider = provider, redirectUri = REDIRECT_URI),
                )
                when (result) {
                    is FinalizeOAuthLoginResult.LoggedIn -> {
                        user = result.user
                        step = Step.Done
                    }
                    is FinalizeOAuthLoginResult.OtpRequired -> {
                        challenge = result.challenge
                        step = Step.Otp
                    }
                }
            } catch (e: PreludeAuthError.Cancelled) {
                // Dismissed — leave state untouched.
            } catch (e: PreludeAuthError) {
                error = "Something went wrong. Please try again."
            }
        }
    }

    fun verify(code: String) {
        val challenge = challenge ?: return
        error = null
        viewModelScope.launch {
            try {
                user = client.checkOAuthEmailOTP(code = code, resuming = challenge)
                step = Step.Done
            } catch (e: PreludeAuthError.InvalidOTPCode) {
                error = "Wrong code. Please try again."
            } catch (e: PreludeAuthError) {
                error = "Something went wrong. Please try again."
            }
        }
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface {
                    val vm: OAuthViewModel = viewModel(factory = viewModelFactory(applicationContext))
                    val context = LocalContext.current
                    var code by remember { mutableStateOf("") }
                    val providers = listOf(
                        OAuthProvider.GOOGLE, OAuthProvider.APPLE, OAuthProvider.MICROSOFT,
                        OAuthProvider.GITHUB, OAuthProvider.OKTA, OAuthProvider.FACEBOOK,
                    )

                    Column(Modifier.fillMaxSize().padding(24.dp)) {
                        when (vm.step) {
                            Step.Login -> providers.forEach { provider ->
                                Button(
                                    onClick = { vm.signIn(context, provider) },
                                    modifier = Modifier.fillMaxWidth(),
                                ) { Text("Continue with ${provider.name.lowercase().replaceFirstChar { it.uppercase() }}") }
                                Spacer(Modifier.height(8.dp))
                            }
                            Step.Otp -> {
                                OutlinedTextField(
                                    value = code, onValueChange = { code = it },
                                    label = { Text("Enter code") },
                                    modifier = Modifier.fillMaxWidth(),
                                )
                                Spacer(Modifier.height(12.dp))
                                Button(onClick = { vm.verify(code) }) { Text("Verify Code") }
                            }
                            Step.Done -> {
                                Text("Logged in", style = MaterialTheme.typography.headlineSmall)
                                Text(vm.user?.profile?.userId ?: "—")
                            }
                        }
                        vm.error?.let {
                            Spacer(Modifier.height(12.dp))
                            Text(it, color = MaterialTheme.colorScheme.error)
                        }
                    }
                }
            }
        }
    }
}

(viewModelFactory is the small helper defined in Introduction.)

Add androidx.browser and declare OAuthRedirectActivity on Android (see Platform setup), then replace lib/main.dart with:

lib/main.dart

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

const appID = 'YOUR_APP_ID';
const redirectUri = 'myapp://oauth-callback';

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

enum _Step { login, otp, 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 _code = TextEditingController();
  _Step _step = _Step.login;
  PreludeUser? _user;
  OAuthEmailChallenge? _challenge;
  String? _error;

  static const _providers = OAuthProvider.values;

  Future<void> _signIn(OAuthProvider provider) async {
    setState(() => _error = null);
    try {
      final result = await client.loginWithOAuth(
        OAuthLoginOptions(provider: provider, redirectUri: redirectUri),
      );
      switch (result) {
        case OAuthLoggedIn(:final user):
          setState(() {
            _user = user;
            _step = _Step.done;
          });
        case OAuthOtpRequired(:final challenge):
          setState(() {
            _challenge = challenge;
            _step = _Step.otp;
          });
      }
    } on CancelledException {
      // Dismissed — leave state untouched.
    } on PreludeAuthException {
      setState(() => _error = 'Something went wrong. Please try again.');
    }
  }

  Future<void> _verify() async {
    final challenge = _challenge;
    if (challenge == null) return;
    setState(() => _error = null);
    try {
      final user = await client.checkOAuthEmailOTP(challenge, _code.text);
      setState(() {
        _user = user;
        _step = _Step.done;
      });
    } on InvalidOTPCodeException {
      setState(() => _error = 'Wrong code. Please try again.');
    } on PreludeAuthException {
      setState(() => _error = 'Something went wrong. Please try again.');
    }
  }

  @override
  void dispose() {
    _code.dispose();
    client.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Widget body;
    switch (_step) {
      case _Step.login:
        body = Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            for (final provider in _providers) ...[
              FilledButton(
                onPressed: () => _signIn(provider),
                child: Text('Continue with ${provider.name[0].toUpperCase()}${provider.name.substring(1)}'),
              ),
              const SizedBox(height: 8),
            ],
          ],
        );
      case _Step.otp:
        body = Column(mainAxisSize: MainAxisSize.min, children: [
          TextField(
            controller: _code,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(labelText: 'Enter code'),
          ),
          const SizedBox(height: 12),
          FilledButton(onPressed: _verify, child: const Text('Verify Code')),
        ]);
      case _Step.done:
        body = Column(mainAxisSize: MainAxisSize.min, children: [
          const Text('Logged in', style: TextStyle(fontSize: 20)),
          const SizedBox(height: 8),
          Text(_user?.profile.userID ?? '—',
              style: const TextStyle(fontFamily: 'monospace')),
        ]);
    }

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

app/index.tsx

import {
  CancelledError,
  Endpoint,
  InvalidOTPCodeError,
  OAuthEmailChallenge,
  OAuthProvider,
  PreludeAuthClient,
  PreludeAuthError,
  PreludeUser,
} 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";
const REDIRECT_URI = "myapp://oauth-callback";

type Step = "login" | "otp" | "done";
const providers: OAuthProvider[] = ["google", "apple", "microsoft", "github", "okta", "facebook"];

export default function Home() {
  const clientRef = useRef<PreludeAuthClient | null>(null);
  const challengeRef = useRef<OAuthEmailChallenge | null>(null);
  const [step, setStep] = useState<Step>("login");
  const [code, setCode] = useState("");
  const [user, setUser] = useState<PreludeUser | 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 signIn(provider: OAuthProvider) {
    setError(null);
    try {
      const result = await clientRef.current!.loginWithOAuth({
        provider,
        redirectUri: REDIRECT_URI,
      });
      if (result.kind === "loggedIn") {
        setUser(result.user);
        setStep("done");
      } else {
        challengeRef.current = result.challenge;
        setStep("otp");
      }
    } catch (e) {
      if (e instanceof CancelledError) return; // Dismissed.
      if (e instanceof PreludeAuthError) setError("Something went wrong. Please try again.");
      else throw e;
    }
  }

  async function verify() {
    if (!challengeRef.current) return;
    setError(null);
    try {
      const u = await clientRef.current!.checkOAuthEmailOTP(code, challengeRef.current);
      setUser(u);
      setStep("done");
    } catch (e) {
      if (e instanceof InvalidOTPCodeError) setError("Wrong code. Please try again.");
      else if (e instanceof PreludeAuthError) setError("Something went wrong. Please try again.");
      else throw e;
    }
  }

  return (
    <View style={{ padding: 24, gap: 8 }}>
      {step === "login" && providers.map((provider) => (
        <Button
          key={provider}
          title={`Continue with ${provider[0].toUpperCase()}${provider.slice(1)}`}
          onPress={() => signIn(provider)}
        />
      ))}
      {step === "otp" && (
        <>
          <TextInput
            placeholder="Enter code"
            value={code}
            onChangeText={setCode}
            keyboardType="number-pad"
            style={{ borderWidth: 1, padding: 8 }}
          />
          <Button title="Verify Code" onPress={verify} />
        </>
      )}
      {step === "done" && user && (
        <>
          <Text style={{ fontWeight: "600" }}>Logged in</Text>
          <Text>{user.profile.userID ?? "—"}</Text>
        </>
      )}
      {error && <Text style={{ color: "red" }}>{error}</Text>}
    </View>
  );
}

​OAuth login flow

​Platform setup

​Sign in with a provider

​Handle the result

​Verify email via OTP

​Present your own web session

OAuth login flow

Platform setup

Sign in with a provider

Handle the result

Verify email via OTP

Present your own web session