Autenticación

The template ships without a real auth provider so you can wire in whichever one you already use. Loop is built to drop Clerk, NextAuth, or Supabase Auth into the same seams.

Where auth plugs in

Authentication touches three places:

• Middleware — gate protected routes
• Layout — read the session, show signed-in chrome
• Login / signup pages — the provider's UI or your own form

The demo's "Sign in" and "Start free" buttons are plain links today. Point them at your provider's routes.

Option A — Clerk

Clerk is the fastest path to a hosted UI.

npm install @clerk/nextjs

Wrap the root layout in <ClerkProvider> and add Clerk's middleware:

// middleware.ts
import { clerkMiddleware } from "@clerk/nextjs/server";
export default clerkMiddleware();

Option B — NextAuth

For self-hosted sessions and OAuth providers, use NextAuth (Auth.js):

npm install next-auth

Add a [...nextauth] route handler, configure your providers, and read the session with auth() in server components.

Option C — Supabase Auth

If you're already on Supabase for data, its auth pairs naturally:

npm install @supabase/ssr @supabase/supabase-js

Create a server client, read the user in layouts, and protect routes in middleware with supabase.auth.getUser().

Protecting routes

Whichever provider you choose, the pattern is the same — check the session in middleware and redirect anonymous users to your login page.

if (!session && isProtected(pathname)) {
  return NextResponse.redirect(new URL("/login", request.url));
}

Removing auth

The template works fully without auth — it's a marketing site by default. If you never add a provider, just leave the sign-in buttons pointing at a waitlist or your app's external login.