diff --git a/packages/oauth-provider/src/assets/app/backend-data.ts b/packages/oauth-provider/src/assets/app/backend-data.ts
index f98e7829f37..a163bb672f5 100644
--- a/packages/oauth-provider/src/assets/app/backend-data.ts
+++ b/packages/oauth-provider/src/assets/app/backend-data.ts
@@ -7,6 +7,12 @@ export type FieldDefinition = {
   title?: string
 }
 
+export type ExtraFieldDefinition = FieldDefinition & {
+  type: 'text' | 'password' | 'date' | 'captcha'
+  required?: boolean
+  [_: string]: unknown
+}
+
 export type LinkDefinition = {
   title: string
   href: string
@@ -24,6 +30,14 @@ export type CustomizationData = {
       remember?: FieldDefinition
     }
   }
+  signUp?: {
+    fields?: {
+      username?: FieldDefinition
+      password?: FieldDefinition
+      remember?: FieldDefinition
+    }
+    extraFields?: Record<string, ExtraFieldDefinition>
+  }
 }
 
 export type ErrorData = {
diff --git a/packages/oauth-provider/src/assets/app/components/help-card.tsx b/packages/oauth-provider/src/assets/app/components/help-card.tsx
new file mode 100644
index 00000000000..23c0434fd06
--- /dev/null
+++ b/packages/oauth-provider/src/assets/app/components/help-card.tsx
@@ -0,0 +1,42 @@
+import { HTMLAttributes } from 'react'
+import { LinkDefinition } from '../backend-data'
+import { clsx } from '../lib/clsx'
+
+export type HelpCardProps = {
+  links?: readonly LinkDefinition[]
+}
+
+export function HelpCard({
+  links,
+
+  className,
+  ...attrs
+}: HelpCardProps &
+  Omit<
+    HTMLAttributes<HTMLParagraphElement>,
+    keyof HelpCardProps | 'children'
+  >) {
+  const helpLink = links?.find((l) => l.rel === 'help')
+
+  if (!helpLink) return null
+
+  return (
+    <p
+      className={clsx(
+        'text-sm rounded-md bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-400 p-3',
+        className,
+      )}
+      {...attrs}
+    >
+      Having trouble?{' '}
+      <a
+        href={helpLink.href}
+        rel={helpLink.rel}
+        target="_blank"
+        className="text-primary"
+      >
+        Contact {helpLink.title}
+      </a>
+    </p>
+  )
+}
diff --git a/packages/oauth-provider/src/assets/app/components/sign-up-account-form.tsx b/packages/oauth-provider/src/assets/app/components/sign-up-account-form.tsx
new file mode 100644
index 00000000000..acd5cfac192
--- /dev/null
+++ b/packages/oauth-provider/src/assets/app/components/sign-up-account-form.tsx
@@ -0,0 +1,208 @@
+import {
+  FormHTMLAttributes,
+  ReactNode,
+  SyntheticEvent,
+  useCallback,
+  useState,
+} from 'react'
+
+import { clsx } from '../lib/clsx'
+import { ErrorCard } from './error-card'
+
+export type SignUpAccountFormOutput = {
+  username: string
+  password: string
+}
+
+export type SignUpAccountFormProps = {
+  onSubmit: (credentials: SignUpAccountFormOutput) => void | PromiseLike<void>
+  submitLabel?: ReactNode
+  submitAria?: string
+
+  onCancel?: () => void
+  cancelLabel?: ReactNode
+  cancelAria?: string
+
+  username?: string
+  usernamePlaceholder?: string
+  usernameLabel?: string
+  usernameAria?: string
+  usernamePattern?: string
+  usernameTitle?: string
+
+  passwordPlaceholder?: string
+  passwordLabel?: string
+  passwordAria?: string
+  passwordPattern?: string
+  passwordTitle?: string
+}
+
+export function SignUpAccountForm({
+  onSubmit,
+  submitAria = 'Next',
+  submitLabel = submitAria,
+
+  onCancel = undefined,
+  cancelAria = 'Cancel',
+  cancelLabel = cancelAria,
+
+  username: defaultUsername = '',
+  usernameLabel = 'Username',
+  usernameAria = usernameLabel,
+  usernamePlaceholder = usernameLabel,
+  usernamePattern,
+  usernameTitle,
+
+  passwordLabel = 'Password',
+  passwordAria = passwordLabel,
+  passwordPlaceholder = passwordLabel,
+  passwordPattern,
+  passwordTitle,
+
+  className,
+  children,
+  ...attrs
+}: SignUpAccountFormProps &
+  Omit<FormHTMLAttributes<HTMLFormElement>, keyof SignUpAccountFormProps>) {
+  const [loading, setLoading] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  const doSubmit = useCallback(
+    async (
+      event: SyntheticEvent<
+        HTMLFormElement & {
+          username: HTMLInputElement
+          password: HTMLInputElement
+        },
+        SubmitEvent
+      >,
+    ) => {
+      event.preventDefault()
+
+      const credentials = {
+        username: event.currentTarget.username.value,
+        password: event.currentTarget.password.value,
+      }
+
+      setLoading(true)
+      setErrorMessage(null)
+      try {
+        await onSubmit(credentials)
+      } catch (err) {
+        setErrorMessage(parseErrorMessage(err))
+      } finally {
+        setLoading(false)
+      }
+    },
+    [onSubmit, setErrorMessage, setLoading],
+  )
+
+  return (
+    <form
+      {...attrs}
+      className={clsx('flex flex-col', className)}
+      onSubmit={doSubmit}
+    >
+      <fieldset disabled={loading}>
+        <label className="text-sm font-medium" htmlFor="username">
+          {usernameLabel}
+        </label>
+
+        <div
+          id="username"
+          className="mb-4 relative p-1 flex flex-wrap items-center justify-stretch rounded-md border border-solid border-slate-200 dark:border-slate-700 text-neutral-700 dark:text-neutral-100"
+        >
+          <span className="w-8 text-center text-base leading-[1.6]">@</span>
+          <input
+            name="username"
+            type="text"
+            onChange={() => setErrorMessage(null)}
+            className="relative m-0 block w-[1px] min-w-0 flex-auto px-3 py-[0.25rem] leading-[1.6] bg-transparent bg-clip-padding text-base text-inherit outline-none dark:placeholder:text-neutral-100 disabled:text-gray-500"
+            placeholder={usernamePlaceholder}
+            aria-label={usernameAria}
+            autoCapitalize="none"
+            autoCorrect="off"
+            autoComplete="username"
+            spellCheck="false"
+            dir="auto"
+            enterKeyHint="next"
+            required
+            defaultValue={defaultUsername}
+            pattern={usernamePattern}
+            title={usernameTitle}
+          />
+        </div>
+
+        <label className="text-sm font-medium" htmlFor="password">
+          {passwordLabel}
+        </label>
+
+        <div
+          id="password"
+          className="mb-4 relative p-1 flex flex-wrap items-center justify-stretch rounded-md border border-solid border-slate-200 dark:border-slate-700 text-neutral-700 dark:text-neutral-100"
+        >
+          <span className="w-8 text-center text-2xl leading-[1.6]">*</span>
+          <input
+            name="password"
+            type="password"
+            onChange={() => setErrorMessage(null)}
+            className="relative m-0 block w-[1px] min-w-0 flex-auto px-3 py-[0.25rem] leading-[1.6] bg-transparent bg-clip-padding text-base text-inherit outline-none dark:placeholder:text-neutral-100"
+            placeholder={passwordPlaceholder}
+            aria-label={passwordAria}
+            autoCapitalize="none"
+            autoCorrect="off"
+            autoComplete="new-password"
+            dir="auto"
+            enterKeyHint="done"
+            spellCheck="false"
+            required
+            pattern={passwordPattern}
+            title={passwordTitle}
+          />
+        </div>
+      </fieldset>
+
+      {children && <div className="mt-4">{children}</div>}
+
+      {errorMessage && <ErrorCard className="mt-2" message={errorMessage} />}
+
+      <div className="flex-auto"></div>
+
+      <div className="p-4 flex flex-wrap items-center justify-start">
+        <button
+          className="py-2 bg-transparent text-primary rounded-md font-semibold order-last"
+          type="submit"
+          role="Button"
+          aria-label={submitAria}
+          disabled={loading}
+        >
+          {submitLabel}
+        </button>
+
+        {onCancel && (
+          <button
+            className="py-2 bg-transparent text-primary rounded-md font-light"
+            type="button"
+            role="Button"
+            aria-label={cancelAria}
+            onClick={onCancel}
+          >
+            {cancelLabel}
+          </button>
+        )}
+
+        <div className="flex-auto" />
+      </div>
+    </form>
+  )
+}
+
+function parseErrorMessage(err: unknown): string {
+  switch ((err as any)?.message) {
+    case 'Invalid credentials':
+      return 'Invalid username or password'
+    default:
+      console.error(err)
+      return 'An unknown error occurred'
+  }
+}
diff --git a/packages/oauth-provider/src/assets/app/components/sign-up-disclaimer.tsx b/packages/oauth-provider/src/assets/app/components/sign-up-disclaimer.tsx
new file mode 100644
index 00000000000..0acc39f6fa8
--- /dev/null
+++ b/packages/oauth-provider/src/assets/app/components/sign-up-disclaimer.tsx
@@ -0,0 +1,44 @@
+import { HTMLAttributes } from 'react'
+import { LinkDefinition } from '../backend-data'
+import { clsx } from '../lib/clsx'
+
+export type SignUpDisclaimerProps = {
+  links?: readonly LinkDefinition[]
+}
+
+export function SignUpDisclaimer({
+  links,
+
+  className,
+  ...attrs
+}: SignUpDisclaimerProps &
+  Omit<
+    HTMLAttributes<HTMLParagraphElement>,
+    keyof SignUpDisclaimerProps | 'children'
+  >) {
+  const relevantLinks = links?.filter(
+    (l) => l.rel === 'privacy-policy' || l.rel === 'terms-of-service',
+  )
+
+  return (
+    <p className={clsx('text-sm text-slate-500', className)} {...attrs}>
+      By creating an account you agree to the{' '}
+      {relevantLinks && relevantLinks.length
+        ? relevantLinks.map((l, i, a) => (
+            <span key={i}>
+              {i > 0 && (i < a.length - 1 ? ', ' : ' and ')}
+              <a
+                href={l.href}
+                rel={l.rel}
+                target="_blank"
+                className="text-primary underline"
+              >
+                {l.title}
+              </a>
+            </span>
+          ))
+        : 'Terms of Service and Privacy Policy'}
+      .
+    </p>
+  )
+}
diff --git a/packages/oauth-provider/src/assets/app/hooks/use-api.ts b/packages/oauth-provider/src/assets/app/hooks/use-api.ts
index b93dd0afa4a..a83b1fb54bc 100644
--- a/packages/oauth-provider/src/assets/app/hooks/use-api.ts
+++ b/packages/oauth-provider/src/assets/app/hooks/use-api.ts
@@ -12,6 +12,12 @@ export type SignInCredentials = {
   remember?: boolean
 }
 
+export type SignUpData = {
+  username: string
+  password: string
+  extra?: Record<string, string>
+}
+
 export function useApi(
   {
     clientId,
@@ -68,6 +74,14 @@ export function useApi(
     [api, performRedirect, clientId, setSessions],
   )
 
+  const doSignUp = useCallback(
+    (data: SignUpData) => {
+      //
+      console.error('SIGNUPPP', data, api)
+    },
+    [api],
+  )
+
   const doAccept = useCallback(
     async (account: Account) => {
       performRedirect(await api.accept(account))
@@ -84,6 +98,7 @@ export function useApi(
     setSession,
 
     doSignIn,
+    doSignUp,
     doAccept,
     doReject,
   }
diff --git a/packages/oauth-provider/src/assets/app/views/authorize-view.tsx b/packages/oauth-provider/src/assets/app/views/authorize-view.tsx
index eaa574ba49b..6534a656428 100644
--- a/packages/oauth-provider/src/assets/app/views/authorize-view.tsx
+++ b/packages/oauth-provider/src/assets/app/views/authorize-view.tsx
@@ -6,6 +6,7 @@ import { useApi } from '../hooks/use-api'
 import { useBoundDispatch } from '../hooks/use-bound-dispatch'
 import { AcceptView } from './accept-view'
 import { SignInView } from './sign-in-view'
+import { SignUpView } from './sign-up-view'
 import { WelcomeView } from './welcome-view'
 
 export type AuthorizeViewProps = {
@@ -19,19 +20,18 @@ export function AuthorizeView({
 }: AuthorizeViewProps) {
   const forceSignIn = authorizeData?.loginHint != null
 
-  const [view, setView] = useState<'welcome' | 'sign-in' | 'accept' | 'done'>(
-    forceSignIn ? 'sign-in' : 'welcome',
-  )
+  const [view, setView] = useState<
+    'welcome' | 'sign-in' | 'sign-up' | 'accept' | 'done'
+  >(forceSignIn ? 'sign-in' : 'welcome')
 
   const showDone = useBoundDispatch(setView, 'done')
   const showSignIn = useBoundDispatch(setView, 'sign-in')
+  const showSignUp = useBoundDispatch(setView, 'sign-up')
   const showAccept = useBoundDispatch(setView, 'accept')
   const showWelcome = useBoundDispatch(setView, 'welcome')
 
-  const { sessions, setSession, doAccept, doReject, doSignIn } = useApi(
-    authorizeData,
-    { onRedirected: showDone },
-  )
+  const { sessions, setSession, doAccept, doReject, doSignIn, doSignUp } =
+    useApi(authorizeData, { onRedirected: showDone })
 
   const session = sessions.find((s) => s.selected && !s.loginRequired)
   useEffect(() => {
@@ -48,12 +48,24 @@ export function AuthorizeView({
         logo={customizationData?.logo}
         links={customizationData?.links}
         onSignIn={showSignIn}
-        onSignUp={undefined}
+        onSignUp={showSignUp}
         onCancel={doReject}
       />
     )
   }
 
+  if (view === 'sign-up') {
+    return (
+      <SignUpView
+        links={customizationData?.links}
+        fields={customizationData?.signUp?.fields}
+        extraFields={customizationData?.signUp?.extraFields}
+        onSignUp={doSignUp}
+        onBack={showWelcome}
+      />
+    )
+  }
+
   if (view === 'sign-in') {
     return (
       <SignInView
diff --git a/packages/oauth-provider/src/assets/app/views/sign-up-view.tsx b/packages/oauth-provider/src/assets/app/views/sign-up-view.tsx
new file mode 100644
index 00000000000..a1690481ead
--- /dev/null
+++ b/packages/oauth-provider/src/assets/app/views/sign-up-view.tsx
@@ -0,0 +1,131 @@
+import { ReactNode, useCallback, useEffect, useState } from 'react'
+
+import {
+  ExtraFieldDefinition,
+  FieldDefinition,
+  LinkDefinition,
+} from '../backend-data'
+import { HelpCard } from '../components/help-card'
+import { LayoutTitlePage } from '../components/layout-title-page'
+import {
+  SignUpAccountForm,
+  SignUpAccountFormOutput,
+} from '../components/sign-up-account-form'
+import { SignUpDisclaimer } from '../components/sign-up-disclaimer'
+import { upsert } from '../lib/util'
+
+export type SignUpViewProps = {
+  stepName?: (step: number, total: number) => ReactNode
+  stepTitle?: (step: number, total: number) => ReactNode
+
+  links?: LinkDefinition[]
+  fields?: {
+    username?: FieldDefinition
+    password?: FieldDefinition
+  }
+  extraFields?: Record<string, ExtraFieldDefinition>
+  onSignUp: (data: {
+    username: string
+    password: string
+    extra?: Record<string, string>
+  }) => void | PromiseLike<void>
+  onBack?: () => void
+}
+
+const defaultStepName: NonNullable<SignUpViewProps['stepName']> = (
+  step,
+  total,
+) => `Step ${step} of ${total}`
+const defaultStepTitle: NonNullable<SignUpViewProps['stepTitle']> = (
+  step,
+  total,
+) => {
+  switch (step) {
+    case 1:
+      return 'Your account'
+    default:
+      return null
+  }
+}
+
+export function SignUpView({
+  stepName = defaultStepName,
+  stepTitle = defaultStepTitle,
+
+  links,
+  fields,
+  extraFields,
+
+  onSignUp,
+  onBack,
+}: SignUpViewProps) {
+  const [_credentials, setCredentials] =
+    useState<null | SignUpAccountFormOutput>(null)
+  const [step, setStep] = useState<1 | 2>(1)
+
+  const [extraFieldsEntries, setExtraFieldsEntries] = useState(
+    extraFields != null ? Object.entries(extraFields) : [],
+  )
+
+  const hasExtraFields = extraFieldsEntries.length > 0
+  const stepCount = hasExtraFields ? 2 : 1
+
+  const doSubmitAccount = useCallback(
+    (credentials: SignUpAccountFormOutput) => {
+      setCredentials(credentials)
+      if (hasExtraFields) {
+        setStep(2)
+      } else {
+        onSignUp(credentials)
+      }
+    },
+    [hasExtraFields, onSignUp, setCredentials, setStep],
+  )
+
+  useEffect(() => {
+    let ef = extraFieldsEntries
+    for (const entry of extraFields != null
+      ? Object.entries(extraFields)
+      : []) {
+      ef = upsert(ef || [], entry, (a) => a[0] === entry[0])
+    }
+    if (ef !== extraFieldsEntries) setExtraFieldsEntries(ef)
+  }, [extraFields])
+
+  return (
+    <LayoutTitlePage
+      title="Create Account"
+      subtitle="We're so excited to have you join us!"
+    >
+      <div className="max-w-lg w-full flex flex-col">
+        <p className="mt-4 text-slate-400 dark:text-slate-600">
+          {stepName(step, stepCount)}
+        </p>
+        <h2 className="font-medium text-xl mb-4">
+          {stepTitle(step, stepCount)}
+        </h2>
+
+        {step === 1 && (
+          <SignUpAccountForm
+            className="flex-grow"
+            onSubmit={doSubmitAccount}
+            onCancel={onBack}
+            cancelLabel="Back"
+            usernameLabel={fields?.username?.label}
+            usernamePlaceholder={fields?.username?.placeholder}
+            usernamePattern={fields?.username?.pattern}
+            usernameTitle={fields?.username?.title}
+            passwordLabel={fields?.password?.label}
+            passwordPlaceholder={fields?.password?.placeholder}
+            passwordPattern={fields?.password?.pattern}
+            passwordTitle={fields?.password?.title}
+          >
+            <SignUpDisclaimer links={links} />
+          </SignUpAccountForm>
+        )}
+
+        <HelpCard links={links} />
+      </div>
+    </LayoutTitlePage>
+  )
+}
diff --git a/packages/oauth-provider/src/output/customization.ts b/packages/oauth-provider/src/output/customization.ts
index 8265019779d..56c1ca806a4 100644
--- a/packages/oauth-provider/src/output/customization.ts
+++ b/packages/oauth-provider/src/output/customization.ts
@@ -11,6 +11,12 @@ export type FieldDefinition = {
   title?: string
 }
 
+export type ExtraFieldDefinition = FieldDefinition & {
+  type: 'text' | 'password' | 'date' | 'captcha'
+  required?: boolean
+  [_: string]: unknown
+}
+
 export type Customization = {
   name?: string
   logo?: string
@@ -28,6 +34,16 @@ export type Customization = {
       remember?: FieldDefinition
     }
   }
+
+  signUp?:
+    | false
+    | {
+        fields?: {
+          username?: FieldDefinition
+          password?: FieldDefinition
+        }
+        extraFields?: Record<string, ExtraFieldDefinition>
+      }
 }
 
 export function buildCustomizationData({
@@ -35,12 +51,14 @@ export function buildCustomizationData({
   logo,
   links,
   signIn,
+  signUp = false,
 }: Customization = {}) {
   return {
     name,
     logo,
     links,
     signIn,
+    signUp: signUp || undefined,
   }
 }
 
diff --git a/packages/pds/src/config/config.ts b/packages/pds/src/config/config.ts
index a43947cdd30..1e60215c6a2 100644
--- a/packages/pds/src/config/config.ts
+++ b/packages/pds/src/config/config.ts
@@ -286,6 +286,46 @@ export const envToCfg = (env: ServerEnvironment): ServerConfig => {
                 password: {},
               },
             },
+            signUp: {
+              fields: {
+                username: {
+                  label: 'Email address',
+                  placeholder: 'Enter your email address',
+                  pattern:
+                    '[a-zA-Z0-9._%+\\-]+@[a-zA-Z0-9.\\-]+\\.[a-zA-Z]{2,}',
+                  title: 'Must be a valid email address',
+                },
+                password: {
+                  pattern:
+                    '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^0-9a-zA-Z]).{8,}',
+                  title:
+                    'Must contain at least one uppercase, one lowercase, one number, and one special character, and be at least 8 characters long',
+                },
+              },
+              extraFields: {
+                handle: {
+                  label: 'Enter your user handle',
+                  placeholder: 'e.g. alice',
+                  type: 'text' as const,
+                  pattern: '[a-z0-9-]{3,20}',
+                },
+                birthdate: {
+                  label: 'Birth date',
+                  type: 'date' as const,
+                  required: true,
+                },
+                inviteCode: {
+                  label: 'Invite Code',
+                  type: 'text' as const,
+                  required: invitesCfg.required,
+                },
+                captcha: {
+                  label: 'Are you human?',
+                  type: 'captcha' as const,
+                  required: true,
+                },
+              },
+            },
           },
         },
       }