Quick Start

Add authentication to your Next.js app in under 5 minutes.

1. Register as a developer#

Create your tenant account via the API or dashboard:

curl -X POST https://your-domain.com/api/v1/tenant/register \
  -H "Content-Type: application/json" \
  -d '{"name":"Your Name","email":"you@example.com","password":"securepassword"}'

2. Create an app#

Use the access token from step 1 to create your first app. The clientSecret is shown once — save it immediately.

curl -X POST https://your-domain.com/api/v1/tenant/apps \
  -H "Authorization: Bearer <your_access_token>" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "My App",
    "allowedOrigins": ["http://localhost:3000"]
  }'

Response

{
  "app": {
    "id": "app_xxx",
    "clientId": "client_xxx",
    "name": "My App"
  },
  "clientSecret": "sas_abc123..."
}

⚠ Warning

Store clientSecret in your environment variables immediately. It cannot be retrieved again. Use POST /api/v1/tenant/apps/:id/rotate if lost.

3. Install the SDK#

npm install @auth-saas/client

4. Add AuthProvider#

app/layout.tsx

import { AuthProvider } from '@auth-saas/client/react';
import { AuthClient } from '@auth-saas/client';

const authClient = new AuthClient({
  clientId: process.env.NEXT_PUBLIC_AUTH_CLIENT_ID!,
  baseUrl:  process.env.NEXT_PUBLIC_AUTH_URL + '/api/v1',
});

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AuthProvider client={authClient}>
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

5. Use useAuth()#

components/login-form.tsx

'use client';
import { useAuth } from '@auth-saas/client/react';

export function LoginForm() {
  const { login, isLoading, user } = useAuth();

  if (user) return <p>Welcome, {user.email}</p>;

  return (
    <button
      onClick={() => login({ email: 'user@example.com', password: 'secret' })}
      disabled={isLoading}
    >
      {isLoading ? 'Signing in...' : 'Sign in'}
    </button>
  );
}

6. Protect a route#

app/dashboard/page.tsx

'use client';
import { useAuth } from '@auth-saas/client/react';
import { redirect } from 'next/navigation';

export default function Dashboard() {
  const { isAuthenticated, user } = useAuth();

  if (!isAuthenticated) redirect('/login');

  return <h1>Hello, {user?.name ?? user?.email}</h1>;
}

✦ Tip

Use authFetch() from useAuthFetch() for all authenticated API calls. It automatically attaches the JWT and retries with a refreshed token on 401.