---
title: Sign-in & onboarding
description: 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](/convex-auth/theming).

## Auth forms

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

<Component path="sign-in-form" />

<Component path="sign-up-form" />

### `AuthProviderButtons`

**Props**

| Name                      | Type                                            | Optional | Description |
| ------------------------- | ----------------------------------------------- | -------- | ----------- |
| `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 | Description |
| ------------------------- | ------------------------------------------------------------------------------- | -------- | ----------- |
| `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 | Description |
| ------------------------ | -------------------------------------------------------------------- | -------- | ----------- |
| `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 | Description |
| ---------------------------- | -------------------------------------------------------- | -------- | ----------- |
| `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 | Description |
| ------------------ | ----------------------------- | -------- | ----------- |
| `children`         | `ReactNode`                   | Yes      |             |
| `redirectToSignIn` | `() => void \| Promise<void>` | No       |             |
| `variant`          | `primary \| secondary`        | Yes      |             |

### `ConvexAuthSignOutButton`

**Props**

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

### `ConvexAuthSignUpButton`

**Props**

| Name               | Type                          | Optional | Description |
| ------------------ | ----------------------------- | -------- | ----------- |
| `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 | Description |
| ------------------ | ------------------------------------- | -------- | ----------- |
| `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` |