Alt description missing in image
Beta: Plugins coming soon!
@auth/clerkcomponents

Clerk Components

        • <SignUp />
        • <SignIn />
        • <UserButton />
        • <OrganizationSwitcher />
        • <SignedIn />
        • <SignedOut />
        • <Protect />

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>

apps / next / app / dashboard / page.tsx
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 are direct bridges to Clerk’s pre-built UI components, allowing you to easily integrate authentication and user management UI components like Clerk’s web based ones into your expo app.

Each has a separate documentation page:

useAuthUserButton