### Setup Server Plugin

Source: https://better-auth-ui.com/docs/heroui/plugins/passkey

Install the `@better-auth/passkey` package and add the `passkey()` plugin to your Better Auth server configuration.

```typescript
import { betterAuth } from "better-auth"
import { passkey } from "@better-auth/passkey"

export const auth = betterAuth({
  // ...
  plugins: [
    passkey() 
  ]
})
```

--------------------------------

### Client Setup: Install Magic Link Client Plugin

Source: https://better-auth-ui.com/docs/heroui/plugins/magic-link

Integrate the magicLinkClient() into your auth client to enable the `authClient.signIn.magicLink` functionality.

```typescript
import { createAuthClient } from "better-auth/react"
import { magicLinkClient } from "better-auth/client/plugins"

export const authClient = createAuthClient({
  plugins: [magicLinkClient()]
})
```

--------------------------------

### Install Theme UI Plugin

Source: https://better-auth-ui.com/docs/shadcn/plugins/theme

Run this command to install the theme plugin components using the shadcn CLI.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/theme.json
```

--------------------------------

### Install Optional Settings and User Button Components

Source: https://better-auth-ui.com/docs/shadcn

Run this command to install the settings page and user button components separately if needed.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/settings.json https://better-auth-ui.com/r/user-button.json
```

--------------------------------

### Setup Better Auth Client with Multi Session Plugin

Source: https://better-auth-ui.com/docs/heroui/plugins/multi-session

Install the matching client plugin for Better Auth to make `authClient.multiSession.*` methods available. This is required for client-side multi-session operations.

```typescript
import { createAuthClient } from "better-auth/react"
import { multiSessionClient } from "better-auth/client/plugins"

export const authClient = createAuthClient({
  plugins: [multiSessionClient()]
})
```

--------------------------------

### Install Magic Link UI Components

Source: https://better-auth-ui.com/docs/shadcn/plugins/magic-link

Use the shadcn CLI to install the necessary UI components and the magic-link plugin factory.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/magic-link.json
```

--------------------------------

### Install Auth Component using shadcn-ui

Source: https://better-auth-ui.com/docs/shadcn/components/auth/auth

Provides the command to install the Auth component using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/auth.json
```

--------------------------------

### Install Sign In Component

Source: https://better-auth-ui.com/docs/shadcn/components/auth/sign-in

Command to install the Sign In component using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/sign-in.json
```

--------------------------------

### Install UserProfile Component

Source: https://better-auth-ui.com/docs/shadcn/components/settings/account/user-profile

Provides the command to install the UserProfile component using npm.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/user-profile.json
```

--------------------------------

### Install UI Plugin with shadcn CLI

Source: https://better-auth-ui.com/docs/shadcn/plugins/passkey

Use the shadcn CLI to install the passkey button, passkey management card, and the `passkeyPlugin()` factory.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/passkey.json
```

--------------------------------

### Install Better Auth Passkey Plugin

Source: https://better-auth-ui.com/docs/shadcn/plugins/passkey

Install the `@better-auth/passkey` package and add it to your Better Auth server configuration.

```typescript
import { betterAuth } from "better-auth"
import { passkey } from "@better-auth/passkey"

export const auth = betterAuth({
  // ...
  plugins: [
    passkey()
  ]
})
```

--------------------------------

### Install UserView Component

Source: https://better-auth-ui.com/docs/shadcn/components/user/user-view

Install the UserView component using the shadcn-ui CLI. This command fetches the necessary files for the component.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/user-view.json
```

--------------------------------

### Install UserButton Component

Source: https://better-auth-ui.com/docs/shadcn/components/user/user-button

Install the UserButton component using the shadcn-ui CLI. This command fetches the necessary files for the component.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/user-button.json
```

--------------------------------

### Install Sign Up Component

Source: https://better-auth-ui.com/docs/shadcn/components/auth/sign-up

Use this command to add the Sign Up component to your project using npx. This command fetches the necessary files from the specified URL.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/sign-up.json
```

--------------------------------

### Install NewDeviceEmail Component

Source: https://better-auth-ui.com/docs/shadcn/components/email/new-device-email

Installs the NewDeviceEmail component using the shadcn-ui CLI. This command fetches the necessary files to integrate the component into your project.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/new-device-email.json
```

--------------------------------

### Customize QueryClient for SSR in TanStack Start

Source: https://better-auth-ui.com/docs/react/ssr

Create and configure a fresh QueryClient within your router factory for each SSR request. This example sets a 5-second staleTime for queries, ensuring repeat navigations within this window skip network requests.

```typescript
import { QueryClient } from "@tanstack/react-query"
import { createRouter } from "@tanstack/react-router"
import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query"

import { routeTree } from "./routeTree.gen"

export const getRouter = () => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 5000
      }
    }
  })

  const router = createRouter({
    routeTree,
    scrollRestoration: true,
    defaultPreloadStaleTime: 0,
    context: { queryClient }
  })

  setupRouterSsrQueryIntegration({
    router,
    queryClient
  })

  return router
}
```

--------------------------------

### Install Matching Client Plugin

Source: https://better-auth-ui.com/docs/shadcn/plugins/passkey

Add `passkeyClient()` to your auth client to make `authClient.signIn.passkey` and `authClient.passkey.*` available.

```typescript
import { createAuthClient } from "better-auth/react"
import { passkeyClient } from "@better-auth/passkey/client"

export const authClient = createAuthClient({
  plugins: [passkeyClient()]
})
```

--------------------------------

### Setup Client Plugin

Source: https://better-auth-ui.com/docs/heroui/plugins/passkey

Add `passkeyClient()` to your auth client configuration to enable `authClient.signIn.passkey` and `authClient.passkey.*` functionalities.

```typescript
import { createAuthClient } from "better-auth/react"
import { passkeyClient } from "@better-auth/passkey/client"

export const authClient = createAuthClient({
  plugins: [passkeyClient()] 
})
```

--------------------------------

### Install OTP Email Component

Source: https://better-auth-ui.com/docs/shadcn/components/email/otp-email

Installs the OtpEmail component using shadcn-ui. This command adds the necessary files to your project.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/otp-email.json
```

--------------------------------

### Install Account Settings Component

Source: https://better-auth-ui.com/docs/shadcn/components/settings/account/account-settings

Use this command to add the AccountSettings component to your project. This command fetches the necessary files from the provided URL.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/account-settings.json
```

--------------------------------

### Install HeroUI Libraries

Source: https://better-auth-ui.com/docs/heroui

Install the necessary Better Auth UI libraries for HeroUI using npm. Ensure you have the latest versions.

```bash
npm install @better-auth-ui/heroui@latest @better-auth-ui/react@latest @better-auth-ui/core@latest
```

--------------------------------

### Install Multi Session UI Plugin

Source: https://better-auth-ui.com/docs/shadcn/plugins/multi-session

Use the shadcn CLI to install the multi-session management components and the `multiSessionPlugin()` factory into your project. This command adds necessary files to your codebase.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/multi-session.json
```

--------------------------------

### Install React Query

Source: https://better-auth-ui.com/docs/react

Install the TanStack React Query library, a prerequisite for using Better Auth UI's React hooks.

```bash
npm install @tanstack/react-query
```

--------------------------------

### Install Shadcn UI Plugin for Delete User

Source: https://better-auth-ui.com/docs/shadcn/plugins/delete-user

Run the shadcn CLI to install the danger zone card and the deleteUserPlugin() factory into your project.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/delete-user.json
```

--------------------------------

### Install Passkeys Component

Source: https://better-auth-ui.com/docs/shadcn/components/settings/security/passkeys

Use this command to add the Passkeys component to your project. This command fetches the necessary files from the specified URL.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/passkeys.json
```

--------------------------------

### Install Forgot Password Component

Source: https://better-auth-ui.com/docs/shadcn/components/auth/forgot-password

Provides the command to install the Forgot Password component using npm.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/forgot-password.json
```

--------------------------------

### Basic Sign In Component Usage

Source: https://better-auth-ui.com/docs/heroui/components/auth/sign-in

Demonstrates how to import and render the basic Sign In component. Ensure you have installed the necessary package.

```javascript
import { SignIn } from "@better-auth-ui/heroui"

export function SignInDemo() {
  return <SignIn />
}
```

--------------------------------

### AuthProvider Usage Example

Source: https://better-auth-ui.com/docs/heroui/components/auth-provider

Demonstrates how to set up the AuthProvider with essential configurations like authClient, redirection paths, social providers, and additional fields. It also shows how to integrate various plugins for enhanced functionality.

```typescript
import { AuthProvider } from "@better-auth-ui/heroui"
import {
  deleteUserPlugin,
  multiSessionPlugin,
  themePlugin,
  usernamePlugin
} from "@better-auth-ui/heroui/plugins"
import { Toast } from "@heroui/react"
import { useNavigate } from "@tanstack/react-router"
import { ThemeProvider, useTheme } from "next-themes"
import type { ReactNode } from "react"

import { authClient } from "@/lib/auth-client"

export function Providers({ children }: { children: ReactNode }) {
  const navigate = useNavigate()

  return (
    <ThemeProvider defaultTheme="system" enableSystem disableTransitionOnChange>
      <AuthProvider
        authClient={authClient}
        redirectTo="/settings/account"
        socialProviders={["github"]}
        navigate={navigate}
        additionalFields={[
          {
            name: "birthday",
            type: "date",
            label: "Birthday",
            signUp: true
          }
        ]}
        plugins={[
          deleteUserPlugin(),
          multiSessionPlugin(),
          themePlugin({ useTheme }),
          usernamePlugin({ isUsernameAvailable: true })
        ]}>
        {children}

        <Toast.Provider />
      </AuthProvider>
    </ThemeProvider>
  )
}
```

--------------------------------

### Install Settings Component

Source: https://better-auth-ui.com/docs/shadcn/components/settings/settings

Use this command to add the Settings component to your project. This command is compatible with npm, pnpm, yarn, and bun.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/settings.json
```

--------------------------------

### Install Sign Out Component

Source: https://better-auth-ui.com/docs/shadcn/components/auth/sign-out

Install the Sign Out component using the shadcn CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/sign-out.json
```

--------------------------------

### Install Delete User Server Plugin

Source: https://better-auth-ui.com/docs/heroui/plugins/delete-user

Install the `@better-auth/delete-user` package and add the `deleteUser()` plugin to your Better Auth server configuration.

```typescript
import { betterAuth } from "better-auth"
import { deleteUser } from "@better-auth/delete-user"

export const auth = betterAuth({
  // ...
  plugins: [
    deleteUser() 
  ]
})
```

--------------------------------

### Install ChangeEmail Component

Source: https://better-auth-ui.com/docs/shadcn/components/settings/account/change-email

Use this command to add the ChangeEmail component to your project using npm. This command fetches the component's configuration and installs it.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/change-email.json
```

--------------------------------

### Passkeys Component Usage Example

Source: https://better-auth-ui.com/docs/shadcn/components/settings/security/passkeys

Demonstrates how to integrate the Passkeys component within an AuthProvider. Ensure the passkeyPlugin is included in the plugins array and the authClient is properly configured.

```javascript
import { AuthProvider } from "@/components/auth/auth-provider"
import { Passkeys } from "@/components/auth/settings/security/passkeys"
import { passkeyPlugin } from "@/lib/auth/passkey-plugin"
import { authClient } from "@/lib/auth-client"

export function PasskeysDemo() {
  return (
    <AuthProvider
      authClient={authClient}
      navigate={() => {}}
      plugins={[passkeyPlugin()]}
      Link={(props) => (
        // biome-ignore lint/a11y/useValidAnchor: ignore
        <a {...props} href={undefined} />
      )}>
      <div className="w-full">
        <Passkeys />
      </div>
    </AuthProvider>
  )
}
```

--------------------------------

### Install Matching Client Plugin

Source: https://better-auth-ui.com/docs/shadcn/plugins/delete-user

Add deleteUserClient() to your auth client to make authClient.deleteUser.* available.

```typescript
import { createAuthClient } from "better-auth/react"
import { deleteUserClient } from "@better-auth/delete-user/client"

export const authClient = createAuthClient({
  plugins: [deleteUserClient()] 
})
```

--------------------------------

### Settings Component Usage Example

Source: https://better-auth-ui.com/docs/heroui/components/settings/settings

Demonstrates how to use the Settings component with the 'account' view. Ensure the component is imported from '@better-auth-ui/heroui'.

```javascript
import { Settings } from "@better-auth-ui/heroui"

export function SettingsDemo() {
  return (
    <div className="w-full">
      <Settings view="account" />
    </div>
  )
}
```

--------------------------------

### Install EmailChangedEmail Component using shadcn-ui

Source: https://better-auth-ui.com/docs/shadcn/components/email/email-changed-email

Provides the command to install the EmailChangedEmail component using the shadcn-ui CLI. This is the recommended way to add the component to your project.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/email-changed-email.json
```

--------------------------------

### Install Email Verification Email Component

Source: https://better-auth-ui.com/docs/shadcn/components/email/email-verification-email

Installs the email verification email component using the shadcn CLI. This command adds the necessary configuration and files to your project.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/email-verification-email.json
```

--------------------------------

### Install Better Auth UI Components

Source: https://better-auth-ui.com/auth/forgot-password

Add the necessary Better Auth UI components to your project using the shadcn command-line tool.

```bash
$bun x shadcn@latest add https://better-auth-ui.com/r/auth.json
```

--------------------------------

### Install SecuritySettings Component

Source: https://better-auth-ui.com/docs/shadcn/components/settings/security/security-settings

Use this command to add the SecuritySettings component to your project using npm, pnpm, yarn, or bun. This command fetches the component's JSON definition from the specified URL.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/security-settings.json
```

--------------------------------

### Add Better Auth UI Dependencies

Source: https://better-auth-ui.com/auth/forgot-password

Install the required Better Auth UI packages, including HeroUI and React integration, using Bun.

```bash
$bun add @better-auth-ui/heroui @better-auth-ui/react @better-auth-ui/core
```

--------------------------------

### Install ChangePassword Component

Source: https://better-auth-ui.com/docs/shadcn/components/settings/security/change-password

Command to add the ChangePassword component to your project using npm.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/change-password.json
```

--------------------------------

### Configure Username Plugin on Server

Source: https://better-auth-ui.com/docs/heroui/plugins/username

Install the `better-auth` package and add the username plugin to your Better Auth server configuration.

```typescript
import { betterAuth } from "better-auth"
import { username } from "better-auth/plugins"

export const auth = betterAuth({
  // ...
  plugins: [
    username() 
  ]
})
```

--------------------------------

### Install ResetPassword Component

Source: https://better-auth-ui.com/docs/shadcn/components/auth/reset-password

Use this command to add the ResetPassword component to your project via shadcn-ui.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/reset-password.json
```

--------------------------------

### Install SSR Integration for TanStack Router

Source: https://better-auth-ui.com/docs/react/ssr

Install the necessary packages for TanStack Router's SSR query integration. This package handles dehydrating the QueryClient on the server and rehydrating it on the client.

```bash
npm install @tanstack/react-query @tanstack/react-router-ssr-query
```

--------------------------------

### Install Linked Accounts Component

Source: https://better-auth-ui.com/docs/shadcn/components/settings/security/linked-accounts

Use the npx command to add the LinkedAccounts component to your project. This command fetches the necessary files from the specified JSON URL.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/linked-accounts.json
```

--------------------------------

### UI Setup: Register Magic Link UI Plugin

Source: https://better-auth-ui.com/docs/heroui/plugins/magic-link

Pass the magicLinkPlugin() to the <AuthProvider> component to register the Magic Link UI elements.

```typescript
import { AuthProvider } from "@better-auth-ui/heroui"
import { magicLinkPlugin } from "@better-auth-ui/heroui/plugins"

<AuthProvider
  authClient={authClient}
  navigate={navigate}
  plugins={[magicLinkPlugin()]} 
>
  {children}
</AuthProvider>
```

--------------------------------

### Install Delete User Client Plugin

Source: https://better-auth-ui.com/docs/heroui/plugins/delete-user

Add `deleteUserClient()` to your auth client configuration to enable `authClient.deleteUser.*` methods.

```typescript
import { createAuthClient } from "better-auth/react"
import { deleteUserClient } from "@better-auth/delete-user/client"

export const authClient = createAuthClient({
  plugins: [deleteUserClient()]
})
```

--------------------------------

### Install Reset Password Email Component

Source: https://better-auth-ui.com/docs/shadcn/components/email/reset-password-email

Use this command to add the Reset Password Email component to your project using npx.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/reset-password-email.json
```

--------------------------------

### useListPasskeys Hook Usage

Source: https://better-auth-ui.com/docs/react/queries/list-passkeys

Demonstrates basic usage of the `useListPasskeys` hook with and without React Query options. Ensure the `passkey` plugin is installed and cast `authClient` to `PasskeyAuthClient` for TypeScript.

```javascript
import {
  type PasskeyAuthClient,
  useAuth,
  useListPasskeys
} from "@better-auth-ui/react"

const { authClient } = useAuth()
const { data: passkeys } = useListPasskeys(
  authClient as PasskeyAuthClient
)

// With React Query options
const { data: passkeys } = useListPasskeys(
  authClient as PasskeyAuthClient,
  { refetchOnMount: false }
)
```

--------------------------------

### Setup Better Auth Server with Multi Session Plugin

Source: https://better-auth-ui.com/docs/heroui/plugins/multi-session

Add the Multi Session plugin to your Better Auth server configuration. This enables multi-session functionality on the server-side.

```typescript
import { betterAuth } from "better-auth"
import { multiSession } from "better-auth/plugins"

export const auth = betterAuth({
  // ...
  plugins: [
    multiSession()
  ]
})
```

--------------------------------

### Setting up AuthProvider with Plugins

Source: https://better-auth-ui.com/docs/shadcn/components/auth-provider

Demonstrates how to wrap your application with AuthProvider, configuring it with an auth client, redirect path, social providers, navigation, and various authentication plugins.

```jsx
import { Link, useNavigate } from "@tanstack/react-router"
import { ThemeProvider, useTheme } from "next-themes"
import type { ReactNode } from "react"
import { deleteUserPlugin } from "@/lib/auth/delete-user-plugin"
import { multiSessionPlugin } from "@/lib/auth/multi-session-plugin"
import { themePlugin } from "@/lib/auth/theme-plugin"
import { usernamePlugin } from "@/lib/auth/username-plugin"
import { authClient } from "@/lib/auth-client"
import { AuthProvider } from "./auth/auth-provider"
import { Toaster } from "./ui/sonner"

export function Providers({ children }: { children: ReactNode }) {
  const navigate = useNavigate()

  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      <AuthProvider
        authClient={authClient}
        redirectTo="/settings/account"
        socialProviders={["github"]}
        navigate={navigate}
        plugins={[
          deleteUserPlugin(),
          multiSessionPlugin(),
          themePlugin({ useTheme }),
          usernamePlugin({ isUsernameAvailable: true })
        ]}
        Link={Link}
      >
        {children}

        <Toaster />
      </AuthProvider>
    </ThemeProvider>
  )
}
```

--------------------------------

### Configure QueryClient Default Options

Source: https://better-auth-ui.com/docs/react/ssr

Tune the QueryClient's default options as you would in any TanStack Query application. This example demonstrates disabling refetch-on-window-focus globally and setting a 30-second staleTime.

```typescript
new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30_000,
      refetchOnWindowFocus: false
    }
  }
})
```

--------------------------------

### Install User Avatar Component

Source: https://better-auth-ui.com/docs/shadcn/components/user/user-avatar

Command to install the UserAvatar component using npm. This command adds the component's necessary files to your project.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/user-avatar.json
```

--------------------------------

### useAuthenticate Usage Example

Source: https://better-auth-ui.com/docs/react/queries/authenticate

This example shows how to use the `useAuthenticate` hook within a protected React component. It fetches session data and conditionally renders the component or a spinner based on the authentication state.

```jsx
import { useAuth, useAuthenticate } from "@better-auth-ui/react"

export function AccountPage() {
  const { authClient } = useAuth()
  const { data: session, isPending } = useAuthenticate(authClient)

  if (isPending) return <Spinner />
  if (!session) return null // navigating to sign-in

  return <Account user={session.user} />
```

--------------------------------

### useAccountInfo

Source: https://better-auth-ui.com/docs/react/queries

Hook to get provider-specific information for a linked account.

```APIDOC
### useAccountInfo

Provider-specific info for a linked account.
```

--------------------------------

### Use Options Factory with useQuery

Source: https://better-auth-ui.com/docs/react/queries/list-device-sessions

Shows how to use the `listDeviceSessionsOptions` factory with `useQuery` from `@tanstack/react-query`. This approach is useful for integrating with React Query's advanced features.

```javascript
import { listDeviceSessionsOptions } from "@better-auth-ui/react"
import { useQuery } from "@tanstack/react-query"

const { data: deviceSessions } = useQuery(
  listDeviceSessionsOptions(authClient, userId)
)
```

--------------------------------

### EmailVerificationEmail Component Usage

Source: https://better-auth-ui.com/docs/shadcn/components/email/email-verification-email

Example of how to use the EmailVerificationEmail component to render an email verification message.

```APIDOC
## EmailVerificationEmail Component

Email template component that sends email verification links to users.

### Usage

```javascript
import { EmailVerificationEmail } from "@better-auth-ui/react/email"
import { render } from "@react-email/render"

const html = await render(
  <EmailVerificationEmail
    url="https://better-auth-ui.com/auth/verify-email?token=example-token"
    appName="Better Auth UI"
    logoURL={{
      light: "/favicon-96x96.png",
      dark: "/favicon-96x96-inverted.png"
    }}
    email="user@example.com"
    expirationMinutes={60}
    darkMode={true}
    poweredBy={true}
  />
)
```

### Installation

```bash
npm install shadcn-ui
```

```bash
pnpm install shadcn-ui
```

```bash
yarn add shadcn-ui
```

```bash
bun add shadcn-ui
```

```bash
npx shadcn@latest add https://better-auth-ui.com/r/email-verification-email.json
```

### Props

| Prop |
| --- |
| `url` |
| `email?` |
| `appName?` |
| `expirationMinutes?` |
| `logoURL?` |
| `classNames?` |
| `colors?` |
| `poweredBy?` |
| `darkMode?` |
| `head?` |
| `localization?` |

| Type |
| --- |
| `string` |
| `string` |
| `string` |
| `number` |
| `string | { light: string; dark: string; }` |
| `EmailClassNames` |
| `EmailColors` |
| `boolean` |
| `boolean` |
| `ReactNode` |
| `EmailVerificationEmailLocalization` |

### Features

* Verification button and fallback URL
* Expiration time information
* Security notice for unauthorized requests
* Customizable branding and styling
* Support for light/dark mode themes
* Localization support
```

--------------------------------

### ResetPasswordEmail Component Usage

Source: https://better-auth-ui.com/docs/heroui/components/email/reset-password-email

Example of how to use the ResetPasswordEmail component to render a password reset email.

```APIDOC
## ResetPasswordEmail

Email template component that sends password reset links to users.

### Usage

```javascript
import { ResetPasswordEmail } from "@better-auth-ui/heroui/email"
import { render } from "@react-email/render"

const html = await render(
  <ResetPasswordEmail
    url="https://better-auth-ui.com/auth/reset-password?token=example-token"
    appName="Better Auth UI"
    logoURL={{
      light: "/favicon-96x96.png",
      dark: "/favicon-96x96-inverted.png"
    }}
    email="user@example.com"
    expirationMinutes={60}
    darkMode={true}
    poweredBy={true}
  />
)
```

### Props

| Prop | Type | Description |
|---|---|---|
| `url` | `string` | The URL for the password reset link. |
| `email?` | `string` | The user's email address. |
| `appName?` | `string` | The name of the application. |
| `expirationMinutes?` | `number` | The time in minutes until the reset link expires. |
| `logoURL?` | `string | { light: string; dark: string; }` | The URL for the application logo, supporting light and dark modes. |
| `classNames?` | `EmailClassNames` | Custom class names for styling. |
| `colors?` | `EmailColors` | Custom colors for the email theme. |
| `poweredBy?` | `boolean` | Whether to display the 'Powered by' section. Defaults to true. |
| `darkMode?` | `boolean` | Whether to render the email in dark mode. Defaults to false. |
| `head?` | `ReactNode` | Custom content for the email head. |
| `localization?` | `ResetPasswordEmailLocalization` | Localization object for email content. |

### Features

* Password reset button and fallback URL
* Expiration time information
* Security notice for unauthorized requests
* Customizable branding and styling
* Support for light/dark mode themes
* Localization support
```

--------------------------------

### Sign Up Component Usage

Source: https://better-auth-ui.com/docs/shadcn/components/auth/sign-up

Demonstrates how to import and use the SignUp component in a React application. Ensure the component is correctly imported from '@/components/auth/sign-up'.

```javascript
import { SignUp } from "@/components/auth/sign-up"

export function SignUpDemo() {
  return <SignUp />
}
```

--------------------------------

### EmailChangedEmail Component Usage

Source: https://better-auth-ui.com/docs/heroui/components/email/email-changed-email

Example of how to use the EmailChangedEmail component with various props to customize the email notification.

```APIDOC
## EmailChangedEmail Component

Email template component that notifies users when their email address has been changed.

### Usage

```javascript
import { EmailChangedEmail } from "@better-auth-ui/heroui/email"
import { render } from "@react-email/render"

const html = await render(
  <EmailChangedEmail
    oldEmail="old@example.com"
    newEmail="new@example.com"
    appName="Better Auth UI"
    logoURL={{
      light: "/favicon-96x96.png",
      dark: "/favicon-96x96-inverted.png"
    }}
    supportEmail="support@example.com"
    revertURL="https://better-auth-ui.com/revert-email"
    darkMode={true}
    poweredBy={true}
  />
)
```

### Props

| Prop | Type | Description |
|---|---|---|
| `oldEmail?` | `string` | The previous email address. |
| `newEmail?` | `string` | The new email address. |
| `revertURL?` | `string` | URL to revert the email change. |
| `appName?` | `string` | The name of the application. |
| `supportEmail?` | `string` | The support email address. |
| `logoURL?` | `string | { light: string; dark: string; }` | URL for the application logo, supporting light and dark modes. |
| `classNames?` | `EmailClassNames` | Custom class names for styling. |
| `colors?` | `EmailColors` | Custom colors for styling. |
| `poweredBy?` | `boolean` | Whether to display the "Powered by" section. |
| `darkMode?` | `boolean` | Whether to enable dark mode styling. |
| `head?` | `ReactNode` | Custom content for the email head. |
| `localization?` | `EmailChangedEmailLocalization` | Localization settings for the component. |

### Features

* Email change notification
* Shows previous and new email addresses
* Revert action button if unauthorized
* Support contact information
* Customizable branding and styling
* Support for light/dark mode themes
* Localization support
```

--------------------------------

### Passkeys Component Usage

Source: https://better-auth-ui.com/docs/heroui/components/settings/security/passkeys

Demonstrates how to integrate the Passkeys component within an AuthProvider. Ensure the passkeyPlugin is included in the plugins array. The authClient and navigate functions should be properly configured.

```javascript
import { AuthProvider } from "@better-auth-ui/heroui"
import { Passkeys, passkeyPlugin } from "@better-auth-ui/heroui/plugins"

import { authClient } from "@/lib/auth-client"

export function PasskeysDemo() {
  return (
    <AuthProvider
      authClient={authClient}
      navigate={() => {}}
      plugins={[passkeyPlugin()]}
    >
      <div className="w-full">
        <Passkeys />
      </div>
    </AuthProvider>
  )
}
```

--------------------------------

### Basic Sign Up Form Usage

Source: https://better-auth-ui.com/docs/heroui/components/auth/sign-up

Renders the default sign-up form. Ensure the component is imported from '@better-auth-ui/heroui'.

```javascript
import { SignUp } from "@better-auth-ui/heroui"

export function SignUpDemo() {
  return <SignUp />
}
```

--------------------------------

### Basic useSignUpEmail Usage

Source: https://better-auth-ui.com/docs/react/mutations/sign-up-email

Use this snippet to sign up a new user with their email, password, and name. It requires the authClient from useAuth and resets the session query on success.

```javascript
import { useAuth, useSignUpEmail } from "@better-auth-ui/react"

const { authClient } = useAuth()
const { mutate: signUpEmail } = useSignUpEmail(authClient)

signUpEmail({
  email: "alice@example.com",
  password: "hunter2",
  name: "Alice"
})
```

--------------------------------

### PasswordChangedEmail Component Usage

Source: https://better-auth-ui.com/docs/heroui/components/email/password-changed-email

Example of how to use the PasswordChangedEmail component with various props to customize the email content and appearance.

```APIDOC
## PasswordChangedEmail Component

Email template component that notifies users when their password has been changed.

### Usage

```javascript
import { PasswordChangedEmail } from "@better-auth-ui/heroui/email"
import { render } from "@react-email/render"

const html = await render(
  <PasswordChangedEmail
    email="user@example.com"
    timestamp="January 15, 2024 at 3:30 PM"
    appName="Better Auth UI"
    logoURL={{
      light: "/favicon-96x96.png",
      dark: "/favicon-96x96-inverted.png"
    }}
    supportEmail="support@example.com"
    secureAccountURL="https://better-auth-ui.com/secure-account"
    darkMode={true}
    poweredBy={true}
  />
)
```

### Props

| Prop | Type | Description |
|---|---|---|
| `email?` | `string` | The email address of the user. |
| `timestamp?` | `string` | The date and time when the password was changed. |
| `secureAccountURL?` | `string` | URL to a page where users can secure their account. |
| `appName?` | `string` | The name of the application. |
| `supportEmail?` | `string` | The support email address for assistance. |
| `logoURL?` | `string | { light: string; dark: string; }` | URL for the application logo, can be a single URL or an object for light and dark modes. |
| `classNames?` | `EmailClassNames` | Custom CSS class names for styling different parts of the email. |
| `colors?` | `EmailColors` | Custom color configurations for the email template. |
| `poweredBy?` | `boolean` | Whether to display the "Powered by" section. |
| `darkMode?` | `boolean` | Enables dark mode styling for the email. |
| `head?` | `ReactNode` | Custom content to be included in the email's head section. |
| `localization?` | `PasswordChangedEmailLocalization` | Object for localizing email content. |

### Features

*   Password change notification
*   Timestamp of the change
*   Security action button if unauthorized
*   Support contact information
*   Customizable branding and styling
*   Support for light/dark mode themes
*   Localization support
```

--------------------------------

### Render Magic Link Email - React

Source: https://better-auth-ui.com/docs/shadcn/components/email/magic-link-email

Renders the MagicLinkEmail component to an HTML string. Ensure you have the necessary dependencies installed.

```javascript
import { MagicLinkEmail } from "@better-auth-ui/react/email"
import { render } from "@react-email/render"

const html = await render(
  <MagicLinkEmail
    url="https://better-auth-ui.com/auth/verify?token=example-token"
    appName="Better Auth UI"
    logoURL={{
      light: "/favicon-96x96.png",
      dark: "/favicon-96x96-inverted.png"
    }}
    email="user@example.com"
    expirationMinutes={5}
    darkMode={true}
    poweredBy={true}
  />
)
```

--------------------------------

### useAddPasskey Hook Usage

Source: https://better-auth-ui.com/docs/react/mutations/add-passkey

This snippet demonstrates how to use the `useAddPasskey` hook to initiate the passkey registration process. It requires casting the `authClient` to `PasskeyAuthClient` to access plugin-extended methods.

```APIDOC
## useAddPasskey

Register a new passkey for the current user.
Prompts the WebAuthn ceremony then refetches the passkey list on success.

### Usage
```javascript
import {
  type PasskeyAuthClient,
  useAddPasskey,
  useAuth
} from "@better-auth-ui/react"

const { authClient } = useAuth()
const { mutate: addPasskey, isPending } = useAddPasskey(
  authClient as PasskeyAuthClient
)

addPasskey({ name: "MacBook Pro" })
```

`useAddPasskey` requires the Better Auth `passkey` plugin. Cast `authClient` to `PasskeyAuthClient` so TypeScript picks up the plugin-extended method signature.
```

--------------------------------

### Import and Use Sign In Component

Source: https://better-auth-ui.com/docs/shadcn/components/auth/sign-in

Demonstrates how to import and render the SignIn component in a React application.

```javascript
import { SignIn } from "@/components/auth/sign-in"

export function SignInDemo() {
  return <SignIn />
}
```

--------------------------------

### Use Shared Cache Keys from Core

Source: https://better-auth-ui.com/docs/react

Import and utilize shared query and mutation key factories from the `@better-auth-ui/core` package for cache management.

```javascript
import { authQueryKeys, authMutationKeys } from "@better-auth-ui/core"

queryClient.invalidateQueries({ queryKey: authQueryKeys.session })
useIsMutating({ mutationKey: authMutationKeys.signIn.all })
```

--------------------------------

### Set up QueryClient for Next.js SSR

Source: https://better-auth-ui.com/docs/heroui/integrations/nextjs

Create a shared QueryClient factory that handles SSR by returning a fresh client per server request and a singleton in the browser. This prevents cache bleeding across users on the server and maintains cache consistency on the client.

```typescript
import { environmentManager, QueryClient } from "@tanstack/react-query"

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        // With SSR, we usually want to set some default staleTime
        // above 0 to avoid refetching immediately on the client
        staleTime: 5000
      }
    }
  })
}

let browserQueryClient: QueryClient | undefined

export function getQueryClient() {
  if (environmentManager.isServer()) {
    // Server: always make a new query client
    return makeQueryClient()
  } else {
    // Browser: make a new query client if we don't already have one
    // This is very important, so we don't re-make a new client if React
    // suspends during the initial render. This may not be needed if we
    // have a suspense boundary BELOW the creation of the query client
    if (!browserQueryClient) browserQueryClient = makeQueryClient()
    return browserQueryClient
  }
}
```

--------------------------------

### Get Cache Keys from Options Factories

Source: https://better-auth-ui.com/docs/react

Retrieve query and mutation keys from the options factories for cache seeding or invalidation.

```javascript
sessionOptions(authClient).queryKey
signInEmailOptions(authClient).mutationKey
```

--------------------------------

### Render Settings Component

Source: https://better-auth-ui.com/docs/shadcn/components/settings/settings

Demonstrates how to render the Settings component within a React application. Specify the initial view using the 'view' prop.

```jsx
import { Settings } from "@/components/auth/settings/settings"

export function SettingsDemo() {
  return (
    <div className="w-full">
      <Settings view="account" />
    </div>
  )
}
```

--------------------------------

### useListPasskeys Options Factory

Source: https://better-auth-ui.com/docs/react/queries/list-passkeys

Shows how to use the `listPasskeysOptions` factory with `useQuery` from TanStack Query to configure passkey retrieval. This approach is useful for advanced TanStack Query configurations.

```javascript
import { listPasskeysOptions } from "@better-auth-ui/react"
import { useQuery } from "@tanstack/react-query"

const { data: passkeys } = useQuery(
  listPasskeysOptions(authClient, userId)
)
```

--------------------------------

### Add Magic Link Email Component - CLI

Source: https://better-auth-ui.com/docs/shadcn/components/email/magic-link-email

Installs the MagicLinkEmail component using the shadcn-ui CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add https://better-auth-ui.com/r/magic-link-email.json
```

--------------------------------

### Options Factory

Source: https://better-auth-ui.com/docs/react/mutations/sign-in-passkey

You can also use the `signInPasskeyOptions` factory function with `useMutation` from `@tanstack/react-query` to manage the mutation.

```APIDOC
## Options factory

```javascript
import { signInPasskeyOptions } from "@better-auth-ui/react"
import { useMutation } from "@tanstack/react-query"

const { mutate } = useMutation(signInPasskeyOptions(authClient))
```
```

--------------------------------

### Import and Use SecuritySettings Component

Source: https://better-auth-ui.com/docs/heroui/components/settings/security/security-settings

Demonstrates how to import and render the SecuritySettings component within a React application. Ensure the component is wrapped in a container with appropriate styling, such as 'w-full'.

```javascript
import { SecuritySettings } from "@better-auth-ui/heroui"

export function SecuritySettingsDemo() {
  return (
    <div className="w-full">
      <SecuritySettings />
    </div>
  )
}
```

--------------------------------

### Configure Allowed Auth Paths (Next.js)

Source: https://better-auth-ui.com/docs/shadcn/plugins/magic-link

Ensure the magic link view path is included in your allowed paths for routing. This example uses Next.js.

```typescript
import { viewPaths } from "@better-auth-ui/core"
import { notFound } from "next/navigation"

import { Auth } from "@/components/auth/auth"
import { magicLinkPlugin } from "@/lib/auth/magic-link-plugin"

export default async function AuthPage({
  params
}: { params: Promise<{ path: string }> }) {
  const { path } = await params

  if (
    !Object.values({
      ...viewPaths.auth,
      ...magicLinkPlugin().viewPaths?.auth 
    }).includes(path)
  ) {
    notFound()
  }

  return <Auth path={path} />
}
```

--------------------------------

### Import and Use SecuritySettings Component

Source: https://better-auth-ui.com/docs/shadcn/components/settings/security/security-settings

Demonstrates how to import and render the SecuritySettings component within a React application. Ensure the component is wrapped in a div with appropriate styling.

```javascript
import { SecuritySettings } from "@/components/auth/settings/security/security-settings"

export function SecuritySettingsDemo() {
  return (
    <div className="w-full">
      <SecuritySettings />
    </div>
  )
}
```

--------------------------------

### Initiate Social Sign-in Flow

Source: https://better-auth-ui.com/docs/react/mutations/sign-in-social

Use this hook to start an OAuth redirect flow for social sign-in. The session is established after the provider redirects back.

```javascript
import { useAuth, useSignInSocial } from "@better-auth-ui/react"

const { authClient } = useAuth()
const { mutate: signInSocial } = useSignInSocial(authClient)

signInSocial({
  provider: "github",
  callbackURL: "/dashboard"
})
```