Clerk Components

• packages
  • @auth-clerk
    • components
      • <SignUp />
      • <SignIn />
      • <UserButton />
      • <OrganizationSwitcher />
      • <SignedIn />
      • <SignedOut />
      • <Protect />

Context & App Setup

Universal components and hooks need the Clerk bundle on React context. At each app root, wrap your tree with ClerkAuthManager from the platform entry:

import { ClerkAuthManager } from '@auth/clerk/next'

import { ClerkAuthManager } from '@auth/clerk/expo'

ClerkAuthManager will:

• wire ClerkAuthContext
• ensure compound APIs like UserButton.MenuItems exist
• wrap ClerkProvider (pass providerProps for the same options you would pass to the platform ClerkProvider, e.g. appearance on Next)

Do not pass the clerkAuth bundle from a React Server Component as a prop (it is not serializable); the default bundle is applied inside the client ClerkAuthManager.

Control Components

import { SignedIn, SignedOut, Protect } from '@auth/clerk'

These components help you control access to parts of your application based on the user’s authentication state.

<SignedIn> / <SignedOut>

import { SignedIn, SignedOut } from '@auth/clerk'
import SensitiveContent from './SensitiveContent'
 
export default function DashboardPage() {
    return (
        <>
            {/* Only renders children if authenticated */}
 
            <SignedIn>
                <SensitiveContent />
            </SignedIn>
 
            {/* Only renders children if NOT authenticated */}
 
            <SignedOut>
                <PleaseSignIn />
            </SignedOut>
        </>
    )
}

Bridged Components

import { SignUp, SignIn, UserButton, OrganizationSwitcher } from '@auth/clerk'

These components resolve through ClerkAuthContext to the same bridges you would get from @clerk/nextjs on web or @clerk/clerk-expo on native, so you can share screens between Next and Expo without platform-specific imports.