@supatype/react-native-auth 0.1.6

package/src/OAuthButton.tsx

@@ -0,0 +1,99 @@
+import React, { useState, type ReactNode } from "react"
+import { Pressable, Text, type StyleProp, type ViewStyle } from "react-native"
+import type { Session, SupatypeError } from "@supatype/client"
+import { useSupatype } from "@supatype/react"
+import { openOAuth, type WebBrowserLike } from "@supatype/react-native"
+import { useAuthTheme } from "./theme.js"
+import { fieldStyles } from "./styles.js"
+
+export interface OAuthButtonProps {
+  provider: string
+  /** Deep link URI (required for mobile OAuth). */
+  redirectTo: string
+  /** Pass `import * as WebBrowser from "expo-web-browser"`. */
+  webBrowser: WebBrowserLike
+  scopes?: string | undefined
+  onSuccess?: ((session: Session) => void) | undefined
+  onError?: ((error: { message: string }) => void) | undefined
+  onCancel?: (() => void) | undefined
+  style?: StyleProp<ViewStyle> | undefined
+  children?: ReactNode | undefined
+  disabled?: boolean | undefined
+  label?: string | undefined
+}
+
+function capitalize(s: string): string {
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+/**
+ * OAuth sign-in button. Uses PKCE via `@supatype/react-native` `openOAuth`.
+ */
+export function OAuthButton({
+  provider,
+  redirectTo,
+  webBrowser,
+  scopes,
+  onSuccess,
+  onError,
+  onCancel,
+  style,
+  children,
+  disabled,
+  label,
+}: OAuthButtonProps): React.ReactElement {
+  const client = useSupatype()
+  const theme = useAuthTheme()
+  const styles = fieldStyles(theme)
+  const [loading, setLoading] = useState(false)
+  const providerName = capitalize(provider)
+  const isDisabled = disabled === true || loading
+
+  async function handlePress(): Promise<void> {
+    setLoading(true)
+    try {
+      const { data, error, cancelled } = await openOAuth(client, {
+        provider,
+        redirectTo,
+        webBrowser,
+        ...(scopes !== undefined && { scopes }),
+      })
+      if (cancelled) {
+        onCancel?.()
+        return
+      }
+      if (error !== null) {
+        onError?.(error)
+        return
+      }
+      if (data.session !== null) {
+        onSuccess?.(data.session)
+      }
+    } catch (err) {
+      onError?.({ message: err instanceof Error ? err.message : "OAuth failed" })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Pressable
+      testID={`st-oauth-${provider}`}
+      accessibilityRole="button"
+      accessibilityLabel={label ?? `Sign in with ${providerName}`}
+      accessibilityState={{ disabled: isDisabled }}
+      disabled={isDisabled}
+      onPress={() => {
+        void handlePress()
+      }}
+      style={[styles.secondaryButton, isDisabled ? styles.buttonDisabled : null, style]}
+    >
+      <Text style={styles.secondaryButtonText}>
+        {children ??
+          (loading ? `Connecting to ${providerName}…` : (label ?? `Sign in with ${providerName}`))}
+      </Text>
+    </Pressable>
+  )
+}
+
+export type { SupatypeError }

package/src/ResetPassword.tsx

@@ -0,0 +1,191 @@
+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 { useSupatype } from "@supatype/react"
+import { useAuthTheme } from "./theme.js"
+import { fieldStyles } from "./styles.js"
+
+export interface ResetPasswordLabels {
+  requestTitle?: string | undefined
+  email?: string | undefined
+  requestSubmit?: string | undefined
+  requestSuccess?: string | undefined
+  updateTitle?: string | undefined
+  password?: string | undefined
+  updateSubmit?: string | undefined
+}
+
+export interface ResetPasswordProps {
+  /**
+   * When set (from a recovery deep link after the user is signed in via recovery),
+   * shows the new-password form and calls `updateUser({ password })`.
+   */
+  mode?: "request" | "update" | undefined
+  redirectTo?: string | undefined
+  onRequestSent?: (() => void) | undefined
+  onPasswordUpdated?: ((session: Session | null) => void) | undefined
+  onError?: ((error: SupatypeError) => void) | undefined
+  labels?: ResetPasswordLabels | undefined
+  style?: StyleProp<ViewStyle> | undefined
+  contentContainerStyle?: StyleProp<ViewStyle> | undefined
+}
+
+const DEFAULT_LABELS: Required<ResetPasswordLabels> = {
+  requestTitle: "Reset password",
+  email: "Email address",
+  requestSubmit: "Send reset link",
+  requestSuccess: "Check your email for a password reset link.",
+  updateTitle: "Choose a new password",
+  password: "New password",
+  updateSubmit: "Update password",
+}
+
+export function ResetPassword({
+  mode = "request",
+  redirectTo,
+  onRequestSent,
+  onPasswordUpdated,
+  onError,
+  labels,
+  style,
+  contentContainerStyle,
+}: ResetPasswordProps): React.ReactElement {
+  const client = useSupatype()
+  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)
+  const [sent, setSent] = useState(false)
+
+  async function handleRequest(): Promise<void> {
+    setErrorMessage(null)
+    setLoading(true)
+    try {
+      const { error } = await client.auth.resetPasswordForEmail(
+        email,
+        redirectTo !== undefined ? { redirectTo } : undefined,
+      )
+      if (error !== null) {
+        setErrorMessage(error.message)
+        onError?.(error)
+      } else {
+        setSent(true)
+        onRequestSent?.()
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function handleUpdate(): Promise<void> {
+    setErrorMessage(null)
+    setLoading(true)
+    try {
+      const { error } = await client.auth.updateUser({ password })
+      if (error !== null) {
+        setErrorMessage(error.message)
+        onError?.(error)
+        return
+      }
+      const { data } = await client.auth.getSession()
+      onPasswordUpdated?.(data.session)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (mode === "request" && sent) {
+    return (
+      <View style={[styles.root, style]} testID="st-reset-sent">
+        <Text style={styles.muted} accessibilityLiveRegion="polite">
+          {l.requestSuccess}
+        </Text>
+      </View>
+    )
+  }
+
+  const isUpdate = mode === "update"
+
+  return (
+    <KeyboardAvoidingView
+      style={[{ flex: 1 }, style]}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    >
+      <ScrollView
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={[styles.root, contentContainerStyle]}
+      >
+        <Text style={styles.title}>{isUpdate ? l.updateTitle : l.requestTitle}</Text>
+
+        {errorMessage !== null && (
+          <Text style={styles.error} accessibilityRole="alert">
+            {errorMessage}
+          </Text>
+        )}
+
+        {!isUpdate ? (
+          <View>
+            <Text style={styles.label}>{l.email}</Text>
+            <TextInput
+              testID="st-reset-email"
+              style={styles.input}
+              value={email}
+              onChangeText={setEmail}
+              autoCapitalize="none"
+              keyboardType="email-address"
+              editable={!loading}
+              accessibilityLabel={l.email}
+              placeholderTextColor={theme.colorTextMuted}
+            />
+          </View>
+        ) : (
+          <View>
+            <Text style={styles.label}>{l.password}</Text>
+            <TextInput
+              testID="st-reset-password"
+              style={styles.input}
+              value={password}
+              onChangeText={setPassword}
+              secureTextEntry
+              editable={!loading}
+              accessibilityLabel={l.password}
+              placeholderTextColor={theme.colorTextMuted}
+            />
+          </View>
+        )}
+
+        <Pressable
+          testID="st-reset-submit"
+          accessibilityRole="button"
+          disabled={loading}
+          onPress={() => {
+            void (isUpdate ? handleUpdate() : handleRequest())
+          }}
+          style={[styles.button, loading ? styles.buttonDisabled : null]}
+        >
+          <Text style={styles.buttonText}>
+            {loading
+              ? "Please wait…"
+              : isUpdate
+                ? l.updateSubmit
+                : l.requestSubmit}
+          </Text>
+        </Pressable>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  )
+}

package/src/SignUpForm.tsx

@@ -0,0 +1,160 @@
+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 SignUpFormLabels {
+  title?: string | undefined
+  email?: string | undefined
+  password?: string | undefined
+  submit?: string | undefined
+  successMessage?: string | undefined
+}
+
+export interface SignUpFormProps {
+  onSuccess?: ((session: Session | null) => void) | undefined
+  onError?: ((error: SupatypeError) => void) | undefined
+  labels?: SignUpFormLabels | undefined
+  metadata?: Record<string, unknown> | undefined
+  style?: StyleProp<ViewStyle> | undefined
+  contentContainerStyle?: StyleProp<ViewStyle> | undefined
+}
+
+const DEFAULT_LABELS: Required<SignUpFormLabels> = {
+  title: "Create account",
+  email: "Email address",
+  password: "Password",
+  submit: "Create account",
+  successMessage: "Check your email to confirm your account.",
+}
+
+export function SignUpForm({
+  onSuccess,
+  onError,
+  labels,
+  metadata,
+  style,
+  contentContainerStyle,
+}: SignUpFormProps): React.ReactElement {
+  const { signUp } = 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)
+  const [confirmed, setConfirmed] = useState(false)
+
+  async function handleSubmit(): Promise<void> {
+    setErrorMessage(null)
+    setLoading(true)
+    try {
+      const { data, error } = await signUp({
+        email,
+        password,
+        ...(metadata !== undefined && { options: { data: metadata } }),
+      })
+      if (error !== null) {
+        setErrorMessage(error.message)
+        onError?.(error)
+      } else {
+        if (data.session === null) {
+          setConfirmed(true)
+        }
+        onSuccess?.(data.session)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (confirmed) {
+    return (
+      <View style={[styles.root, style]}>
+        <Text style={styles.muted} accessibilityRole="text" 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" accessibilityLiveRegion="polite">
+            {errorMessage}
+          </Text>
+        )}
+
+        <View>
+          <Text style={styles.label}>{l.email}</Text>
+          <TextInput
+            testID="st-signup-email"
+            style={styles.input}
+            value={email}
+            onChangeText={setEmail}
+            autoCapitalize="none"
+            keyboardType="email-address"
+            autoComplete="email"
+            textContentType="emailAddress"
+            editable={!loading}
+            accessibilityLabel={l.email}
+            placeholderTextColor={theme.colorTextMuted}
+          />
+        </View>
+
+        <View>
+          <Text style={styles.label}>{l.password}</Text>
+          <TextInput
+            testID="st-signup-password"
+            style={styles.input}
+            value={password}
+            onChangeText={setPassword}
+            secureTextEntry
+            autoComplete="password-new"
+            textContentType="newPassword"
+            editable={!loading}
+            accessibilityLabel={l.password}
+            placeholderTextColor={theme.colorTextMuted}
+          />
+        </View>
+
+        <Pressable
+          testID="st-signup-submit"
+          accessibilityRole="button"
+          accessibilityLabel={l.submit}
+          disabled={loading}
+          onPress={() => {
+            void handleSubmit()
+          }}
+          style={[styles.button, loading ? styles.buttonDisabled : null]}
+        >
+          <Text style={styles.buttonText}>{loading ? "Creating account…" : l.submit}</Text>
+        </Pressable>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  )
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+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"

package/src/react-native.d.ts

@@ -0,0 +1,103 @@
+declare module "react-native" {
+  import type * as React from "react"
+
+  export type StyleProp<T> =
+    | T
+    | Array<T | StyleProp<T> | null | undefined | false>
+    | null
+    | undefined
+    | false
+
+  export interface ViewStyle {
+    flex?: number | undefined
+    padding?: number | undefined
+    paddingVertical?: number | undefined
+    paddingHorizontal?: number | undefined
+    marginBottom?: number | undefined
+    marginTop?: number | undefined
+    gap?: number | undefined
+    borderWidth?: number | undefined
+    borderColor?: string | undefined
+    borderRadius?: number | undefined
+    backgroundColor?: string | undefined
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | undefined
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | undefined
+    opacity?: number | undefined
+    width?: number | string | undefined
+    minHeight?: number | undefined
+    flexDirection?: "row" | "column" | undefined
+  }
+  export interface TextStyle {
+    color?: string | undefined
+    fontSize?: number | undefined
+    fontWeight?: "400" | "500" | "600" | "700" | "normal" | "bold" | undefined
+    marginBottom?: number | undefined
+    textAlign?: "auto" | "left" | "right" | "center" | undefined
+  }
+
+  export interface ViewProps {
+    style?: StyleProp<ViewStyle> | undefined
+    children?: React.ReactNode | undefined
+    accessibilityRole?: string | undefined
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined
+    testID?: string | undefined
+  }
+  export interface TextProps {
+    style?: StyleProp<TextStyle> | undefined
+    children?: React.ReactNode | undefined
+    accessibilityRole?: string | undefined
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined
+  }
+  export interface TextInputProps {
+    style?: StyleProp<TextStyle | ViewStyle> | undefined
+    value?: string | undefined
+    onChangeText?: ((text: string) => void) | undefined
+    placeholder?: string | undefined
+    placeholderTextColor?: string | undefined
+    secureTextEntry?: boolean | undefined
+    autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined
+    autoComplete?: string | undefined
+    keyboardType?: "default" | "email-address" | "numeric" | undefined
+    textContentType?: string | undefined
+    editable?: boolean | undefined
+    accessibilityLabel?: string | undefined
+    testID?: string | undefined
+  }
+  export interface PressableProps {
+    style?: StyleProp<ViewStyle> | ((state: { pressed: boolean }) => StyleProp<ViewStyle>) | undefined
+    onPress?: (() => void) | undefined
+    disabled?: boolean | undefined
+    accessibilityRole?: string | undefined
+    accessibilityLabel?: string | undefined
+    accessibilityState?: { disabled?: boolean | undefined } | undefined
+    children?: React.ReactNode | undefined
+    testID?: string | undefined
+  }
+  export interface ScrollViewProps {
+    style?: StyleProp<ViewStyle> | undefined
+    contentContainerStyle?: StyleProp<ViewStyle> | undefined
+    keyboardShouldPersistTaps?: "always" | "never" | "handled" | undefined
+    children?: React.ReactNode | undefined
+  }
+  export interface KeyboardAvoidingViewProps {
+    style?: StyleProp<ViewStyle> | undefined
+    behavior?: "height" | "position" | "padding" | undefined
+    children?: React.ReactNode | undefined
+  }
+  export interface ActivityIndicatorProps {
+    color?: string | undefined
+    testID?: string | undefined
+  }
+
+  export const View: React.ComponentType<ViewProps>
+  export const Text: React.ComponentType<TextProps>
+  export const TextInput: React.ComponentType<TextInputProps>
+  export const Pressable: React.ComponentType<PressableProps>
+  export const ScrollView: React.ComponentType<ScrollViewProps>
+  export const KeyboardAvoidingView: React.ComponentType<KeyboardAvoidingViewProps>
+  export const ActivityIndicator: React.ComponentType<ActivityIndicatorProps>
+  export const Platform: { OS: "ios" | "android" | "web" | "windows" | "macos" }
+  export const StyleSheet: {
+    create<T extends Record<string, ViewStyle | TextStyle>>(styles: T): T
+  }
+}

package/src/styles.ts

@@ -0,0 +1,78 @@
+import type { AuthThemeTokens } from "./theme.js"
+
+export function fieldStyles(theme: AuthThemeTokens) {
+  return {
+    root: {
+      backgroundColor: theme.colorBackground,
+      padding: theme.spacing,
+      gap: theme.spacing,
+    },
+    title: {
+      color: theme.colorText,
+      fontSize: theme.fontSizeTitle,
+      fontWeight: "600" as const,
+      marginBottom: theme.spacing / 2,
+    },
+    label: {
+      color: theme.colorText,
+      fontSize: theme.fontSize,
+      marginBottom: 6,
+      fontWeight: "500" as const,
+    },
+    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" as const,
+      justifyContent: "center" as const,
+      minHeight: 44,
+    },
+    buttonDisabled: {
+      opacity: 0.6,
+    },
+    buttonText: {
+      color: "#ffffff",
+      fontSize: theme.fontSize,
+      fontWeight: "600" as const,
+    },
+    secondaryButton: {
+      backgroundColor: theme.colorSurface,
+      borderWidth: 1,
+      borderColor: theme.colorBorder,
+      borderRadius: theme.borderRadius,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      alignItems: "center" as const,
+      justifyContent: "center" as const,
+      minHeight: 44,
+      flexDirection: "row" as const,
+      gap: 8,
+    },
+    secondaryButtonText: {
+      color: theme.colorText,
+      fontSize: theme.fontSize,
+      fontWeight: "500" as const,
+    },
+  }
+}

package/src/theme.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useContext } 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 const defaultAuthTheme: AuthThemeTokens = {
+  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<AuthThemeTokens>(defaultAuthTheme)
+
+export interface AuthThemeProviderProps {
+  tokens?: Partial<AuthThemeTokens> | undefined
+  children: React.ReactNode
+}
+
+export function AuthThemeProvider({ tokens, children }: AuthThemeProviderProps): React.ReactElement {
+  const value: AuthThemeTokens = { ...defaultAuthTheme, ...tokens }
+  return React.createElement(AuthThemeContext.Provider, { value }, children)
+}
+
+export function useAuthTheme(): AuthThemeTokens {
+  return useContext(AuthThemeContext)
+}