clerk_react_provider_setup_with_signin_signout_components.ts

1import React from 'react'
2import ReactDOM from 'react-dom/client'
3import App from './App.tsx'
4import './index.css'
5import { ClerkProvider, SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react'
6
7// Import your publishable key
8const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
9
10if (!PUBLISHABLE_KEY) {
11  throw new Error("Missing Publishable Key")
12}
13
14ReactDOM.createRoot(document.getElementById('root')!).render(
15  <React.StrictMode>
16    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
17      <header>
18        <SignedOut>
19          <SignInButton />
20        </SignedOut>
21        <SignedIn>
22          <UserButton />
23        </SignedIn>
24      </header>
25      <main>
26        <App />
27      </main>
28    </ClerkProvider>
29  </React.StrictMode>,
30)