Next.js Starter

Start with a Next.js App Router project, then install the Library's password-based authentication block. The block adds sign-in, sign-up, password recovery, and a protected page.

Installation

Create the app

Use the shadcn CLI to create a Next.js app with Tailwind CSS and Radix-based components:

npx shadcn@latest init --template next --base radix --name my-app
cd my-app

Install the block

Run the install command from your new project:

The installer adds the Supabase client and authentication routes. Keep the generated package lockfile with your project.

Configure Supabase

Create a Supabase project, then add its URL and publishable key to .env.local:

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-publishable-key

Find these values in your project's Connect dialog.

Set the Auth Site URL to http://localhost:3000 in URL configuration. Follow the authentication block's email template and redirect setup to enable email confirmation and password recovery. Set the generated forms' post-authentication destination to /protected.

Run the app

npm run dev

Open the sign-up page, create an account, and follow the confirmation email to the protected page.

Add more blocks

• Social Auth adds OAuth sign-in providers.
• Current User Avatar displays the signed-in user's profile.
• Dropzone adds file uploads.

Built with Next.js and the Supabase password-based authentication block.