@startsimpli/auth 0.4.15 → 0.4.17

package/src/client/session-storage.ts

@@ -0,0 +1,142 @@
+/**
+ * Async persistence for a serialized {@link Session}.
+ *
+ * Backends that own their session (the mock backend, offline-first clients)
+ * use this to survive reloads/app-restarts. The Django web client persists via
+ * httpOnly cookies instead and does not need it.
+ *
+ * Implementations here are platform-neutral (memory, Web Storage). The
+ * secure-store (iOS Keychain / Android Keystore) implementation lives in
+ * secure-session-storage.native.ts and is resolved by Metro on native builds.
+ */
+
+import type { Session } from '../types';
+
+export interface SessionStorage {
+  /** Return the persisted session, or null if none / unreadable. */
+  load(): Promise<Session | null>;
+  /** Persist the session. */
+  save(session: Session): Promise<void>;
+  /** Remove any persisted session. */
+  clear(): Promise<void>;
+}
+
+/** Default storage key. */
+export const SESSION_STORAGE_KEY = 'startsimpli.auth.session';
+
+function isSession(value: unknown): value is Session {
+  if (!value || typeof value !== 'object') return false;
+  const v = value as Record<string, unknown>;
+  return (
+    typeof v.accessToken === 'string' &&
+    typeof v.expiresAt === 'number' &&
+    !!v.user &&
+    typeof v.user === 'object'
+  );
+}
+
+/**
+ * In-memory storage. Lost on reload — the safe default for SSR and tests, and
+ * a graceful fallback when no Web Storage is available.
+ */
+export function createMemorySessionStorage(): SessionStorage {
+  let current: Session | null = null;
+  return {
+    async load() {
+      return current;
+    },
+    async save(session) {
+      current = session;
+    },
+    async clear() {
+      current = null;
+    },
+  };
+}
+
+/**
+ * Web Storage (localStorage by default) backed storage. Persists across
+ * reloads. Falls back to in-memory when no Storage is available (SSR).
+ */
+export function createWebSessionStorage(opts: {
+  key?: string;
+  storage?: Storage;
+} = {}): SessionStorage {
+  const key = opts.key ?? SESSION_STORAGE_KEY;
+  const resolveStorage = (): Storage | null => {
+    if (opts.storage) return opts.storage;
+    try {
+      const s = (globalThis as unknown as { localStorage?: Storage }).localStorage;
+      return s && typeof s.getItem === 'function' ? s : null;
+    } catch {
+      return null;
+    }
+  };
+
+  const memoryFallback = createMemorySessionStorage();
+
+  return {
+    async load() {
+      const storage = resolveStorage();
+      if (!storage) return memoryFallback.load();
+      try {
+        const raw = storage.getItem(key);
+        if (!raw) return null;
+        const parsed = JSON.parse(raw);
+        return isSession(parsed) ? parsed : null;
+      } catch {
+        return null;
+      }
+    },
+    async save(session) {
+      const storage = resolveStorage();
+      if (!storage) return memoryFallback.save(session);
+      try {
+        storage.setItem(key, JSON.stringify(session));
+      } catch {
+        /* quota / serialization failure — non-fatal for a demo session */
+      }
+    },
+    async clear() {
+      const storage = resolveStorage();
+      if (!storage) return memoryFallback.clear();
+      try {
+        storage.removeItem(key);
+      } catch {
+        /* ignore */
+      }
+    },
+  };
+}
+
+/**
+ * "Remember me" wrapper. When `shouldRemember()` is true at save time, the
+ * session is written to `persistent` storage (survives restarts); otherwise it
+ * is kept only in `transient` (in-memory) storage and `persistent` is cleared,
+ * so a restart starts unauthenticated. `load` always reads `persistent`, so a
+ * session is restored only if the last save was a "remembered" one.
+ */
+export function createRememberAwareSessionStorage(
+  persistent: SessionStorage,
+  shouldRemember: () => boolean,
+  transient: SessionStorage = createMemorySessionStorage()
+): SessionStorage {
+  return {
+    load() {
+      return persistent.load();
+    },
+    async save(session) {
+      if (shouldRemember()) {
+        await transient.clear();
+        await persistent.save(session);
+      } else {
+        await persistent.clear();
+        await transient.save(session);
+      }
+    },
+    async clear() {
+      await persistent.clear();
+      await transient.clear();
+    },
+  };
+}

package/src/client/token-auth-core.ts

@@ -0,0 +1,190 @@
+/**
+ * Platform-neutral, token-mode auth client.
+ *
+ * Mirrors the session lifecycle of the web cookie-based AuthClient (login /
+ * refreshToken / logout / getCurrentUser) but works WITHOUT cookies, so it runs
+ * on React Native (and any non-browser client). It opts into the backend's
+ * token mode via `X-Auth-Mode: token`, carries the refresh token through a
+ * pluggable TokenStorage, and sends the access token as a Bearer header.
+ *
+ * Backend contract (start-simpli-api, shipped by claude-mac):
+ *   POST /api/v1/auth/token/         X-Auth-Mode: token -> { access, refresh }
+ *   POST /api/v1/auth/token/refresh/ body { refresh }   -> { access, refresh }
+ *   POST /api/v1/auth/logout/        Bearer + body { refresh } (blacklists refresh)
+ *   GET  /api/v1/auth/me/            Bearer
+ *
+ * DOM-free by construction: no cookies, no window/document. The only platform
+ * detail — where the refresh token is persisted — is injected as TokenStorage.
+ */
+
+import type { AuthUser, Session } from '../types';
+import { getTokenExpiresAt } from '../utils/token';
+import { extractApiError } from '../utils/api-error';
+
+/** Persistence for the refresh token. Web uses cookies (and never needs this);
+ *  native provides a SecureStore-backed implementation. */
+export interface TokenStorage {
+  getRefreshToken(): Promise<string | null>;
+  setRefreshToken(token: string): Promise<void>;
+  clear(): Promise<void>;
+}
+
+/** In-memory TokenStorage — used in tests and as a non-persistent fallback. */
+export class InMemoryTokenStorage implements TokenStorage {
+  private refresh: string | null = null;
+  async getRefreshToken(): Promise<string | null> {
+    return this.refresh;
+  }
+  async setRefreshToken(token: string): Promise<void> {
+    this.refresh = token;
+  }
+  async clear(): Promise<void> {
+    this.refresh = null;
+  }
+}
+
+export interface TokenAuthConfig {
+  apiBaseUrl: string;
+  storage: TokenStorage;
+  /** Injectable for tests; defaults to the global fetch. */
+  fetch?: typeof fetch;
+}
+
+function normalizeUser(raw: unknown): AuthUser | null {
+  if (!raw || typeof raw !== 'object') return null;
+  const obj = raw as Record<string, unknown>;
+  const p = (obj.user && typeof obj.user === 'object' ? obj.user : obj) as Record<string, unknown>;
+  if (!p.id || !p.email) return null;
+  return {
+    id: String(p.id),
+    email: String(p.email),
+    firstName: (p.first_name ?? p.firstName ?? '') as string,
+    lastName: (p.last_name ?? p.lastName ?? '') as string,
+    isEmailVerified: Boolean(p.is_email_verified ?? p.isEmailVerified ?? false),
+    createdAt: (p.created_at ?? p.createdAt ?? '') as string,
+    updatedAt: (p.updated_at ?? p.updatedAt ?? '') as string,
+    name: (p.name as string | null | undefined) ?? null,
+  };
+}
+
+export class TokenAuthClient {
+  private apiBaseUrl: string;
+  private storage: TokenStorage;
+  private fetchImpl: typeof fetch;
+  private accessToken: string | null = null;
+  private session: Session | null = null;
+
+  constructor(config: TokenAuthConfig) {
+    this.apiBaseUrl = config.apiBaseUrl;
+    this.storage = config.storage;
+    this.fetchImpl = config.fetch ?? (globalThis.fetch.bind(globalThis) as typeof fetch);
+  }
+
+  getAccessToken(): string | null {
+    return this.accessToken;
+  }
+
+  getSession(): Session | null {
+    return this.session;
+  }
+
+  async login(email: string, password: string): Promise<Session> {
+    const response = await this.fetchImpl(`${this.apiBaseUrl}/api/v1/auth/token/`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Auth-Mode': 'token' },
+      body: JSON.stringify({ email, password }),
+    });
+
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}) as Record<string, unknown>);
+      throw new Error(extractApiError(data as Record<string, unknown>, 'Login failed'));
+    }
+
+    const data = (await response.json()) as Record<string, unknown>;
+    const access = data.access as string;
+    const expiresAt = getTokenExpiresAt(access);
+    if (!expiresAt) {
+      throw new Error('Invalid token received');
+    }
+
+    await this.storage.setRefreshToken(data.refresh as string);
+    this.accessToken = access;
+
+    let user = data.user ? normalizeUser(data.user) : null;
+    if (!user) {
+      user = await this.getCurrentUser(access);
+    }
+
+    this.session = { user, accessToken: access, expiresAt };
+    return this.session;
+  }
+
+  async refreshToken(): Promise<string> {
+    const refresh = await this.storage.getRefreshToken();
+    if (!refresh) {
+      throw new Error('No refresh token available');
+    }
+
+    const response = await this.fetchImpl(`${this.apiBaseUrl}/api/v1/auth/token/refresh/`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ refresh }),
+    });
+
+    if (!response.ok) {
+      await this.storage.clear();
+      this.accessToken = null;
+      this.session = null;
+      const data = await response.json().catch(() => ({}) as Record<string, unknown>);
+      throw new Error(extractApiError(data as Record<string, unknown>, 'Token refresh failed'));
+    }
+
+    const data = (await response.json()) as Record<string, unknown>;
+    const access = data.access as string;
+    // The backend rotates the refresh token in token mode; persist the new one.
+    if (typeof data.refresh === 'string') {
+      await this.storage.setRefreshToken(data.refresh);
+    }
+    this.accessToken = access;
+    return access;
+  }
+
+  async logout(): Promise<void> {
+    const refresh = await this.storage.getRefreshToken();
+    try {
+      await this.fetchImpl(`${this.apiBaseUrl}/api/v1/auth/logout/`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(this.accessToken ? { Authorization: `Bearer ${this.accessToken}` } : {}),
+        },
+        body: JSON.stringify({ refresh: refresh ?? undefined }),
+      });
+    } catch {
+      // Network failure shouldn't strand a logged-out user with local tokens.
+    } finally {
+      await this.storage.clear();
+      this.accessToken = null;
+      this.session = null;
+    }
+  }
+
+  async getCurrentUser(accessToken: string): Promise<AuthUser> {
+    const response = await this.fetchImpl(`${this.apiBaseUrl}/api/v1/auth/me/`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${accessToken}` },
+    });
+
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}) as Record<string, unknown>);
+      throw new Error(extractApiError(data as Record<string, unknown>, 'Failed to fetch user'));
+    }
+
+    const data = (await response.json()) as Record<string, unknown>;
+    const user = normalizeUser(data);
+    if (!user) {
+      throw new Error('Invalid user response');
+    }
+    return user;
+  }
+}

package/src/client/token.ts

@@ -0,0 +1,18 @@
+/**
+ * @startsimpli/auth/token — platform-neutral, cookie-free auth entry.
+ *
+ * The RN-safe surface for token-mode auth: a TokenAuthClient that carries the
+ * refresh token through a TokenStorage instead of cookies. SecureTokenStorage
+ * resolves to an expo-secure-store impl on React Native and to a throwing stub
+ * on the web (where the cookie-based AuthClient should be used instead).
+ *
+ * Kept separate from '@startsimpli/auth/client' because that barrel pulls in the
+ * DOM/cookie-bound web client (functions, AuthProvider).
+ */
+export {
+  TokenAuthClient,
+  InMemoryTokenStorage,
+  type TokenStorage,
+  type TokenAuthConfig,
+} from './token-auth-core';
+export { SecureTokenStorage, REFRESH_TOKEN_KEY } from './secure-token-storage';

package/src/client/use-auth.ts

@@ -20,13 +20,14 @@ export interface UseAuthReturn {
   register: (payload: {
     email: string;
     password: string;
-    passwordConfirm: string;
     name?: string;
     firstName?: string;
     lastName?: string;
   }) => Promise<void>;
   signInWithGoogle: (redirectTo?: string) => Promise<string>;
   completeGoogleCallback: (code: string, state: string) => Promise<void>;
+  signInWithMicrosoft: (redirectTo?: string) => Promise<string>;
+  completeMicrosoftCallback: (code: string, state: string) => Promise<void>;
   hydrateSession: (session: Session) => void;
 }
 
@@ -45,6 +46,8 @@ export function useAuth(): UseAuthReturn {
     register,
     signInWithGoogle,
     completeGoogleCallback,
+    signInWithMicrosoft,
+    completeMicrosoftCallback,
     hydrateSession,
   } = useAuthContext();
 
@@ -60,6 +63,8 @@ export function useAuth(): UseAuthReturn {
     register,
     signInWithGoogle,
     completeGoogleCallback,
+    signInWithMicrosoft,
+    completeMicrosoftCallback,
     hydrateSession,
   };
 }

package/src/components/forgot-password-form.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+/**
+ * ForgotPasswordForm — shared "send a reset link" form. startsim-j29.
+ */
+
+import { useState } from 'react'
+import { requestPasswordReset } from '../client/functions'
+
+export interface ForgotPasswordFormProps {
+  onSuccess?: (email: string) => void
+  onSubmit?: (email: string) => Promise<void>
+  submitLabel?: string
+  submittingLabel?: string
+  successMessage?: string
+  classNames?: ForgotPasswordFormClassNames
+}
+
+export interface ForgotPasswordFormClassNames {
+  form?: string
+  fieldRow?: string
+  label?: string
+  input?: string
+  errorText?: string
+  submitButton?: string
+  successText?: string
+}
+
+const DEFAULTS: Required<ForgotPasswordFormClassNames> = {
+  form: 'space-y-4',
+  fieldRow: '',
+  label: 'block text-sm font-medium text-gray-700 mb-1',
+  input:
+    'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
+  errorText: 'text-sm text-red-600',
+  submitButton:
+    'w-full rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700 disabled:opacity-50',
+  successText: 'text-sm text-green-700',
+}
+
+export function ForgotPasswordForm({
+  onSuccess,
+  onSubmit,
+  submitLabel = 'Send reset link',
+  submittingLabel = 'Sending…',
+  successMessage = 'If an account with that email exists, you’ll get a reset link shortly.',
+  classNames,
+}: ForgotPasswordFormProps) {
+  const [email, setEmail] = useState('')
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+  const cls = { ...DEFAULTS, ...(classNames ?? {}) }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    setSuccess(false)
+    setSubmitting(true)
+    try {
+      if (onSubmit) await onSubmit(email)
+      else await requestPasswordReset(email)
+      setSuccess(true)
+      onSuccess?.(email)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not send reset link')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  if (success) {
+    return <p className={cls.successText}>{successMessage}</p>
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={cls.form}>
+      <div className={cls.fieldRow}>
+        <label htmlFor="forgot-email" className={cls.label}>Email</label>
+        <input
+          id="forgot-email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          autoComplete="email"
+          required
+          className={cls.input}
+          disabled={submitting}
+        />
+      </div>
+      {error && <p className={cls.errorText}>{error}</p>}
+      <button type="submit" disabled={submitting} className={cls.submitButton}>
+        {submitting ? submittingLabel : submitLabel}
+      </button>
+    </form>
+  )
+}

package/src/components/index.ts

@@ -1,4 +1,8 @@
 export { GoogleSignInButton, type GoogleSignInButtonProps } from './google-sign-in-button'
 export { OAuthCallback, type OAuthCallbackProps } from './oauth-callback'
-export { useOAuthCallback, type UseOAuthCallbackOptions, type UseOAuthCallbackReturn, type OAuthCallbackResult } from './use-oauth-callback'
+export { useOAuthCallback, type UseOAuthCallbackOptions, type UseOAuthCallbackReturn, type OAuthCallbackResult, type OAuthProvider } from './use-oauth-callback'
 export { OAuthConnectionCard, type OAuthConnectionCardProps } from './oauth-connection-card'
+export { SignupForm, type SignupFormProps, type SignupPayload, type SignupFormClassNames } from './signup-form'
+export { SignInForm, type SignInFormProps, type SignInPayload, type SignInFormClassNames } from './sign-in-form'
+export { ResetPasswordForm, type ResetPasswordFormProps, type ResetPasswordFormClassNames } from './reset-password-form'
+export { ForgotPasswordForm, type ForgotPasswordFormProps, type ForgotPasswordFormClassNames } from './forgot-password-form'

package/src/components/oauth-callback.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import type { AuthUser } from '../types'
-import { useOAuthCallback, type OAuthCallbackResult } from './use-oauth-callback'
+import { useOAuthCallback, type OAuthCallbackResult, type OAuthProvider } from './use-oauth-callback'
 
 export interface OAuthCallbackProps {
   /** Code from OAuth redirect URL params */
@@ -18,6 +17,8 @@ export interface OAuthCallbackProps {
   loadingContent?: React.ReactNode
   /** Custom error content renderer */
   renderError?: (error: string, signInPath: string) => React.ReactNode
+  /** OAuth provider to complete the callback against. Default: 'google'. */
+  provider?: OAuthProvider
 }
 
 /**
@@ -45,12 +46,14 @@ export function OAuthCallback({
   signInPath = '/auth/signin',
   loadingContent,
   renderError,
+  provider,
 }: OAuthCallbackProps) {
   const { error, isProcessing, redirectTo } = useOAuthCallback(
     { code, state },
     {
       onSuccess: (result) => onSuccess({ ...result, redirectTo }),
       onError,
+      provider,
     },
   )
 

package/src/components/reset-password-form.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+/**
+ * ResetPasswordForm — shared password-reset form.
+ *
+ * The reset TOKEN comes from a query string the consumer reads (next/router
+ * differs across app versions); the form just takes it as a prop.
+ *
+ * Same one-edit-everywhere principle as SignupForm: future password-policy
+ * changes happen HERE, not in each app's /auth/reset-password/page.tsx.
+ * startsim-j29.
+ */
+
+import { useState } from 'react'
+import { resetPassword } from '../client/functions'
+
+export interface ResetPasswordFormProps {
+  /** The reset token from the URL (e.g. ?token=…). Consumer reads it from
+   * useSearchParams / useRouter and hands it in. */
+  token: string
+  /** Optional email if the API requires it alongside the token. */
+  email?: string
+  /** Called after a successful reset. Apps typically router.replace('/login'). */
+  onSuccess?: () => void
+  /** Optional override for the submit handler. Defaults to
+   * resetPassword({ token, password, email? }) from @startsimpli/auth. */
+  onSubmit?: (payload: { token: string; password: string; email?: string }) => Promise<void>
+  /** Rendered in place of the form when no token is present. */
+  invalidTokenMessage?: React.ReactNode
+  minPasswordLength?: number
+  submitLabel?: string
+  submittingLabel?: string
+  classNames?: ResetPasswordFormClassNames
+}
+
+export interface ResetPasswordFormClassNames {
+  form?: string
+  fieldRow?: string
+  label?: string
+  input?: string
+  errorText?: string
+  submitButton?: string
+  invalidTokenText?: string
+}
+
+const DEFAULTS: Required<ResetPasswordFormClassNames> = {
+  form: 'space-y-4',
+  fieldRow: '',
+  label: 'block text-sm font-medium text-gray-700 mb-1',
+  input:
+    'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
+  errorText: 'text-sm text-red-600',
+  submitButton:
+    'w-full rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700 disabled:opacity-50',
+  invalidTokenText: 'text-sm text-red-600',
+}
+
+export function ResetPasswordForm({
+  token,
+  email,
+  onSuccess,
+  onSubmit,
+  invalidTokenMessage,
+  minPasswordLength = 8,
+  submitLabel = 'Reset password',
+  submittingLabel = 'Saving…',
+  classNames,
+}: ResetPasswordFormProps) {
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const cls = { ...DEFAULTS, ...(classNames ?? {}) }
+
+  if (!token) {
+    return (
+      <p className={cls.invalidTokenText}>
+        {invalidTokenMessage ?? 'This reset link is invalid or has expired.'}
+      </p>
+    )
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    if (password.length < minPasswordLength) {
+      setError(`Password must be at least ${minPasswordLength} characters`)
+      return
+    }
+    setSubmitting(true)
+    try {
+      const payload = { token, password, ...(email ? { email } : {}) }
+      if (onSubmit) await onSubmit(payload)
+      else await resetPassword(payload)
+      onSuccess?.()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not reset password')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={cls.form}>
+      <div className={cls.fieldRow}>
+        <label htmlFor="reset-password" className={cls.label}>New password</label>
+        <input
+          id="reset-password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          autoComplete="new-password"
+          required
+          minLength={minPasswordLength}
+          className={cls.input}
+          disabled={submitting}
+        />
+      </div>
+      {error && <p className={cls.errorText}>{error}</p>}
+      <button type="submit" disabled={submitting} className={cls.submitButton}>
+        {submitting ? submittingLabel : submitLabel}
+      </button>
+    </form>
+  )
+}