---
title: "React Quickstart"
description: "Integrate AuthSetu into any React application with Vite, Create React App, or Remix."
order: 3
category: "Getting Started"
updated: "2026-10-13"
---

# React Quickstart

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

## Installation

```bash
pnpm add @authsetu/react
```

## Setup Provider

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

```tsx
// 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>
);
```