@startsimpli/auth 0.4.16 → 0.4.18

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>
+  )
+}

package/src/components/sign-in-form.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+/**
+ * SignInForm — shared headless sign-in (email + password).
+ *
+ * Same one-edit-everywhere principle as SignupForm/ResetPasswordForm/
+ * ForgotPasswordForm: every app's sign-in page is a thin wrapper around
+ * this. Future changes (MFA prompt, passkey button row, magic-link toggle)
+ * land here, not in N app-local /signin pages.
+ *
+ * Built for auth-web (startsim-ul0) but immediately reusable by any app
+ * that still wants its own local signin while the central host rolls out.
+ */
+
+import { useState } from 'react'
+import { useAuth } from '../client/use-auth'
+
+export interface SignInFormProps {
+  /** Called after a successful sign-in. Apps typically router.replace(returnTo). */
+  onSuccess?: () => void
+  /** Override the auth call. Defaults to useAuth().login(email, password). */
+  onSubmit?: (payload: SignInPayload) => Promise<void>
+  /** Optional content rendered above the submit button (e.g. "remember me"). */
+  extraFields?: React.ReactNode
+  /** Optional content rendered below the submit button (e.g. OAuth providers,
+   * "Forgot password?" link). */
+  belowSubmit?: React.ReactNode
+  submitLabel?: string
+  submittingLabel?: string
+  classNames?: SignInFormClassNames
+}
+
+export interface SignInPayload {
+  email: string
+  password: string
+}
+
+export interface SignInFormClassNames {
+  form?: string
+  fieldRow?: string
+  label?: string
+  input?: string
+  errorText?: string
+  submitButton?: string
+}
+
+const DEFAULTS: Required<SignInFormClassNames> = {
+  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',
+}
+
+export function SignInForm({
+  onSuccess,
+  onSubmit,
+  extraFields,
+  belowSubmit,
+  submitLabel = 'Sign in',
+  submittingLabel = 'Signing in…',
+  classNames,
+}: SignInFormProps) {
+  const auth = useAuth()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const cls = { ...DEFAULTS, ...(classNames ?? {}) }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    setSubmitting(true)
+    try {
+      if (onSubmit) await onSubmit({ email, password })
+      else await auth.login(email, password)
+      onSuccess?.()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not sign in')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={cls.form}>
+      <div className={cls.fieldRow}>
+        <label htmlFor="signin-email" className={cls.label}>Email</label>
+        <input
+          id="signin-email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          autoComplete="email"
+          required
+          className={cls.input}
+          disabled={submitting}
+        />
+      </div>
+      <div className={cls.fieldRow}>
+        <label htmlFor="signin-password" className={cls.label}>Password</label>
+        <input
+          id="signin-password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          autoComplete="current-password"
+          required
+          className={cls.input}
+          disabled={submitting}
+        />
+      </div>
+      {extraFields}
+      {error && <p className={cls.errorText}>{error}</p>}
+      <button type="submit" disabled={submitting} className={cls.submitButton}>
+        {submitting ? submittingLabel : submitLabel}
+      </button>
+      {belowSubmit}
+    </form>
+  )
+}

package/src/components/signup-form.tsx

@@ -0,0 +1,161 @@
+'use client'
+
+/**
+ * SignupForm — shared headless signup with state, validation, submit.
+ *
+ * Renders email + (optional) name + password fields. Apps wrap it in their
+ * own auth-shell / header / footer / OAuth buttons; the form just owns the
+ * field state and the submit handler.
+ *
+ * Future password-policy changes — strength meter, drop a field, add a field,
+ * swap to passkey — happen HERE, not in every app. startsim-j29.
+ */
+
+import { useState } from 'react'
+import { useAuth } from '../client/use-auth'
+
+export interface SignupFormProps {
+  /** Where to send the user after a successful signup. Apps call their own
+   * router; the form just signals success. */
+  onSuccess?: () => void
+  /** Optional override for the auth flow. By default the form calls
+   * useAuth().register — set this for screens that need to post elsewhere
+   * (e.g. invite-accept flows). */
+  onSubmit?: (payload: SignupPayload) => Promise<void>
+  /** Whether to collect a name field (default true). */
+  showName?: boolean
+  /** Optional extra content above the submit button (e.g. terms checkbox). */
+  extraFields?: React.ReactNode
+  /** Optional content rendered below the submit button (e.g. OAuth providers).
+   * Mirrors SignInForm.belowSubmit so call sites can render an "or continue
+   * with" provider strip without forking the form. */
+  belowSubmit?: React.ReactNode
+  /** Submit button label (default 'Sign up'). */
+  submitLabel?: string
+  /** Submitting label (default 'Creating account…'). */
+  submittingLabel?: string
+  /** Minimum password length (default 8). */
+  minPasswordLength?: number
+  /** Per-element className overrides. Apps style via these. Each slot has a
+   * sensible default class that matches a generic Tailwind look. */
+  classNames?: SignupFormClassNames
+}
+
+export interface SignupPayload {
+  email: string
+  password: string
+  name?: string
+}
+
+export interface SignupFormClassNames {
+  form?: string
+  fieldRow?: string
+  label?: string
+  input?: string
+  errorText?: string
+  submitButton?: string
+}
+
+const DEFAULTS: Required<SignupFormClassNames> = {
+  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',
+}
+
+export function SignupForm({
+  onSuccess,
+  onSubmit,
+  showName = true,
+  extraFields,
+  belowSubmit,
+  submitLabel = 'Sign up',
+  submittingLabel = 'Creating account…',
+  minPasswordLength = 8,
+  classNames,
+}: SignupFormProps) {
+  const auth = useAuth()
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const cls = { ...DEFAULTS, ...(classNames ?? {}) }
+
+  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: SignupPayload = { email, password }
+      if (showName && name.trim()) payload.name = name.trim()
+      if (onSubmit) await onSubmit(payload)
+      else await auth.register(payload)
+      onSuccess?.()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Could not create account')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={cls.form}>
+      {showName && (
+        <div className={cls.fieldRow}>
+          <label htmlFor="signup-name" className={cls.label}>Name</label>
+          <input
+            id="signup-name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            autoComplete="name"
+            className={cls.input}
+            disabled={submitting}
+          />
+        </div>
+      )}
+      <div className={cls.fieldRow}>
+        <label htmlFor="signup-email" className={cls.label}>Email</label>
+        <input
+          id="signup-email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          autoComplete="email"
+          required
+          className={cls.input}
+          disabled={submitting}
+        />
+      </div>
+      <div className={cls.fieldRow}>
+        <label htmlFor="signup-password" className={cls.label}>Password</label>
+        <input
+          id="signup-password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          autoComplete="new-password"
+          required
+          minLength={minPasswordLength}
+          className={cls.input}
+          disabled={submitting}
+        />
+      </div>
+      {extraFields}
+      {error && <p className={cls.errorText}>{error}</p>}
+      <button type="submit" disabled={submitting} className={cls.submitButton}>
+        {submitting ? submittingLabel : submitLabel}
+      </button>
+      {belowSubmit}
+    </form>
+  )
+}

package/src/components/use-oauth-callback.ts

@@ -1,9 +1,11 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { completeGoogleOAuth, getMe } from '../client/functions'
+import { completeGoogleOAuth, completeMicrosoftOAuth, getMe } from '../client/functions'
 import type { AuthUser } from '../types'
 
+export type OAuthProvider = 'google' | 'microsoft'
+
 export interface OAuthCallbackResult {
   /** Access token from successful auth */
   access: string
@@ -16,6 +18,12 @@ export interface UseOAuthCallbackOptions {
   onSuccess: (result: OAuthCallbackResult) => void
   /** Called on error */
   onError?: (message: string) => void
+  /**
+   * Which OAuth provider to complete the callback against. Defaults to
+   * 'google' for backwards compatibility with the original single-provider
+   * call sites.
+   */
+  provider?: OAuthProvider
 }
 
 export interface UseOAuthCallbackReturn {
@@ -89,7 +97,11 @@ export function useOAuthCallback(
       }
 
       try {
-        const result = await completeGoogleOAuth(code, state)
+        const provider: OAuthProvider = options.provider ?? 'google'
+        const result =
+          provider === 'microsoft'
+            ? await completeMicrosoftOAuth(code, state)
+            : await completeGoogleOAuth(code, state)
         const access = result?.access
 
         if (!access) {

package/src/hooks/__tests__/use-domain-claims.test.tsx

@@ -0,0 +1,95 @@
+/** @vitest-environment jsdom */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { useDomainClaims, type DomainClaimRow } from '../use-domain-claims';
+
+function claim(overrides: Partial<DomainClaimRow> = {}): DomainClaimRow {
+  return {
+    id: 'd1',
+    companyId: 'c1',
+    domain: 'acme.com',
+    verified: false,
+    createdAt: '2025-01-01',
+    ...overrides,
+  };
+}
+
+function makeOpts(initial: DomainClaimRow[] = []) {
+  const fetchClaims = vi.fn().mockResolvedValue(initial);
+  return {
+    fetchClaims,
+    createClaim: vi.fn(),
+    verifyDns: vi.fn(),
+    initiateEmailVerification: vi.fn(),
+    submitEmailCode: vi.fn(),
+    revokeClaim: vi.fn(),
+  };
+}
+
+describe('useDomainClaims', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it('fetches the initial claims on mount', async () => {
+    const opts = makeOpts([claim()]);
+    const { result } = renderHook(() => useDomainClaims(opts));
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.claims).toHaveLength(1);
+    expect(opts.fetchClaims).toHaveBeenCalledTimes(1);
+  });
+
+  it('create splices the new row to the top so the verification_token shows', async () => {
+    const opts = makeOpts([claim({ id: 'old' })]);
+    opts.createClaim.mockResolvedValue(
+      claim({ id: 'new', verificationToken: 'startsim-verify=xyz' }),
+    );
+    const { result } = renderHook(() => useDomainClaims(opts));
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    let returned: DomainClaimRow | undefined;
+    await act(async () => {
+      returned = await result.current.create({ companyId: 'c1', domain: 'acme.com' });
+    });
+    expect(returned?.verificationToken).toBe('startsim-verify=xyz');
+    expect(result.current.claims.map((c) => c.id)).toEqual(['new', 'old']);
+  });
+
+  it('verifyDns replaces the row in place', async () => {
+    const opts = makeOpts([claim({ id: 'd1' })]);
+    opts.verifyDns.mockResolvedValue(claim({ id: 'd1', verified: true, verifiedAt: '2025-02' }));
+    const { result } = renderHook(() => useDomainClaims(opts));
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    await act(async () => {
+      await result.current.verifyDns('d1');
+    });
+    expect(result.current.claims[0].verified).toBe(true);
+    expect(opts.verifyDns).toHaveBeenCalledWith('d1');
+  });
+
+  it('verifyEmail submits the code + replaces the row', async () => {
+    const opts = makeOpts([claim({ id: 'd1' })]);
+    opts.submitEmailCode.mockResolvedValue(claim({ id: 'd1', verified: true }));
+    const { result } = renderHook(() => useDomainClaims(opts));
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    await act(async () => {
+      await result.current.verifyEmail('d1', '123456');
+    });
+    expect(opts.submitEmailCode).toHaveBeenCalledWith('d1', '123456');
+    expect(result.current.claims[0].verified).toBe(true);
+  });
+
+  it('revoke is optimistic and reverts on failure', async () => {
+    const opts = makeOpts([claim({ id: 'd1' }), claim({ id: 'd2', domain: 'b.com' })]);
+    opts.revokeClaim.mockRejectedValue(new Error('nope'));
+    const { result } = renderHook(() => useDomainClaims(opts));
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    await expect(
+      act(async () => {
+        await result.current.revoke('d1');
+      }),
+    ).rejects.toThrow('nope');
+    expect(result.current.claims.map((c) => c.id)).toEqual(['d1', 'd2']);
+  });
+});

package/src/hooks/__tests__/use-invitations.test.tsx

@@ -0,0 +1,90 @@
+/** @vitest-environment jsdom */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { useInvitations, type InvitationRow } from '../use-invitations';
+
+function row(overrides: Partial<InvitationRow> = {}): InvitationRow {
+  return {
+    id: 'i1',
+    email: 'a@x.com',
+    teamId: 't1',
+    role: 'member',
+    expiresAt: '2099-01-01',
+    isExpired: false,
+    isAccepted: false,
+    createdAt: '2025-01-01',
+    ...overrides,
+  };
+}
+
+describe('useInvitations', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it('only includes actionable invitations in pending', async () => {
+    const fetchInvitations = vi.fn().mockResolvedValue([
+      row({ id: 'i1' }),
+      row({ id: 'i2', acceptedAt: '2025-01-02', isAccepted: true }),
+      row({ id: 'i3', revokedAt: '2025-01-02' }),
+      row({ id: 'i4', isExpired: true }),
+    ]);
+    const revokeInvitation = vi.fn();
+    const bulkInviteToTeam = vi.fn();
+
+    const { result } = renderHook(() =>
+      useInvitations({ fetchInvitations, revokeInvitation, bulkInviteToTeam }),
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.pending.map((r) => r.id)).toEqual(['i1']);
+  });
+
+  it('revoke is optimistic and reverts on failure', async () => {
+    const fetchInvitations = vi
+      .fn()
+      .mockResolvedValue([row({ id: 'i1' }), row({ id: 'i2', email: 'b@x.com' })]);
+    const revokeInvitation = vi.fn().mockRejectedValue(new Error('nope'));
+    const bulkInviteToTeam = vi.fn();
+
+    const { result } = renderHook(() =>
+      useInvitations({ fetchInvitations, revokeInvitation, bulkInviteToTeam }),
+    );
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.pending).toHaveLength(2);
+
+    await expect(
+      act(async () => {
+        await result.current.revoke('i1');
+      }),
+    ).rejects.toThrow('nope');
+    // After revert both rows are still pending.
+    expect(result.current.pending.map((r) => r.id)).toEqual(['i1', 'i2']);
+  });
+
+  it('bulkInvite re-fetches after success', async () => {
+    const initial = [row({ id: 'i1' })];
+    const afterInvite = [...initial, row({ id: 'i2', email: 'b@x.com' })];
+    const fetchInvitations = vi
+      .fn()
+      .mockResolvedValueOnce(initial)
+      .mockResolvedValueOnce(afterInvite);
+    const revokeInvitation = vi.fn();
+    const bulkInviteToTeam = vi.fn().mockResolvedValue({ invited: [], skipped: [] });
+
+    const { result } = renderHook(() =>
+      useInvitations({ fetchInvitations, revokeInvitation, bulkInviteToTeam }),
+    );
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    await act(async () => {
+      await result.current.bulkInvite({
+        teamId: 't1',
+        invitations: [{ email: 'b@x.com', role: 'member' }],
+      });
+    });
+    expect(bulkInviteToTeam).toHaveBeenCalledWith('t1', [
+      { email: 'b@x.com', role: 'member' },
+    ]);
+    expect(fetchInvitations).toHaveBeenCalledTimes(2);
+    expect(result.current.pending.map((r) => r.id)).toEqual(['i1', 'i2']);
+  });
+});

package/src/hooks/__tests__/use-membership-from-api.test.tsx

@@ -0,0 +1,45 @@
+/** @vitest-environment jsdom */
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useMembershipFromApi } from '../use-membership-from-api';
+
+vi.mock('../../client/use-auth', () => ({
+  useAuth: () => ({
+    user: { id: 'u1', email: 'a@x.com', currentCompanyId: 'c1' },
+    isLoading: false,
+    isAuthenticated: true,
+  }),
+}));
+
+describe('useMembershipFromApi', () => {
+  it('wires myTeams + retrieve + companies.retrieve through to useMembership', async () => {
+    const api = {
+      teams: {
+        myTeams: vi.fn().mockResolvedValue([
+          {
+            id: 'm1',
+            userId: 'u1',
+            teamId: 't1',
+            role: 'owner',
+            joinedAt: '2025-01-01',
+            team: { id: 't1', slug: 'core', name: 'Core', companyId: 'c1' },
+          },
+        ]),
+        retrieve: vi.fn(),
+      },
+      companies: {
+        retrieve: vi.fn().mockResolvedValue({ id: 'c1', slug: 'acme', name: 'Acme' }),
+      },
+    };
+
+    const { result } = renderHook(() => useMembershipFromApi(api));
+
+    await waitFor(() => {
+      expect(result.current.company?.name).toBe('Acme');
+      expect(result.current.currentTeam?.slug).toBe('core');
+      expect(result.current.isOwner).toBe(true);
+    });
+    expect(api.teams.myTeams).toHaveBeenCalledTimes(1);
+    expect(api.companies.retrieve).toHaveBeenCalledWith('c1');
+  });
+});