67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
/**
|
|
* React + Vite Entry Point with Clerk
|
|
*
|
|
* Place this in src/main.tsx
|
|
*
|
|
* Dependencies:
|
|
* - @clerk/clerk-react@^5.51.0
|
|
*/
|
|
|
|
import React from 'react'
|
|
import ReactDOM from 'react-dom/client'
|
|
import { ClerkProvider } from '@clerk/clerk-react'
|
|
import App from './App.tsx'
|
|
import './index.css'
|
|
|
|
// Get publishable key from environment
|
|
// CRITICAL: Must use VITE_ prefix for Vite to expose to client
|
|
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
|
|
|
|
if (!PUBLISHABLE_KEY) {
|
|
throw new Error('Missing VITE_CLERK_PUBLISHABLE_KEY in .env.local')
|
|
}
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
<React.StrictMode>
|
|
<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
|
|
<App />
|
|
</ClerkProvider>
|
|
</React.StrictMode>,
|
|
)
|
|
|
|
/**
|
|
* With Dark Mode Support (using custom theme):
|
|
*/
|
|
/*
|
|
import { ClerkProvider } from '@clerk/clerk-react'
|
|
import { dark } from '@clerk/themes'
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
<React.StrictMode>
|
|
<ClerkProvider
|
|
publishableKey={PUBLISHABLE_KEY}
|
|
appearance={{
|
|
baseTheme: dark,
|
|
variables: {
|
|
colorPrimary: '#3b82f6',
|
|
},
|
|
}}
|
|
>
|
|
<App />
|
|
</ClerkProvider>
|
|
</React.StrictMode>,
|
|
)
|
|
*/
|
|
|
|
/**
|
|
* Environment Variables:
|
|
*
|
|
* Create .env.local with:
|
|
* VITE_CLERK_PUBLISHABLE_KEY=pk_test_...
|
|
*
|
|
* CRITICAL:
|
|
* - Must use VITE_ prefix (Vite requirement)
|
|
* - Never commit .env.local to version control
|
|
* - Use different keys for development and production
|
|
*/
|