@supatype/react-native-auth 0.1.6

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export { LoginForm } from "./LoginForm.js";
+export type { LoginFormProps, LoginFormLabels } from "./LoginForm.js";
+export { SignUpForm } from "./SignUpForm.js";
+export type { SignUpFormProps, SignUpFormLabels } from "./SignUpForm.js";
+export { MagicLinkForm } from "./MagicLinkForm.js";
+export type { MagicLinkFormProps, MagicLinkFormLabels } from "./MagicLinkForm.js";
+export { OAuthButton } from "./OAuthButton.js";
+export type { OAuthButtonProps } from "./OAuthButton.js";
+export { AuthGate } from "./AuthGate.js";
+export type { AuthGateProps } from "./AuthGate.js";
+export { ResetPassword } from "./ResetPassword.js";
+export type { ResetPasswordProps, ResetPasswordLabels } from "./ResetPassword.js";
+export { AuthThemeProvider, useAuthTheme, defaultAuthTheme, } from "./theme.js";
+export type { AuthThemeTokens, AuthThemeProviderProps } from "./theme.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAErE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAExE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAEjF,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAExD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAEjF,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,MAAM,YAAY,CAAA;AACnB,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,8 @@
+export { LoginForm } from "./LoginForm.js";
+export { SignUpForm } from "./SignUpForm.js";
+export { MagicLinkForm } from "./MagicLinkForm.js";
+export { OAuthButton } from "./OAuthButton.js";
+export { AuthGate } from "./AuthGate.js";
+export { ResetPassword } from "./ResetPassword.js";
+export { AuthThemeProvider, useAuthTheme, defaultAuthTheme, } from "./theme.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAG5C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAGlD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGxC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAGlD,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,GACjB,MAAM,YAAY,CAAA"}

package/dist/styles.d.ts

@@ -0,0 +1,76 @@
+import type { AuthThemeTokens } from "./theme.js";
+export declare function fieldStyles(theme: AuthThemeTokens): {
+    root: {
+        backgroundColor: string;
+        padding: number;
+        gap: number;
+    };
+    title: {
+        color: string;
+        fontSize: number;
+        fontWeight: "600";
+        marginBottom: number;
+    };
+    label: {
+        color: string;
+        fontSize: number;
+        marginBottom: number;
+        fontWeight: "500";
+    };
+    input: {
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        fontSize: number;
+        color: string;
+        backgroundColor: string;
+        minHeight: number;
+    };
+    error: {
+        color: string;
+        fontSize: number;
+        marginBottom: number;
+    };
+    muted: {
+        color: string;
+        fontSize: number;
+    };
+    button: {
+        backgroundColor: string;
+        borderRadius: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        alignItems: "center";
+        justifyContent: "center";
+        minHeight: number;
+    };
+    buttonDisabled: {
+        opacity: number;
+    };
+    buttonText: {
+        color: string;
+        fontSize: number;
+        fontWeight: "600";
+    };
+    secondaryButton: {
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        alignItems: "center";
+        justifyContent: "center";
+        minHeight: number;
+        flexDirection: "row";
+        gap: number;
+    };
+    secondaryButtonText: {
+        color: string;
+        fontSize: number;
+        fontWeight: "500";
+    };
+};
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAEjD,wBAAgB,WAAW,CAAC,KAAK,EAAE,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EjD"}

package/dist/styles.js

@@ -0,0 +1,77 @@
+export function fieldStyles(theme) {
+    return {
+        root: {
+            backgroundColor: theme.colorBackground,
+            padding: theme.spacing,
+            gap: theme.spacing,
+        },
+        title: {
+            color: theme.colorText,
+            fontSize: theme.fontSizeTitle,
+            fontWeight: "600",
+            marginBottom: theme.spacing / 2,
+        },
+        label: {
+            color: theme.colorText,
+            fontSize: theme.fontSize,
+            marginBottom: 6,
+            fontWeight: "500",
+        },
+        input: {
+            borderWidth: 1,
+            borderColor: theme.colorBorder,
+            borderRadius: theme.borderRadius,
+            paddingHorizontal: 12,
+            paddingVertical: 10,
+            fontSize: theme.fontSize,
+            color: theme.colorText,
+            backgroundColor: theme.colorSurface,
+            minHeight: 44,
+        },
+        error: {
+            color: theme.colorDanger,
+            fontSize: theme.fontSize,
+            marginBottom: 4,
+        },
+        muted: {
+            color: theme.colorTextMuted,
+            fontSize: theme.fontSize,
+        },
+        button: {
+            backgroundColor: theme.colorPrimary,
+            borderRadius: theme.borderRadius,
+            paddingVertical: 12,
+            paddingHorizontal: 16,
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: 44,
+        },
+        buttonDisabled: {
+            opacity: 0.6,
+        },
+        buttonText: {
+            color: "#ffffff",
+            fontSize: theme.fontSize,
+            fontWeight: "600",
+        },
+        secondaryButton: {
+            backgroundColor: theme.colorSurface,
+            borderWidth: 1,
+            borderColor: theme.colorBorder,
+            borderRadius: theme.borderRadius,
+            paddingVertical: 12,
+            paddingHorizontal: 16,
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: 44,
+            flexDirection: "row",
+            gap: 8,
+        },
+        secondaryButtonText: {
+            color: theme.colorText,
+            fontSize: theme.fontSize,
+            fontWeight: "500",
+        },
+    };
+}
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,WAAW,CAAC,KAAsB;IAChD,OAAO;QACL,IAAI,EAAE;YACJ,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,GAAG,EAAE,KAAK,CAAC,OAAO;SACnB;QACD,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,CAAC,SAAS;YACtB,QAAQ,EAAE,KAAK,CAAC,aAAa;YAC7B,UAAU,EAAE,KAAc;YAC1B,YAAY,EAAE,KAAK,CAAC,OAAO,GAAG,CAAC;SAChC;QACD,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,CAAC,SAAS;YACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,YAAY,EAAE,CAAC;YACf,UAAU,EAAE,KAAc;SAC3B;QACD,KAAK,EAAE;YACL,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,KAAK,CAAC,WAAW;YAC9B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,iBAAiB,EAAE,EAAE;YACrB,eAAe,EAAE,EAAE;YACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,KAAK,EAAE,KAAK,CAAC,SAAS;YACtB,eAAe,EAAE,KAAK,CAAC,YAAY;YACnC,SAAS,EAAE,EAAE;SACd;QACD,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,CAAC,WAAW;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,YAAY,EAAE,CAAC;SAChB;QACD,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,CAAC,cAAc;YAC3B,QAAQ,EAAE,KAAK,CAAC,QAAQ;SACzB;QACD,MAAM,EAAE;YACN,eAAe,EAAE,KAAK,CAAC,YAAY;YACnC,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,eAAe,EAAE,EAAE;YACnB,iBAAiB,EAAE,EAAE;YACrB,UAAU,EAAE,QAAiB;YAC7B,cAAc,EAAE,QAAiB;YACjC,SAAS,EAAE,EAAE;SACd;QACD,cAAc,EAAE;YACd,OAAO,EAAE,GAAG;SACb;QACD,UAAU,EAAE;YACV,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,UAAU,EAAE,KAAc;SAC3B;QACD,eAAe,EAAE;YACf,eAAe,EAAE,KAAK,CAAC,YAAY;YACnC,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,KAAK,CAAC,WAAW;YAC9B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,eAAe,EAAE,EAAE;YACnB,iBAAiB,EAAE,EAAE;YACrB,UAAU,EAAE,QAAiB;YAC7B,cAAc,EAAE,QAAiB;YACjC,SAAS,EAAE,EAAE;YACb,aAAa,EAAE,KAAc;YAC7B,GAAG,EAAE,CAAC;SACP;QACD,mBAAmB,EAAE;YACnB,KAAK,EAAE,KAAK,CAAC,SAAS;YACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,UAAU,EAAE,KAAc;SAC3B;KACF,CAAA;AACH,CAAC"}

package/dist/theme.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export interface AuthThemeTokens {
+    colorPrimary: string;
+    colorDanger: string;
+    colorText: string;
+    colorTextMuted: string;
+    colorBackground: string;
+    colorBorder: string;
+    colorSurface: string;
+    borderRadius: number;
+    spacing: number;
+    fontSize: number;
+    fontSizeTitle: number;
+}
+export declare const defaultAuthTheme: AuthThemeTokens;
+export interface AuthThemeProviderProps {
+    tokens?: Partial<AuthThemeTokens> | undefined;
+    children: React.ReactNode;
+}
+export declare function AuthThemeProvider({ tokens, children }: AuthThemeProviderProps): React.ReactElement;
+export declare function useAuthTheme(): AuthThemeTokens;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,EAAE,MAAM,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,aAAa,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,gBAAgB,EAAE,eAY9B,CAAA;AAID,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,SAAS,CAAA;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAGlG;AAED,wBAAgB,YAAY,IAAI,eAAe,CAE9C"}

package/dist/theme.js

@@ -0,0 +1,23 @@
+import React, { createContext, useContext } from "react";
+export const defaultAuthTheme = {
+    colorPrimary: "#0f766e",
+    colorDanger: "#b91c1c",
+    colorText: "#111827",
+    colorTextMuted: "#6b7280",
+    colorBackground: "#ffffff",
+    colorBorder: "#d1d5db",
+    colorSurface: "#f9fafb",
+    borderRadius: 8,
+    spacing: 16,
+    fontSize: 14,
+    fontSizeTitle: 20,
+};
+const AuthThemeContext = createContext(defaultAuthTheme);
+export function AuthThemeProvider({ tokens, children }) {
+    const value = { ...defaultAuthTheme, ...tokens };
+    return React.createElement(AuthThemeContext.Provider, { value }, children);
+}
+export function useAuthTheme() {
+    return useContext(AuthThemeContext);
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAgBxD,MAAM,CAAC,MAAM,gBAAgB,GAAoB;IAC/C,YAAY,EAAE,SAAS;IACvB,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,cAAc,EAAE,SAAS;IACzB,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,CAAC;IACf,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,EAAE;IACZ,aAAa,EAAE,EAAE;CAClB,CAAA;AAED,MAAM,gBAAgB,GAAG,aAAa,CAAkB,gBAAgB,CAAC,CAAA;AAOzE,MAAM,UAAU,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAA0B;IAC5E,MAAM,KAAK,GAAoB,EAAE,GAAG,gBAAgB,EAAE,GAAG,MAAM,EAAE,CAAA;IACjE,OAAO,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAA;AAC5E,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAA;AACrC,CAAC"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@supatype/react-native-auth",
+  "version": "0.1.6",
+  "description": "Pre-built React Native authentication UI for Supatype",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@supatype/client": "0.1.6",
+    "@supatype/react-native": "0.1.6",
+    "@supatype/react": "0.1.6"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73",
+    "expo-web-browser": ">=13"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "expo-web-browser": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "@types/react-test-renderer": "^18",
+    "react": "^18",
+    "react-test-renderer": "^18",
+    "typescript": "^5",
+    "vitest": "^4.0.18"
+  },
+  "keywords": [
+    "supatype",
+    "react-native",
+    "auth",
+    "expo"
+  ],
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "dev": "tsc --project tsconfig.json --watch",
+    "typecheck": "tsc --project tsconfig.json --noEmit",
+    "test": "vitest run",
+    "clean": "rm -rf dist *.tsbuildinfo"
+  }
+}

package/src/AuthGate.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { ActivityIndicator, View, type StyleProp, type ViewStyle } from "react-native"
+import { useAuth } from "@supatype/react"
+import { useAuthTheme } from "./theme.js"
+
+export interface AuthGateProps {
+  children: React.ReactNode
+  /** Rendered when signed out. Default: null. */
+  fallback?: React.ReactNode | undefined
+  /** Rendered while the initial session is loading. Default: ActivityIndicator. */
+  loadingFallback?: React.ReactNode | undefined
+  style?: StyleProp<ViewStyle> | undefined
+}
+
+/**
+ * Renders `children` only when a session exists. Must be inside `<SupatypeProvider>`.
+ */
+export function AuthGate({
+  children,
+  fallback = null,
+  loadingFallback,
+  style,
+}: AuthGateProps): React.ReactElement {
+  const { session, loading } = useAuth()
+  const theme = useAuthTheme()
+
+  if (loading) {
+    return (
+      <View
+        style={[{ flex: 1, alignItems: "center", justifyContent: "center" }, style]}
+        testID="st-auth-gate-loading"
+      >
+        {loadingFallback ?? <ActivityIndicator color={theme.colorPrimary} testID="st-auth-gate-spinner" />}
+      </View>
+    )
+  }
+
+  if (session === null) {
+    return <>{fallback}</>
+  }
+
+  return <>{children}</>
+}

package/src/LoginForm.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from "react"
+import {
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native"
+import type { Session, SupatypeError } from "@supatype/client"
+import { useAuth } from "@supatype/react"
+import { useAuthTheme } from "./theme.js"
+import { fieldStyles } from "./styles.js"
+
+export interface LoginFormLabels {
+  title?: string | undefined
+  email?: string | undefined
+  password?: string | undefined
+  submit?: string | undefined
+  errorPrefix?: string | undefined
+}
+
+export interface LoginFormProps {
+  onSuccess?: ((session: Session) => void) | undefined
+  onError?: ((error: SupatypeError) => void) | undefined
+  labels?: LoginFormLabels | undefined
+  style?: StyleProp<ViewStyle> | undefined
+  contentContainerStyle?: StyleProp<ViewStyle> | undefined
+}
+
+const DEFAULT_LABELS: Required<LoginFormLabels> = {
+  title: "Sign in",
+  email: "Email address",
+  password: "Password",
+  submit: "Sign in",
+  errorPrefix: "",
+}
+
+export function LoginForm({
+  onSuccess,
+  onError,
+  labels,
+  style,
+  contentContainerStyle,
+}: LoginFormProps): React.ReactElement {
+  const { signIn } = useAuth()
+  const theme = useAuthTheme()
+  const styles = fieldStyles(theme)
+  const l = { ...DEFAULT_LABELS, ...labels }
+
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  async function handleSubmit(): Promise<void> {
+    setErrorMessage(null)
+    setLoading(true)
+    try {
+      const { data, error } = await signIn({ email, password })
+      if (error !== null) {
+        const msg = `${l.errorPrefix}${error.message}`
+        setErrorMessage(msg)
+        onError?.(error)
+      } else if (data.session !== null) {
+        onSuccess?.(data.session)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={[{ flex: 1 }, style]}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    >
+      <ScrollView
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={[styles.root, contentContainerStyle]}
+      >
+        <Text style={styles.title}>{l.title}</Text>
+
+        {errorMessage !== null && (
+          <Text style={styles.error} accessibilityRole="alert" accessibilityLiveRegion="polite">
+            {errorMessage}
+          </Text>
+        )}
+
+        <View>
+          <Text style={styles.label}>{l.email}</Text>
+          <TextInput
+            testID="st-login-email"
+            style={styles.input}
+            value={email}
+            onChangeText={setEmail}
+            autoCapitalize="none"
+            autoComplete="email"
+            keyboardType="email-address"
+            textContentType="emailAddress"
+            editable={!loading}
+            accessibilityLabel={l.email}
+            placeholderTextColor={theme.colorTextMuted}
+          />
+        </View>
+
+        <View>
+          <Text style={styles.label}>{l.password}</Text>
+          <TextInput
+            testID="st-login-password"
+            style={styles.input}
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+            autoComplete="password"
+            textContentType="password"
+            editable={!loading}
+            accessibilityLabel={l.password}
+            placeholderTextColor={theme.colorTextMuted}
+          />
+        </View>
+
+        <Pressable
+          testID="st-login-submit"
+          accessibilityRole="button"
+          accessibilityLabel={l.submit}
+          accessibilityState={{ disabled: loading }}
+          disabled={loading}
+          onPress={() => {
+            void handleSubmit()
+          }}
+          style={[styles.button, loading ? styles.buttonDisabled : null]}
+        >
+          <Text style={styles.buttonText}>{loading ? "Signing in…" : l.submit}</Text>
+        </Pressable>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  )
+}

package/src/MagicLinkForm.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from "react"
+import {
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native"
+import type { SupatypeError } from "@supatype/client"
+import { useAuth } from "@supatype/react"
+import { useAuthTheme } from "./theme.js"
+import { fieldStyles } from "./styles.js"
+
+export interface MagicLinkFormLabels {
+  title?: string | undefined
+  email?: string | undefined
+  submit?: string | undefined
+  successMessage?: string | undefined
+}
+
+export interface MagicLinkFormProps {
+  /** Deep link / redirect used as `emailRedirectTo` for the magic link. */
+  redirectTo?: string | undefined
+  onSent?: (() => void) | undefined
+  onError?: ((error: SupatypeError) => void) | undefined
+  labels?: MagicLinkFormLabels | undefined
+  style?: StyleProp<ViewStyle> | undefined
+  contentContainerStyle?: StyleProp<ViewStyle> | undefined
+}
+
+const DEFAULT_LABELS: Required<MagicLinkFormLabels> = {
+  title: "Sign in with email",
+  email: "Email address",
+  submit: "Send magic link",
+  successMessage: "Check your email for a sign-in link.",
+}
+
+export function MagicLinkForm({
+  redirectTo,
+  onSent,
+  onError,
+  labels,
+  style,
+  contentContainerStyle,
+}: MagicLinkFormProps): React.ReactElement {
+  const { signInWithOtp } = useAuth()
+  const theme = useAuthTheme()
+  const styles = fieldStyles(theme)
+  const l = { ...DEFAULT_LABELS, ...labels }
+
+  const [email, setEmail] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [sent, setSent] = useState(false)
+
+  async function handleSubmit(): Promise<void> {
+    setErrorMessage(null)
+    setLoading(true)
+    try {
+      const { error } = await signInWithOtp({
+        email,
+        ...(redirectTo !== undefined && { options: { emailRedirectTo: redirectTo } }),
+      })
+      if (error !== null) {
+        setErrorMessage(error.message)
+        onError?.(error)
+      } else {
+        setSent(true)
+        onSent?.()
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (sent) {
+    return (
+      <View style={[styles.root, style]} testID="st-magic-link-sent">
+        <Text style={styles.muted} accessibilityLiveRegion="polite">
+          {l.successMessage}
+        </Text>
+      </View>
+    )
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={[{ flex: 1 }, style]}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    >
+      <ScrollView
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={[styles.root, contentContainerStyle]}
+      >
+        <Text style={styles.title}>{l.title}</Text>
+
+        {errorMessage !== null && (
+          <Text style={styles.error} accessibilityRole="alert">
+            {errorMessage}
+          </Text>
+        )}
+
+        <View>
+          <Text style={styles.label}>{l.email}</Text>
+          <TextInput
+            testID="st-magic-link-email"
+            style={styles.input}
+            value={email}
+            onChangeText={setEmail}
+            autoCapitalize="none"
+            keyboardType="email-address"
+            editable={!loading}
+            accessibilityLabel={l.email}
+            placeholderTextColor={theme.colorTextMuted}
+          />
+        </View>
+
+        <Pressable
+          testID="st-magic-link-submit"
+          accessibilityRole="button"
+          disabled={loading}
+          onPress={() => {
+            void handleSubmit()
+          }}
+          style={[styles.button, loading ? styles.buttonDisabled : null]}
+        >
+          <Text style={styles.buttonText}>{loading ? "Sending…" : l.submit}</Text>
+        </Pressable>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  )
+}