# Next.js Starter

A Next.js app with Supabase authentication, TypeScript, and Tailwind CSS

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](https://ui.shadcn.com/docs/cli#init) to create a Next.js app with Tailwind CSS and Radix-based components:

```bash
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:

Install this block:

```bash
npx shadcn@latest add @supabase/password-based-auth-nextjs
```

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

## Configure Supabase

Create a [Supabase project](https://supabase.com/dashboard/new), then add its URL and publishable key to `.env.local`:

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

Find these values in your project's [Connect dialog](https://supabase.com/dashboard/project/_?showConnect=true\&connectTab=frameworks\&framework=nextjs).

Set the Auth Site URL to `http://localhost:3000` in [URL configuration](https://supabase.com/dashboard/project/_/auth/url-configuration). Follow the [authentication block's email template and redirect setup](https://supabase.com/library/docs/nextjs/password-based-auth.md#adding-email-templates) to enable email confirmation and password recovery. Set the generated forms' post-authentication destination to `/protected`.

## Run the app

```bash
npm run dev
```

Open [the sign-up page](http://localhost:3000/auth/sign-up), create an account, and follow the confirmation email to the protected page.

## Add more blocks

- [Social Auth](https://supabase.com/library/docs/nextjs/social-auth.md) adds OAuth sign-in providers.
- [Current User Avatar](https://supabase.com/library/docs/nextjs/current-user-avatar.md) displays the signed-in user's profile.
- [Dropzone](https://supabase.com/library/docs/nextjs/dropzone.md) adds file uploads.

Built with [Next.js](https://nextjs.org/) and the [Supabase password-based authentication block](https://github.com/supabase/supabase/tree/master/apps/ui-library/registry/default/blocks/password-based-auth-nextjs).