React Quickstart

AuthSetu's `@authsetu/react` package is compatible with any modern React application including Vite, Remix, Astro, and single-page applications.

Installation

pnpm add @authsetu/react

Setup Provider

Mount the `AuthProvider` at the root of your React application:

// src/main.tsx or src/App.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AuthProvider, SignIn, UserButton, useAuth } from '@authsetu/react';

const PUBLISHABLE_KEY = import.meta.env.VITE_AUTHSETU_PUBLISHABLE_KEY;

function App() {
  const { isSignedIn } = useAuth();

  return (
    <div className="container mx-auto p-4">
      <header className="flex justify-between items-center py-4 border-b">
        <h1 className="font-bold text-lg">My App</h1>
        {isSignedIn ? <UserButton /> : <a href="/sign-in">Sign In</a>}
      </header>

      <main className="mt-8">
        {!isSignedIn ? <SignIn /> : <p>Welcome to your protected workspace!</p>}
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <AuthProvider publishableKey={PUBLISHABLE_KEY}>
      <App />
    </AuthProvider>
  </React.StrictMode>
);