create-mithaq 0.1.1 → 0.2.0

package/template/apps/asas-tanstack/src/routes/auth.accept-invitation.tsx

@@ -3,8 +3,9 @@ import { Link, createFileRoute, useNavigate } from '@tanstack/react-router'
 import { Button } from '@/components/ui/button'
 import { authArm } from '../api.ts'
 import { documentHead } from '../copy.ts'
-import { AuthFrame, authGate, useRefusal } from '../auth-frame.tsx'
+import { AuthFrame, authGate, useHomeLabel, useRefusal } from '../auth-frame.tsx'
 import { useCopy } from './__root.tsx'
+import { landing } from '../redirect.ts'
 
 // Accepting is a POST the person presses, so following a link alone joins nobody to anything.
 // The provider decides whether the invitation is theirs.
@@ -17,11 +18,12 @@ export const Route = createFileRoute('/auth/accept-invitation')({
 })
 
 function AcceptInvitation() {
-  const { t } = useCopy()
+  const { t, locale } = useCopy()
   const navigate = useNavigate()
   const refused = useRefusal()
   const { id } = Route.useSearch()
-  const { signedIn } = Route.useRouteContext()
+  const { signedIn, home } = Route.useRouteContext()
+  const homeLabel = useHomeLabel()
   const [organization, setOrganization] = useState<string>()
   const [gone, setGone] = useState<string>()
   const [pending, setPending] = useState(false)
@@ -32,13 +34,13 @@ function AcceptInvitation() {
     if (!signedIn || !id) return
     fetch(`/api/auth/user/organization/get-invitation?id=${encodeURIComponent(id)}`)
       .then(async (response) => {
-        const body = (await response.json().catch(() => null)) as { organizationName?: string; code?: unknown } | null
-        if (response.ok) return setOrganization(body?.organizationName ?? '')
+        const body = (await response.json().catch(() => null)) as { organizationName?: string; organizationNames?: Record<string, string>; code?: unknown } | null
+        if (response.ok) return setOrganization(body?.organizationNames?.[locale] || body?.organizationName || '')
         // Better Auth answers a missing, spent or expired invitation 400 with no code.
         setGone(refused({ status: response.status, body }, t('auth.invitationGone', 'This invitation has expired, was cancelled or was already accepted. Ask whoever invited you to send a new one.')))
       })
       .catch(() => setGone(t('auth.requestFailed', 'That request did not work.')))
-  }, [signedIn, id])
+  }, [signedIn, id, locale])
 
   const accept = async () => {
     setPending(true)
@@ -49,7 +51,7 @@ function AcceptInvitation() {
       return setRefusal(refused(answered, t('auth.invitationAcceptFailed', 'That invitation could not be accepted.')))
     }
     // The provider made the organization active as it accepted, so the first screen is read as a member.
-    await navigate({ to: (await authGate()).home.path })
+    await navigate({ href: landing({ asked: undefined, screens: (await authGate()).screens }) })
   }
 
   if (!id) return <AuthFrame title={title} description={t('auth.invitationMissing', 'This link names no invitation.')}>{null}</AuthFrame>
@@ -75,6 +77,11 @@ function AcceptInvitation() {
           <p role="alert" data-invitation-gone="" className="text-sm">
             {gone}
           </p>
+          {/* A spent invitation is no dead end for someone already in: the way to their own first screen. An anchor,
+              because the path is the screen's own data, not a route the router knows. */}
+          <Button nativeButton={false} render={<a href={home.path} data-home="" />}>
+            {homeLabel(home, 'marketing.openScreen')}
+          </Button>
           {/* The invitation may be another address's, which signing out and in again reaches. */}
           <Button type="button" variant="outline" onClick={() => void authArm('sign-out').then(() => window.location.reload())}>
             {t('admin.signOut', 'Sign out')}

package/template/apps/asas-tanstack/src/routes/auth.first-run.tsx

@@ -0,0 +1,114 @@
+import { useState, type ComponentProps } from 'react'
+import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
+import { Button } from '@/components/ui/button'
+import { authArm } from '../api.ts'
+import { AuthBox, AuthFrame, authGate, notAnEmail, useRefusal } from '../auth-frame.tsx'
+import { documentHead } from '../copy.ts'
+import { firstRun } from '../first-run.ts'
+import { useCopy } from './__root.tsx'
+
+// The first owner of an app of one organization, and the organization itself: open once,
+// to the holder of the setup code, and closed for good once the organization exists. The
+// organization's name lives in code (`organizationName` in `organizations.ts`), so none is asked.
+export const Route = createFileRoute('/auth/first-run')({
+  head: ({ match }) => documentHead(match.context, (t) => t('auth.firstRun')),
+  beforeLoad: async () => {
+    const state = await firstRun()
+    // `href`, not `to`: sign-in redirects here too, and two routes typed by each other's paths infer nothing.
+    if (!state.open) throw redirect({ href: '/auth/sign-in' })
+    return { code: state.code, password: (await authGate()).password }
+  },
+  component: FirstRun,
+})
+
+function FirstRun() {
+  const navigate = useNavigate()
+  const { t } = useCopy()
+  const refused = useRefusal()
+  const { code: asked, password: bounds } = Route.useRouteContext()
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmation, setConfirmation] = useState('')
+  const [code, setCode] = useState('')
+  const [pending, setPending] = useState(false)
+  const [refusal, setRefusal] = useState<string | null>(null)
+  const [left, setLeft] = useState<ReadonlySet<string>>(() => new Set())
+  const required = t('auth.required', 'This field is required.')
+  const wrong = {
+    name: () => (name.trim() ? undefined : required),
+    email: () => (!email ? required : notAnEmail(email) ? t('auth.invalidEmail', 'Invalid email') : undefined),
+    password: () =>
+      !password ? required
+      : password.length < bounds.min ? t('auth.passwordTooShort', 'Password too short')
+      : password.length > bounds.max ? t('auth.passwordTooLong', 'Password too long')
+      : undefined,
+    confirmation: () => (!confirmation ? required : confirmation === password ? undefined : t('auth.passwordsDiffer', 'The two passwords are not the same.')),
+    code: () => (asked !== 'required' || code ? undefined : required),
+  }
+  const errorOf = (box: keyof typeof wrong) => (left.has(box) ? wrong[box]() : undefined)
+  const box = (id: keyof typeof wrong, label: string | undefined, props: ComponentProps<'input'> & { description?: string }) => (
+    <AuthBox id={id} label={label} error={errorOf(id)} onLeave={() => setLeft((already) => new Set(already).add(id))} {...props} />
+  )
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    setLeft(new Set(Object.keys(wrong)))
+    if (Object.values(wrong).some((check) => check())) return
+    setPending(true)
+    setRefusal(null)
+    const made = await authArm('first-run', { name, email, password, ...(asked === 'required' && { code }) })
+    setPending(false)
+    if (!made.ok) return setRefusal(refused(made, t('auth.firstRunFailed', 'That owner could not be made.')))
+    await navigate({ to: '/auth/sign-in' })
+  }
+
+  if (asked === 'unset') {
+    return (
+      <AuthFrame title={t('auth.firstRun', 'Set up this app')}>
+        <p className="text-sm" role="alert">
+          {t('auth.firstRunCodeUnset')}
+        </p>
+      </AuthFrame>
+    )
+  }
+  return (
+    <AuthFrame title={t('auth.firstRun', 'Set up this app')} description={t('auth.firstRunDescription', 'Nobody owns this app yet. The account made here becomes its owner and first administrator.')}>
+      <form className="grid gap-4" noValidate onSubmit={submit}>
+        {box('name', t('auth.name', 'Name'), { autoComplete: 'name', onChange: (event) => setName(event.target.value), type: 'text', value: name })}
+        {box('email', t('auth.email', 'Email'), { autoComplete: 'email', onChange: (event) => setEmail(event.target.value), type: 'email', value: email })}
+        {box('password', t('auth.password', 'Password'), {
+          autoComplete: 'new-password',
+          description: t('auth.passwordRule', 'At least {count} characters.')!.replace('{count}', String(bounds.min)),
+          onChange: (event) => setPassword(event.target.value),
+          type: 'password',
+          value: password,
+        })}
+        {box('confirmation', t('auth.confirmPassword', 'Confirm the password'), {
+          autoComplete: 'new-password',
+          onChange: (event) => setConfirmation(event.target.value),
+          type: 'password',
+          value: confirmation,
+        })}
+        {asked === 'required'
+          ? box('code', t('auth.setupCode', 'Setup code'), {
+              autoComplete: 'off',
+              description: t('auth.setupCodeDescription', 'The SETUP_CODE this server was started with.'),
+              onChange: (event) => setCode(event.target.value),
+              type: 'password',
+              value: code,
+            })
+          : null}
+        {/* `role="alert"` so a refusal is spoken when it appears; nothing moves the focus to it. */}
+        {refusal && (
+          <p className="text-destructive text-sm" role="alert">
+            {refusal}
+          </p>
+        )}
+        <Button disabled={pending} type="submit">
+          {pending ? t('auth.firstRunPending', 'Setting up…') : t('auth.firstRunSubmit', 'Set up the app')}
+        </Button>
+      </form>
+    </AuthFrame>
+  )
+}

package/template/apps/asas-tanstack/src/routes/auth.forgot-password.tsx

@@ -19,7 +19,7 @@ export const Route = createFileRoute('/auth/forgot-password')({
 function ForgotPassword() {
   const { t } = useCopy()
   const search = Route.useSearch()
-  const { signedIn, home } = Route.useRouteContext()
+  const { signedIn, home, screens } = Route.useRouteContext()
   const refused = useRefusal()
   const [email, setEmail] = useState('')
   const [left, setLeft] = useState(false)
@@ -47,7 +47,7 @@ function ForgotPassword() {
     setSent(true)
   }
 
-  if (signedIn) return <AlreadySignedIn redirect={search.redirect} home={home} />
+  if (signedIn) return <AlreadySignedIn redirect={search.redirect} home={home} screens={screens} />
   if (sent) {
     return (
       <AuthFrame

package/template/apps/asas-tanstack/src/routes/auth.handoff.ts

@@ -1,13 +1,13 @@
-// Trades the platform's one-time impersonation token for the session through the plugin's own
+// Trades the backoffice's one-time impersonation token for the session through the plugin's own
 // verify, then lands on the first screen the impersonated person may enter. The access report is
 // read with only the session the verify set, so the landing grants nothing. A spent, expired or
 // unknown token sets nothing and lands on sign-in.
 import { createFileRoute } from '@tanstack/react-router'
 import type {} from '@tanstack/start-client-core'
 
-const firstScreen = (targets: unknown, listed: readonly string[], platform: string) => {
+const firstScreen = (targets: unknown, listed: readonly string[], backoffice: string) => {
   const screens = targets as Record<string, { capability?: string; client?: { path: string } } | undefined>
-  const name = listed.find((one) => one !== platform && screens[one]?.capability === 'screen')
+  const name = listed.find((one) => one !== backoffice && screens[one]?.capability === 'screen')
   return name ? screens[name]!.client!.path : '/unauthorized'
 }
 
@@ -15,7 +15,7 @@ export const Route = createFileRoute('/auth/handoff')({
   server: {
     handlers: {
       GET: async ({ request }) => {
-        const { asas, tenantURL, PLATFORM_SCREEN } = await import('asas')
+        const { asas, tenantURL, BACKOFFICE_SCREEN } = await import('asas')
         // The deployment's own origin, never the request's, whose host a caller writes.
         const own = new URL(tenantURL).origin
         const verified = await asas.handler(
@@ -30,7 +30,7 @@ export const Route = createFileRoute('/auth/handoff')({
         const report = verified.ok
           ? ((await (await asas.handler(new Request(new URL('/api/access', own), { headers: { cookie: session } }))).json().catch(() => ({}))) as { screens?: string[] })
           : undefined
-        const headers = new Headers({ location: report ? firstScreen(asas.targets, report.screens ?? [], PLATFORM_SCREEN) : '/auth/sign-in' })
+        const headers = new Headers({ location: report ? firstScreen(asas.targets, report.screens ?? [], BACKOFFICE_SCREEN) : '/auth/sign-in' })
         for (const cookie of cookies) headers.append('set-cookie', cookie)
         return new Response(null, { status: 302, headers })
       },

package/template/apps/asas-tanstack/src/routes/auth.reset-password.tsx

@@ -1,109 +1,16 @@
-import { useState, type ComponentProps } from 'react'
-import { Link, createFileRoute } from '@tanstack/react-router'
-import { Button } from '@/components/ui/button'
-import { authArm } from '../api.ts'
+import { createFileRoute } from '@tanstack/react-router'
 import { documentHead } from '../copy.ts'
-import { AlreadySignedIn, AuthBox, AuthFrame, authGate, redirectSearch, useRefusal } from '../auth-frame.tsx'
-import { useCopy } from './__root.tsx'
+import { ChoosePassword, passwordGate, tokenSearch } from '../choose-password.tsx'
 
+// Where a forgotten password's link lands. A first password, chosen from a sign-up's or an added person's link, has a
+// page of its own, `/auth/set-password`, with the same form.
 export const Route = createFileRoute('/auth/reset-password')({
   head: ({ match }) => documentHead(match.context, (t) => t('auth.resetPassword')),
-  validateSearch: (search: Record<string, unknown>): { redirect?: string; token?: string } => ({
-    ...redirectSearch(search),
-    ...(typeof search.token === 'string' && search.token ? { token: search.token } : {}),
-  }),
-  beforeLoad: () => authGate(),
+  validateSearch: tokenSearch,
+  beforeLoad: ({ search }: { search: { token?: string } }) => passwordGate(search),
   component: ResetPassword,
 })
 
 function ResetPassword() {
-  const { t } = useCopy()
-  const { token, redirect } = Route.useSearch()
-  const { password: bounds, signedIn, home } = Route.useRouteContext()
-  const refused = useRefusal()
-  const [password, setPassword] = useState('')
-  const [confirmation, setConfirmation] = useState('')
-  const [pending, setPending] = useState(false)
-  const [done, setDone] = useState(false)
-  const [refusal, setRefusal] = useState<string | null>(null)
-  const [left, setLeft] = useState<ReadonlySet<string>>(() => new Set())
-  const wrong = {
-    password: () =>
-      !password ? t('auth.required', 'This field is required.')
-      : password.length < bounds.min ? t('auth.passwordTooShort', 'Password too short')
-      : password.length > bounds.max ? t('auth.passwordTooLong', 'Password too long')
-      : undefined,
-    confirmation: () => (!confirmation ? t('auth.required', 'This field is required.') : confirmation === password ? undefined : t('auth.passwordsDiffer', 'The two passwords are not the same.')),
-  }
-  const errorOf = (box: keyof typeof wrong) => (left.has(box) ? wrong[box]() : undefined)
-  const box = (id: keyof typeof wrong, label: string | undefined, props: ComponentProps<'input'> & { description?: string }) => (
-    <AuthBox id={id} label={label} error={errorOf(id)} onLeave={() => setLeft((already) => new Set(already).add(id))} {...props} />
-  )
-  const signIn = (
-    <p className="mt-4 text-center text-sm">
-      <Link className="text-primary underline underline-offset-4" to="/auth/sign-in">
-        {t('auth.signIn', 'Sign in')}
-      </Link>
-    </p>
-  )
-
-  const submit = async (event: React.FormEvent) => {
-    event.preventDefault()
-    setLeft(new Set(Object.keys(wrong)))
-    if (Object.values(wrong).some((check) => check())) return
-    setPending(true)
-    setRefusal(null)
-    const answered = await authArm('reset-password', { newPassword: password, token })
-    setPending(false)
-    if (!answered.ok) return setRefusal(refused(answered, t('auth.resetFailed', 'That reset did not work.')))
-    setDone(true)
-  }
-
-  if (signedIn) return <AlreadySignedIn redirect={redirect} home={home} />
-  if (!token) {
-    return (
-      <AuthFrame title={t('auth.resetPassword', 'Reset password')} description={t('auth.tokenInvalid', 'Token is either invalid or has expired.')}>
-        <p className="text-center text-sm">
-          <Link className="text-primary underline underline-offset-4" to="/auth/forgot-password">
-            {t('auth.forgotPassword', 'Forgot password')}
-          </Link>
-        </p>
-      </AuthFrame>
-    )
-  }
-  if (done) {
-    return (
-      <AuthFrame title={t('auth.resetPassword', 'Reset password')} description={t('auth.passwordReset', 'Password reset successfully.')}>
-        {signIn}
-      </AuthFrame>
-    )
-  }
-  return (
-    <AuthFrame title={t('auth.resetPassword', 'Reset password')}>
-      <form className="grid gap-4" noValidate onSubmit={submit}>
-        {box('password', t('auth.newPassword', 'New password'), {
-          autoComplete: 'new-password',
-          description: t('auth.passwordRule', 'At least {count} characters.')!.replace('{count}', String(bounds.min)),
-          onChange: (event) => setPassword(event.target.value),
-          type: 'password',
-          value: password,
-        })}
-        {box('confirmation', t('auth.confirmPassword', 'Confirm the password'), {
-          autoComplete: 'new-password',
-          onChange: (event) => setConfirmation(event.target.value),
-          type: 'password',
-          value: confirmation,
-        })}
-        {refusal && (
-          <p className="text-destructive text-sm" role="alert">
-            {refusal}
-          </p>
-        )}
-        <Button disabled={pending} type="submit">
-          {t('auth.resetPassword', 'Reset password')}
-        </Button>
-      </form>
-      {signIn}
-    </AuthFrame>
-  )
+  return <ChoosePassword {...Route.useSearch()} {...Route.useRouteContext()} first={false} />
 }

package/template/apps/asas-tanstack/src/routes/auth.set-password.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { documentHead } from '../copy.ts'
+import { ChoosePassword, passwordGate, tokenSearch } from '../choose-password.tsx'
+
+// Where a sign-up's or an added person's link lands: a brand-new account chooses its first password here, under a
+// title that says so, and never reads that it is resetting one.
+export const Route = createFileRoute('/auth/set-password')({
+  head: ({ match }) => documentHead(match.context, (t) => t('auth.setPassword')),
+  validateSearch: tokenSearch,
+  beforeLoad: ({ search }: { search: { token?: string } }) => passwordGate(search),
+  component: SetPassword,
+})
+
+function SetPassword() {
+  return <ChoosePassword {...Route.useSearch()} {...Route.useRouteContext()} first />
+}

package/template/apps/asas-tanstack/src/routes/auth.sign-in.tsx

@@ -1,23 +1,32 @@
 import { useState, type ComponentProps } from 'react'
-import { Link, createFileRoute, useNavigate } from '@tanstack/react-router'
+import { Link, createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
+import { organizations, signUp } from 'asas/organizations'
 import { Button } from '@/components/ui/button'
 import { authArm } from '../api.ts'
 import { documentHead } from '../copy.ts'
 import { AuthBox, AuthFrame, authGate, gate, notAnEmail, redirectSearch, useRefusal } from '../auth-frame.tsx'
+import { firstRun } from '../first-run.ts'
 import { useCopy } from './__root.tsx'
-import { wanted } from '../redirect.ts'
+import { landing } from '../redirect.ts'
 
 // The password has no length rule here because the provider's sign-in has none: a wrong
 // password of any length is the one refusal it answers.
 
 export const Route = createFileRoute('/auth/sign-in')({
   head: ({ match }) => documentHead(match.context, (t) => t('auth.signIn')),
-  // The router hands `validateSearch` whatever the URL carried; `wanted` decides what is honoured.
+  // The router hands `validateSearch` whatever the URL carried; `landing` decides what is honoured.
   validateSearch: redirectSearch,
-  beforeLoad: gate,
+  // Nobody signs in to an app of one organization before its owner has set it up.
+  beforeLoad: async ({ search }: { search: { redirect?: string } }) => {
+    if ((await firstRun()).open) throw redirect({ href: '/auth/first-run' })
+    return gate({ search })
+  },
   component: SignIn,
 })
 
+/** Whether a visitor with no invitation may make an account here, so the page offers one. */
+const offersSignUp = organizations === 'many' || signUp === 'open'
+
 function SignIn() {
   const navigate = useNavigate()
   const { t } = useCopy()
@@ -26,7 +35,8 @@ function SignIn() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [pending, setPending] = useState(false)
-  const [refusal, setRefusal] = useState<string | null>(null)
+  // The answer, not its sentence, so a language switch says it again in the language chosen.
+  const [refusal, setRefusal] = useState<Parameters<typeof refused>[0] | null>(null)
   const [left, setLeft] = useState<ReadonlySet<string>>(() => new Set())
   const required = t('auth.required', 'This field is required.')
   const wrong = {
@@ -48,17 +58,17 @@ function SignIn() {
     // The project's own sentence for the provider's code, never its English `message`, since copy carries every locale.
     if (!answered.ok) {
       setPending(false)
-      return setRefusal(refused(answered, t('auth.failed', 'That sign-in did not work.')))
+      return setRefusal(answered)
     }
 
     setPending(false)
 
     // The first screen this actor enters is read only once the session exists.
-    await navigate({ to: wanted({ asked: search.redirect, home: (await authGate()).home.path }) })
+    await navigate({ href: landing({ asked: search.redirect, screens: (await authGate()).screens }) })
   }
 
   return (
-    <AuthFrame title={t('auth.signIn', 'Sign in')} description={t('auth.signInDescription', 'Sign in to reach the dashboard.')}>
+    <AuthFrame title={t('auth.signIn', 'Sign in')} description={t('auth.signInDescription', 'Welcome back. Sign in with your email and password.')}>
       <form className="grid gap-4" noValidate onSubmit={submit}>
         {box('email', t('auth.email', 'Email'), { autoComplete: 'email', onChange: (event) => setEmail(event.target.value), type: 'email', value: email })}
         {box('password', t('auth.password', 'Password'), { autoComplete: 'current-password', onChange: (event) => setPassword(event.target.value), type: 'password', value: password })}
@@ -68,19 +78,21 @@ function SignIn() {
         {/* `role="alert"` so a refusal is spoken when it appears: nothing moves the focus to it. */}
         {refusal && (
           <p className="text-destructive text-sm" role="alert">
-            {refusal}
+            {refused(refusal, t('auth.failed', 'That sign-in did not work.'))}
           </p>
         )}
         <Button disabled={pending} type="submit">
           {pending ? t('auth.signInPending', 'Signing in…') : t('auth.signIn', 'Sign in')}
         </Button>
       </form>
-      <p className="mt-4 text-center text-sm text-muted-foreground">
-        {t('auth.noAccount', 'No account yet?')}{' '}
-        <Link className="text-primary underline underline-offset-4" to="/auth/sign-up" search={{ redirect: search.redirect }}>
-          {t('auth.signUp', 'Sign up')}
-        </Link>
-      </p>
+      {offersSignUp ? (
+        <p className="mt-4 text-center text-sm text-muted-foreground">
+          {t('auth.noAccount', 'No account yet?')}{' '}
+          <Link className="text-primary underline underline-offset-4" to="/auth/sign-up" search={{ redirect: search.redirect }}>
+            {t('auth.signUp', 'Sign up')}
+          </Link>
+        </p>
+      ) : null}
     </AuthFrame>
   )
 }

package/template/apps/asas-tanstack/src/routes/auth.sign-up.tsx

@@ -1,25 +1,31 @@
 import { useState, type ComponentProps } from 'react'
-import { Link, createFileRoute, useNavigate } from '@tanstack/react-router'
+import { Link, createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
+import { organizations, signUp, verifyEmail } from 'asas/organizations'
 import { Button } from '@/components/ui/button'
 import { authArm } from '../api.ts'
 import { documentHead } from '../copy.ts'
 import { AuthBox, AuthFrame, authGate, gate, notAnEmail, redirectSearch, useRefusal } from '../auth-frame.tsx'
-import { wanted } from '../redirect.ts'
+import { firstRun } from '../first-run.ts'
+import { landing, wanted } from '../redirect.ts'
 import { useCopy } from './__root.tsx'
 
 export const Route = createFileRoute('/auth/sign-up')({
   head: ({ match }) => documentHead(match.context, (t) => t('auth.signUp')),
   validateSearch: redirectSearch,
-  beforeLoad: gate,
+  // An app of one organization that has none yet takes no account before its owner's.
+  beforeLoad: async ({ search }: { search: { redirect?: string } }) => {
+    if ((await firstRun()).open) throw redirect({ href: '/auth/first-run' })
+    return gate({ search })
+  },
   component: SignUp,
 })
 
 /**
- * Better Auth requires a unique slug, so a random tail keeps same-named organizations apart.
- * Padded before the cut, so the tail is always six characters and the slug never ends in `-`.
+ * Whether a new account proves its address before it signs in, so the sign-up answers with no session: with many
+ * organizations always, where the person then founds or joins one, and with one where an open sign-up says so. Such a
+ * sign-up asks no password: it is chosen once, on the page the mailed link opens, and the server keeps none typed here.
  */
-const slugOf = (name: string) =>
-  `${name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 40) || 'organization'}-${Math.random().toString(36).slice(2).padEnd(6, '0').slice(0, 6)}`
+const verifies = signUp === 'open' && verifyEmail
 
 function SignUp() {
   const navigate = useNavigate()
@@ -29,23 +35,24 @@ function SignUp() {
   const { password: bounds } = Route.useRouteContext()
   // The redirect is a link anyone can write; a crafted one only makes an account with no organization,
   // which reads nothing until an organization invites it.
-  const invited = wanted({ asked: search.redirect, home: '/' }).startsWith('/auth/accept-invitation?')
+  const asked = wanted({ asked: search.redirect, home: '/' })
+  const invited = asked.startsWith('/auth/accept-invitation?')
+  // The invitation's id, which a sign-up by invitation carries: holding it is what lets it through.
+  const invitationId = invited ? new URLSearchParams(asked.slice(asked.indexOf('?'))).get('id') ?? undefined : undefined
   const [name, setName] = useState('')
-  const [organization, setOrganization] = useState('')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [confirmation, setConfirmation] = useState('')
   const [pending, setPending] = useState(false)
   const [refusal, setRefusal] = useState<string | null>(null)
-  // The address this submit already signed up. A second sign-up with the same email is refused, so a
-  // retry after the organization call failed must skip it. An address and not a flag: a corrected typo signs up again.
-  const [signedUpAs, setSignedUpAs] = useState<string | null>(null)
   const [left, setLeft] = useState<ReadonlySet<string>>(() => new Set())
+  const [sent, setSent] = useState<string | null>(null)
   const required = t('auth.required', 'This field is required.')
-  const wrong = {
+  const named = {
     name: () => (name ? undefined : required),
-    organization: () => (invited || organization ? undefined : required),
     email: () => (!email ? required : notAnEmail(email) ? t('auth.invalidEmail', 'Invalid email') : undefined),
+  }
+  const chosen = {
     password: () =>
       !password ? required
       : password.length < bounds.min ? t('auth.passwordTooShort', 'Password too short')
@@ -53,7 +60,8 @@ function SignUp() {
       : undefined,
     confirmation: () => (!confirmation ? required : confirmation === password ? undefined : t('auth.passwordsDiffer', 'The two passwords are not the same.')),
   }
-  const errorOf = (box: keyof typeof wrong) => (left.has(box) ? wrong[box]() : undefined)
+  const wrong: Partial<Record<'name' | 'email' | 'password' | 'confirmation', () => string | undefined>> = verifies ? named : { ...named, ...chosen }
+  const errorOf = (box: keyof typeof wrong) => (left.has(box) ? wrong[box]?.() : undefined)
   const box = (id: keyof typeof wrong, label: string | undefined, props: ComponentProps<'input'> & { description?: string }) => (
     <AuthBox id={id} label={label} error={errorOf(id)} onLeave={() => setLeft((already) => new Set(already).add(id))} {...props} />
   )
@@ -64,39 +72,57 @@ function SignUp() {
     if (Object.values(wrong).some((check) => check())) return
     setPending(true)
     setRefusal(null)
-    if (signedUpAs !== email) {
-      const made = await authArm('sign-up/email', { name, email, password })
-      if (!made.ok) {
-        setPending(false)
-        return setRefusal(refused(made, t('auth.signUpFailed', 'That sign-up did not work.')))
-      }
-      setSignedUpAs(email)
-    }
-    // A refusal here leaves an account that reads nothing, so the sentence names the organization;
-    // `signedUpAs` holds a retry to this call.
-    const created = invited ? undefined : await authArm('organization/create', { name: organization, slug: slugOf(organization) })
+    const made = await authArm('sign-up/email', { name, email, ...(!verifies && { password }), ...(invitationId && { invitationId }) })
     setPending(false)
-    if (created && !created.ok) return setRefusal(refused(created, t('auth.organizationFailed', 'That organization could not be created.')))
-    await navigate({ to: wanted({ asked: search.redirect, home: (await authGate()).home.path }) })
+    if (!made.ok) return setRefusal(refused(made, t('auth.signUpFailed', 'That sign-up did not work.')))
+    // An account that proves its address first has no session yet, invited or not, so it is told to open its mail.
+    if (verifies) return setSent(email)
+    // The server accepted the invitation the sign-up carried, so its page would only say it is spent.
+    await navigate({ href: landing({ asked: invited ? undefined : search.redirect, screens: (await authGate()).screens }) })
   }
 
+  const toSignIn = (
+    <p className="mt-4 text-center text-sm text-muted-foreground">
+      {t('auth.haveAccount', 'Already have an account?')}{' '}
+      <Link className="text-primary underline underline-offset-4" to="/auth/sign-in" search={{ redirect: search.redirect }}>
+        {t('auth.signIn', 'Sign in')}
+      </Link>
+    </p>
+  )
+  // By invitation, nobody without one is offered a form the server would refuse.
+  if (organizations === 'one' && signUp === 'invite' && !invitationId) {
+    return (
+      <AuthFrame title={t('auth.signUp', 'Sign up')} description={t('auth.inviteOnly', 'Accounts here are made by invitation. Open the link of the invitation sent to you, or sign in.')}>
+        {toSignIn}
+      </AuthFrame>
+    )
+  }
+  if (sent) {
+    return (
+      <AuthFrame
+        title={t('auth.verifySent', 'Check your email')}
+        description={<span className="[overflow-wrap:anywhere]">{t('auth.verifySentDescription', 'We sent a link to {email}. Open it to confirm your address and choose your password, then sign in. It lasts an hour.')!.split(/(\{email\})/).map((part, at) => (part === '{email}' ? <bdi key={at}>{sent}</bdi> : part))}</span>}
+      >
+        {toSignIn}
+      </AuthFrame>
+    )
+  }
   return (
     <AuthFrame
       title={t('auth.signUp', 'Sign up')}
-      description={invited ? t('auth.signUpInvitedDescription', 'Make an account with the email address the invitation was sent to.') : t('auth.signUpDescription', 'Make an account and its organization.')}
+      description={invited ? t('auth.signUpInvitedDescription', 'Make an account with the email address the invitation was sent to.') : t('auth.signUpDescription', 'Make an account.')}
     >
       <form className="grid gap-4" noValidate onSubmit={submit}>
         {box('name', t('auth.name', 'Name'), { autoComplete: 'name', onChange: (event) => setName(event.target.value), type: 'text', value: name })}
-        {invited ? null : box('organization', t('auth.organization', 'Organization'), { autoComplete: 'organization', onChange: (event) => setOrganization(event.target.value), type: 'text', value: organization })}
         {box('email', t('auth.email', 'Email'), { autoComplete: 'email', onChange: (event) => setEmail(event.target.value), type: 'email', value: email })}
-        {box('password', t('auth.password', 'Password'), {
+        {verifies ? null : box('password', t('auth.password', 'Password'), {
           autoComplete: 'new-password',
           description: t('auth.passwordRule', 'At least {count} characters.')!.replace('{count}', String(bounds.min)),
           onChange: (event) => setPassword(event.target.value),
           type: 'password',
           value: password,
         })}
-        {box('confirmation', t('auth.confirmPassword', 'Confirm the password'), {
+        {verifies ? null : box('confirmation', t('auth.confirmPassword', 'Confirm the password'), {
           autoComplete: 'new-password',
           onChange: (event) => setConfirmation(event.target.value),
           type: 'password',
@@ -111,12 +137,7 @@ function SignUp() {
           {pending ? t('auth.signUpPending', 'Signing up…') : t('auth.signUp', 'Sign up')}
         </Button>
       </form>
-      <p className="mt-4 text-center text-sm text-muted-foreground">
-        {t('auth.haveAccount', 'Already have an account?')}{' '}
-        <Link className="text-primary underline underline-offset-4" to="/auth/sign-in" search={{ redirect: search.redirect }}>
-          {t('auth.signIn', 'Sign in')}
-        </Link>
-      </p>
+      {toSignIn}
     </AuthFrame>
   )
 }