// Expo Router

import { createAuth } from "@monarcode/session-kit";
import { secureStorage } from "@monarcode/session-kit/expo";
import { createAuthFetch } from "@monarcode/session-kit/http";
import { z } from "zod";

const API = "https://dummyjson.com";

export const userSchema = z.object({
  id: z.number(),
  username: z.string(),
  email: z.string(),
  firstName: z.string(),
});

const tokensSchema = z.object({
  accessToken: z.string(),
  refreshToken: z.string(),
});
const loginResponseSchema = tokensSchema.extend(userSchema.shape);

export const auth = createAuth({
  name: "my-app",
  user: userSchema,
  storage: secureStorage(),
  refresh: async ({ refreshToken, signal }) => {
    const response = await fetch(`${API}/auth/refresh`, {
      method: "POST",
      signal,
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ refreshToken }),
    });
    // DummyJSON answers 401 or 403 when the refresh token is no good.
    if (response.status === 401 || response.status === 403) return null;
    if (!response.ok) throw new Error(`Refresh failed (${response.status})`);
    return tokensSchema.parse(await response.json());
  },
});

export const authFetch = createAuthFetch(auth, { baseUrl: `${API}/` });

export async function signInWithPassword(username: string, password: string) {
  const response = await fetch(`${API}/auth/login`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ username, password }),
  });
  if (!response.ok) throw new Error(`Sign-in failed (${response.status})`);
  const { accessToken, refreshToken, ...user } = loginResponseSchema.parse(
    await response.json(),
  );
  await auth.signIn({ accessToken, refreshToken, user });
}

import { isSignedIn } from "@monarcode/session-kit";
import { SessionGate } from "@monarcode/session-kit/expo";
import { AuthProvider, useAuth } from "@monarcode/session-kit/react";
import { SplashScreen, Stack } from "expo-router";

import { auth } from "../src/auth";
import { Unavailable } from "../src/unavailable";

// Types `AuthProvider` and the hooks with this client.
declare module "@monarcode/session-kit" {
  interface Register {
    auth: typeof auth;
  }
}

// Keeps the splash screen up until SessionGate hides it.
void SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  return (
    <AuthProvider client={auth}>
      <SessionGate unavailable={(props) => <Unavailable {...props} />}>
        <RootStack />
      </SessionGate>
    </AuthProvider>
  );
}

function RootStack() {
  // Not signed in while locked, though a locked session keeps its user.
  const signedIn = useAuth(isSignedIn);
  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Protected guard={signedIn}>
        <Stack.Screen name="(app)" />
      </Stack.Protected>
      <Stack.Protected guard={!signedIn}>
        <Stack.Screen name="login" />
      </Stack.Protected>
    </Stack>
  );
}

import { deepLinkHandler } from "@monarcode/session-kit/expo";

import { auth } from "../src/auth";

export const redirectSystemPath = deepLinkHandler(auth);

import { useState } from "react";
import { Button, Text, TextInput, View } from "react-native";

import { signInWithPassword } from "../src/auth";

export default function Login() {
  // DummyJSON's documented test user.
  const [username, setUsername] = useState("emilys");
  const [password, setPassword] = useState("emilyspass");
  const [error, setError] = useState("");

  async function submit() {
    setError("");
    try {
      await signInWithPassword(username, password);
      // No navigation: Stack.Protected leaves this screen, and
      // SessionGate opens the deep link the user was headed to.
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "Could not sign in");
    }
  }

  return (
    <View style={{ flex: 1, justifyContent: "center", padding: 24, gap: 12 }}>
      <TextInput
        accessibilityLabel="Username"
        value={username}
        onChangeText={setUsername}
        autoCapitalize="none"
      />
      <TextInput
        accessibilityLabel="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      {error ? <Text accessibilityRole="alert">{error}</Text> : null}
      <Button title="Sign in" onPress={() => void submit()} />
    </View>
  );
}

import { Stack } from "expo-router";

export default function AppLayout() {
  return <Stack />;
}

import { Button, Text, View } from "react-native";

import { useAuth, useAuthClient } from "@monarcode/session-kit/react";
import { Link } from "expo-router";

export default function Home() {
  const firstName = useAuth((state) => state.user?.firstName);
  const auth = useAuthClient();
  return (
    <View style={{ flex: 1, justifyContent: "center", padding: 24, gap: 12 }}>
      <Text accessibilityRole="header">Welcome, {firstName}</Text>
      <Link href="/profile">Profile</Link>
      {/* No navigation: Stack.Protected then shows the sign-in screen. */}
      <Button
        title="Sign out"
        onPress={() => void auth.signOut().catch(() => {})}
      />
    </View>
  );
}

import { useEffect, useState } from "react";
import { Text, View } from "react-native";

import { z } from "zod";

import { authFetch, userSchema } from "../../src/auth";

const profileSchema = userSchema.extend({
  lastName: z.string(),
  gender: z.string(),
});

export default function Profile() {
  const [profile, setProfile] = useState<z.infer<typeof profileSchema>>();
  const [error, setError] = useState("");

  useEffect(function loadProfile() {
    const controller = new AbortController();
    authFetch("auth/me", { signal: controller.signal })
      .then(async (response) => {
        if (!response.ok)
          throw new Error(`Profile failed (${response.status})`);
        setProfile(profileSchema.parse(await response.json()));
      })
      .catch((cause: unknown) => {
        if (controller.signal.aborted) return;
        setError(cause instanceof Error ? cause.message : "Could not load");
      });
    return function cancelLoad() {
      controller.abort();
    };
  }, []);

  if (error) return <Text accessibilityRole="alert">{error}</Text>;
  if (!profile) return <Text>Loading…</Text>;
  return (
    <View style={{ padding: 24, gap: 8 }}>
      <Text accessibilityRole="header">
        {profile.firstName} {profile.lastName}
      </Text>
      <Text>{profile.email}</Text>
      <Text>{profile.gender}</Text>
    </View>
  );
}

import { Button, Text, View } from "react-native";

import type { UnavailableProps } from "@monarcode/session-kit/expo";

import { auth } from "./auth";

export function Unavailable({ error, retry }: UnavailableProps) {
  return (
    <View style={{ flex: 1, justifyContent: "center", padding: 24, gap: 12 }}>
      <Text accessibilityRole="header">Can't reach your account</Text>
      <Text>{error?.message ?? "Check your connection and try again."}</Text>
      <Button title="Try again" onPress={retry} />
      {/* Works offline: it clears the session on this device. */}
      <Button
        title="Sign out"
        onPress={() => void auth.signOut().catch(() => {})}
      />
    </View>
  );
}

import { Platform } from "react-native";

import type { AuthLocking } from "@monarcode/session-kit";
import { gcm } from "@noble/ciphers/aes.js";
import {
  bytesToHex,
  bytesToUtf8,
  hexToBytes,
  utf8ToBytes,
} from "@noble/ciphers/utils.js";
import { getRandomBytes } from "expo-crypto";
import * as SecureStore from "expo-secure-store";

const KEY_ITEM = "session-key";
// Whether the key was saved behind biometrics, so it's read the same way.
const BIOMETRIC_ITEM = "session-key-biometric";

function keyOptions(biometric: boolean): SecureStore.SecureStoreOptions {
  return biometric
    ? {
        requireAuthentication: true,
        authenticationPrompt: "Unlock your account",
      }
    : {};
}

// In memory from an unlock or a password sign-in until the app locks.
let key: Uint8Array | undefined;

/**
 * Saves the key behind the device's biometrics, or, on a device with none
 * enrolled, without them. On Android, saving shows the prompt.
 */
async function saveKey(next: Uint8Array): Promise<void> {
  const biometric = SecureStore.canUseBiometricAuthentication();
  await SecureStore.setItemAsync(
    KEY_ITEM,
    bytesToHex(next),
    keyOptions(biometric),
  );
  await SecureStore.setItemAsync(BIOMETRIC_ITEM, String(biometric));
}

/**
 * Reads the key, which shows the prompt when it needs biometrics. Resolves
 * `null` when no key was saved yet.
 */
async function readKey(): Promise<string | null> {
  const biometric = await SecureStore.getItemAsync(BIOMETRIC_ITEM);
  if (biometric === null) return null;
  const saved = await SecureStore.getItemAsync(
    KEY_ITEM,
    keyOptions(biometric === "true"),
  );
  // SecureStore reads `null` for a key that a change to the device's
  // biometrics made unreadable.
  if (saved === null) throw new Error("The session key can't be read");
  return saved;
}

/**
 * Loads the key to unlock. Throws when the user cancels the prompt, or when
 * the device's biometrics changed and the key can't be read.
 */
export async function loadKey(): Promise<void> {
  const saved = await readKey();
  if (saved) {
    key = hexToBytes(saved);
    return;
  }
  // A session saved before locking was added has no key yet. Make one: on
  // iOS, saving doesn't prompt, so read it back to show the prompt.
  const next = getRandomBytes(32);
  await saveKey(next);
  if (Platform.OS === "ios") await readKey();
  key = next;
}

/**
 * Signs in with a new key, and saves it only once the sign-in succeeds: a
 * failed sign-in keeps the key that the saved session is sealed with.
 */
export async function withNewKey<T>(signIn: () => Promise<T>): Promise<T> {
  const previous = key;
  const next = getRandomBytes(32);
  key = next;
  let result: T;
  try {
    result = await signIn();
  } catch (error) {
    if (key === next) key = previous;
    throw error;
  }
  try {
    await saveKey(next);
  } catch (error) {
    // The session works until the app closes; then the password unlocks it.
    console.warn("Could not save the session key", error);
  }
  return result;
}

/** Forgets the key in memory, once `auth.lock()` has settled. */
export function dropKey(): void {
  key = undefined;
}

function loadedKey(): Uint8Array {
  if (!key) throw new Error("The session key isn't loaded");
  return key;
}

/** AES-256-GCM: a random 12-byte nonce, then the ciphertext, as hex. */
export const sessionLocking: AuthLocking = {
  seal(payload) {
    const nonce = getRandomBytes(12);
    const sealed = gcm(loadedKey(), nonce).encrypt(utf8ToBytes(payload));
    return bytesToHex(nonce) + bytesToHex(sealed);
  },
  open(sealed) {
    const bytes = hexToBytes(sealed);
    const nonce = bytes.subarray(0, 12);
    return bytesToUtf8(gcm(loadedKey(), nonce).decrypt(bytes.subarray(12)));
  },
};

import { useState } from "react";
import { Button, Text, View } from "react-native";

import { Link } from "expo-router";

import { useAuth } from "@monarcode/session-kit/react";

import { auth } from "../src/auth";
import { loadKey } from "../src/session-key";

export default function WelcomeBack() {
  const name = useAuth((state) => state.user?.firstName);
  const [failed, setFailed] = useState(false);

  async function unlock() {
    setFailed(false);
    try {
      await loadKey();
      await auth.unlock();
      // No navigation: Stack.Protected leaves this screen, and
      // SessionGate opens the deep link the user was headed to.
    } catch {
      // Cancelled, or the biometrics changed: offer the password. A refresh
      // that failed after unlocking leaves the session `unavailable`, which
      // SessionGate shows instead.
      if (auth.state.get().status === "locked") setFailed(true);
    }
  }

  return (
    <View style={{ flex: 1, justifyContent: "center", padding: 24, gap: 12 }}>
      <Text>Welcome back{name ? `, ${name}` : ""}</Text>
      <Button title="Unlock" onPress={() => void unlock()} />
      {failed ? <Text accessibilityRole="alert">Could not unlock</Text> : null}
      <Link href="/login">Use your password</Link>
    </View>
  );
}