Authentication

NextSaas uses Better Auth for handling authentication. It supports OAuth (Google, GitHub), Magic Links, and Passkey out of the box.

Setup

Before you start, ensure you have set up the environment variables in your .env file:

BETTER_AUTH_SECRET="your_generated_secret"

[!TIP] Generate a secret key: openssl rand -base64 32

Social Providers

We have pre-configured Google and GitHub as OAuth providers. To enable them, you need to obtain Client IDs and Secrets from their respective developer portals.

Google

1. Go to Google Cloud Console.
2. Create a new project and configure OAuth consent screen.
3. Create credentials for OAuth client ID (Web application).
4. Add authorized redirect URI: http://localhost:3000/api/auth/callback/google
5. Update your .env file:

GOOGLE_CLIENT_ID="your_google_client_id"
GOOGLE_CLIENT_SECRET="your_google_client_secret"

GitHub

1. Go to GitHub Developer Settings.
2. Create a New OAuth App.
3. Set Authorization callback URL to: http://localhost:3000/api/auth/callback/github
4. Update your .env file:

GITHUB_CLIENT_ID="your_github_client_id"
GITHUB_CLIENT_SECRET="your_github_client_secret"

Magic Links

Magic Link sign-in allows users to log in via an email link without a password.

It uses Resend to send emails. Make sure you have configured the Resend API key:

RESEND_API_KEY="re_123456789"
EMAIL_FROM="onboarding@resend.dev"

The email sending logic is located in src/lib/email.ts. You can customize the email template there.

Passkey (WebAuthn)

Passkey authentication allows users to log in using biometrics (fingerprint, face ID) or hardware security keys.

Setup

Passkey is enabled by default. To disable it, set the following in your .env:

ENABLE_PASSKEY="false"

When enabled, the sign-in page will show a Passkey button, and users can register passkeys from their dashboard settings.

[!NOTE] Passkey requires a secure context (HTTPS) in production. During local development, localhost is allowed.

Feature Toggles

You can control authentication features via environment variables:

These flags are evaluated at startup. When a feature is disabled, the related UI elements are hidden automatically.

Protecting Routes

To protect a page or API route, you can use the auth helper.

import { auth } from "@/auth";
import { headers } from "next/headers";
import { redirect } from "next/navigation";

export default async function DashboardPage() {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  if (!session) {
    redirect("/");
  }

  return <div>Welcome, {session.user.name}</div>;
}

Admin Role

NextSaas includes a built-in admin role via Better Auth's admin plugin. Admin users have access to the admin dashboard with features like:

• User Management: View and manage all registered users
• Order Tracking: View all orders across the platform
• Newsletter Admin: Manage newsletter subscribers
• Points Admin: Manage user point balances
• Analytics Overview: View user and order trend data