React Quickstart

• Install Auth

  npm install auth

• Set your Auth API keys

  Add your Auth Publishable Key to your .env file. It can always be retrieved from the API keys page in the Clerk Dashboard.

  To get key

  API key

  .env
  VITE_AUTH_PUBLISHABLE_KEY=pk_test_ZWxlY3RyaWMtbGxhbWEtODguY2xlcmsuYWNjb3VudHMuZGV2JA

• Import the Auth Publishable Key

  const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
                          
  if (!PUBLISHABLE_KEY) {
  throw new Error('Add your Clerk Publishable Key to the .env file')
  }

• Add AuthProvider to your app

  import { AuthProvider } from 'auth';
  
  const main = () => {
    return (
      <AuthProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
          <App/>
      <AuthProvider/>
    );
  };
  
  export default main;

• Create a header with Auth components

  import { Signin } from 'auth';
  
  const App = () => {
    return (
      <Signin />
    );
  };
  
  export default App;

• Start your app

  npm run dev