Sign-in & onboarding

Complete sign-in, sign-up, and post-auth pages plus trigger buttons.

Ready-made auth surfaces: full pages, forms, social buttons, trigger buttons, and client screens — all wired to the client and themeable via Theming.

Auth forms

AuthSignInForm and AuthSignUpForm render standalone — they take values and callbacks as props, so they work in any React tree:

// Docs builds run before package builds, so previews import the component
// source rather than the @vortex-api/convex-auth dist exports.
import { AuthSignInForm } from "../../packages/auth/src/react/auth-forms";

export default function SignInFormPreview() {
  return (
    <AuthSignInForm
      providers={[
        { id: "google", label: "Google" },
        { id: "github", label: "GitHub" },
        { id: "discord", label: "Discord" },
      ]}
      onProviderSelect={() => {}}
      onSubmit={() => {}}
      forgotPasswordHref="#"
    />
  );
}

// Docs builds run before package builds, so previews import the component
// source rather than the @vortex-api/convex-auth dist exports.
import { AuthSignUpForm } from "../../packages/auth/src/react/auth-forms";

export default function SignUpFormPreview() {
  return (
    <AuthSignUpForm
      providers={[{ id: "google", label: "Google" }]}
      onProviderSelect={() => {}}
      onSubmit={() => {}}
    />
  );
}

`AuthProviderButtons`

Props

Name	Type	Optional
`className`	`string`	Yes
`isSubmitting`	`boolean`	Yes
`onSelect`	`(providerId: string) => void \| Promise<void>`	No
`providerButtonClassName`	`string`	Yes
`providers`	`readonly AuthProviderOption[]`	No

`AuthSignInForm`

Props

`AuthSignUpForm`

Props

Auth pages

`ConvexAuthAcceptInvitePage`

Props

Name	Type	Optional
`buildSignUpUrl`	`() => string`	No
`description`	`string`	Yes
`eyebrow`	`string`	Yes
`getInvitationEmail`	`(invitationToken: string, params: URLSearchParams) => Promise<string \| None>`	Yes
`inviteOpenFailureError`	`string`	Yes
`inviteRecoveryError`	`string`	Yes
`inviteRetryFailureError`	`string`	Yes
`loadingDescription`	`string`	Yes
`loadingTitle`	`string`	Yes
`onException`	`(event: ConvexAuthInviteExceptionEvent) => void`	Yes
`onFailed`	`(event: ConvexAuthInviteFailureEvent) => void`	Yes
`onOpened`	`(event: ConvexAuthInviteOpenedEvent) => void`	Yes
`onRedirected`	`(event: ConvexAuthInviteRedirectedEvent) => void`	Yes
`postSignUpPath`	`string`	No
`redirectToSignIn`	`(options: __type) => void \| Promise<void>`	No
`signInPath`	`string`	No
`signUpPath`	`string`	No
`title`	`string`	Yes
`toSafeRedirectPath`	`(url: string) => string \| undefined`	Yes
`unavailableTitle`	`string`	Yes

`ConvexAuthActionButton`

No props.

`ConvexAuthLoadingCard`

No props.

`ConvexAuthOrganizationChooserPage`

Props

Name	Type	Optional
`currentLabel`	`string`	Yes
`currentOrganization`	`ConvexAuthCurrentOrganization \| None`	Yes
`description`	`string`	Yes
`emptyDescription`	`string`	Yes
`emptyTitle`	`string`	Yes
`eyebrow`	`string`	Yes
`loadingDescription`	`string`	Yes
`loadingTitle`	`string`	Yes
`onSelectOrganization`	`(organization: ConvexAuthOrganizationChooserItem) => Promise<void>`	No
`organizations`	`readonly ConvexAuthOrganizationChooserItem[] \| undefined`	No
`pendingLabel`	`string`	Yes
`selectErrorDescription`	`string`	Yes
`selectErrorTitle`	`string`	Yes
`title`	`string`	Yes

`ConvexAuthPostSignUpPage`

Props

Name	Type	Optional
`availableOrganizations`	`readonly SelectableOrganization[] \| None \| undefined`	No
`currentOrganization`	`unknown`	No
`description`	`string`	Yes
`ensureActiveOrganization`	`() => Promise<unknown>`	No
`eyebrow`	`string`	Yes
`invitationToken`	`string \| None`	No
`loadingTitle`	`string`	Yes
`onCurrentOrganizationReady`	`() => void`	No
`onOpenOrganizationSetup`	`() => void \| Promise<void>`	No
`onRefresh`	`() => void`	Yes
`openOrganizationSetupLabel`	`string`	Yes
`redeemInvitation`	`(token: string) => Promise<unknown>`	No
`refreshLabel`	`string`	Yes
`timedOutDescription`	`string`	Yes
`timedOutTitle`	`string`	Yes
`timeoutMs`	`number`	Yes
`title`	`string`	Yes

`ConvexAuthSignInPage`

Props

`ConvexAuthSignUpPage`

Props

`ConvexAuthSurface`

Props

Name	Type	Optional
`children`	`ReactNode`	No
`className`	`string`	Yes
`classNames`	`ConvexAuthSurfaceClassNames`	Yes
`description`	`string`	No
`eyebrow`	`string`	Yes
`features`	`readonly ConvexAuthSurfaceFeature[]`	Yes
`footer`	`ReactNode`	Yes
`sidebarBody`	`string`	Yes
`sidebarTitle`	`string`	Yes
`title`	`string`	No

classNames keys

Key	Type
`description`	`string`
`eyebrow`	`string`
`grid`	`string`
`header`	`string`
`main`	`string`
`mainInner`	`string`
`root`	`string`
`sidebar`	`string`
`sidebarBody`	`string`
`sidebarFooter`	`string`
`sidebarTitle`	`string`
`title`	`string`

`ConvexAuthUnavailableCard`

No props.

Auth trigger buttons

`ConvexAuthSignInButton`

Props

Name	Type	Optional
`children`	`ReactNode`	Yes
`redirectToSignIn`	`() => void \| Promise<void>`	No
`variant`	`primary \| secondary`	Yes

`ConvexAuthSignOutButton`

Props

Name	Type	Optional
`children`	`ReactNode`	Yes
`signOut`	`() => void \| Promise<void>`	No
`variant`	`primary \| secondary`	Yes

`ConvexAuthSignUpButton`

Props

Name	Type	Optional
`children`	`ReactNode`	Yes
`redirectToSignUp`	`() => void \| Promise<void>`	No
`variant`	`primary \| secondary`	Yes

Client screens

`ConvexAuthClientSignInScreen`

Props

Name	Type	Optional	Description
`authClient`	`ConvexAuthClient \| None`	Yes
`classNames`	`AuthFormClassNames`	Yes
`description`	`string`	Yes
`forceRedirectUrl`	`string`	No
`forgotPasswordHref`	`string`	Yes	When set, AuthSignInForm renders a forgot-password link to this href.
`signUpUrl`	`string`	No
`socialProviders`	`readonly ConvexAuthSocialProvider[]`	Yes
`title`	`string`	Yes

classNames keys

Key	Type
`alert`	`string`
`card`	`string`
`content`	`string`
`description`	`string`
`divider`	`string`
`field`	`string`
`footer`	`string`
`header`	`string`
`input`	`string`
`label`	`string`
`link`	`string`
`primaryButton`	`string`
`providerButton`	`string`
`providers`	`string`
`secondaryButton`	`string`
`title`	`string`

`ConvexAuthClientSignUpScreen`

Props

Name	Type	Optional
`authClient`	`ConvexAuthClient \| None`	Yes
`classNames`	`AuthFormClassNames`	Yes
`description`	`string`	Yes
`forceRedirectUrl`	`string`	No
`signInUrl`	`string`	No
`socialProviders`	`readonly ConvexAuthSocialProvider[]`	Yes
`title`	`string`	Yes

classNames keys

Key	Type
`alert`	`string`
`card`	`string`
`content`	`string`
`description`	`string`
`divider`	`string`
`field`	`string`
`footer`	`string`
`header`	`string`
`input`	`string`
`label`	`string`
`link`	`string`
`primaryButton`	`string`
`providerButton`	`string`
`providers`	`string`
`secondaryButton`	`string`
`title`	`string`