Quickstart Guide

This guide walks you through setting up an AuthSetu account, obtaining your API keys, and adding authentication to your application.

Prerequisites

Step 1: Install the SDK

Run the following command in your terminal:

pnpm add @authsetu/nextjs @authsetu/react

Or with npm:

npm install @authsetu/nextjs @authsetu/react

Step 2: Configure Environment Variables

Create or update `.env.local` in your project root with your credentials:

NEXT_PUBLIC_AUTHSETU_PUBLISHABLE_KEY=pk_test_sample12345
AUTHSETU_SECRET_KEY=sk_test_sample67890
NEXT_PUBLIC_AUTHSETU_API_URL=https://api.authsetu.com

<Callout type="warning">

Never expose `AUTHSETU_SECRET_KEY` in client-side code or commit it to version control. Keep all server secrets in protected environment configurations.

</Callout>

Step 3: Wrap Your Application with AuthProvider

In Next.js App Router, wrap your root layout with `AuthProvider`:

// app/layout.tsx
import { AuthProvider } from '@authsetu/nextjs';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <AuthProvider
          publishableKey={process.env.NEXT_PUBLIC_AUTHSETU_PUBLISHABLE_KEY!}
        >
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

Step 4: Mount the Prebuilt SignIn Component

Create a sign-in route at `app/sign-in/page.tsx`:

// app/sign-in/page.tsx
import { SignIn } from '@authsetu/react';

export default function SignInPage() {
  return (
    <main className="min-h-screen flex items-center justify-center p-4">
      <SignIn redirectUrl="/dashboard" />
    </main>
  );
}

Next Steps