# OAuth Consent

OAuth 2.1 consent block for Next.js

## Installation

Install this block:

```bash
npx shadcn@latest add @supabase/oauth-consent-nextjs
```

## Folder structure

This block includes the [Supabase client](https://supabase.com/library/docs/nextjs/client.md). If you already have one installed, you can skip overwriting it.

- `app/`
  - `oauth/`
    - `consent/`
      - `page.tsx`
- `components/`
  - `oauth-consent.tsx`
- `hooks/`
  - `use-oauth-consent.ts`
- `lib/`
  - `supabase/`
    - `client.ts`
    - `middleware.ts`
    - `server.ts`

Full source: https://supabase.com/library/r/oauth-consent-nextjs.json

## Usage

This block installs an OAuth 2.1 consent route at `/oauth/consent`. It is designed for an app that already has authentication: it does not install sign-in, sign-up, or callback routes.

When the visitor has no session, the consent screen redirects to `/auth/login` and preserves the original consent URL in the `next` query parameter. Update the `signInPath` prop in `app/oauth/consent/page.tsx` if your sign-in route is different.

After sign-in, your login page must send the visitor back to the path in `next`; otherwise the OAuth flow stops at your login screen. The password-based auth and social auth blocks follow `next` automatically. For a custom login page, validate that `next` is a relative path before redirecting to it:

```ts
// After sign-in succeeds:
const next = new URLSearchParams(window.location.search).get('next')
try {
  const nextUrl = new URL(next ?? '/protected', window.location.origin)
  router.push(
    nextUrl.origin === window.location.origin
      ? `${nextUrl.pathname}${nextUrl.search}${nextUrl.hash}`
      : '/protected'
  )
} catch {
  router.push('/protected')
}
```

Set the `productName` prop to replace the `Your product` placeholder in the consent header.

Your middleware must let unauthenticated requests reach `/oauth/consent`. The middleware in `lib/supabase/middleware.ts` exempts only `/oauth/consent`. Middleware that redirects to a login page before the consent route runs drops the authorization and ends the OAuth flow at your login screen.

### Getting started

After installing the block, you'll have the following environment variables in your `.env.local` file:

```env
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
```

- If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true\&connectTab=frameworks\&framework=nextjs) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).
- If you're using a local instance of Supabase, you can find these values by running `supabase start` or `supabase status` (if you already have it running).

### Configure the OAuth server

Enable the OAuth server in the Supabase Dashboard under **Authentication** > **OAuth Server**, then set its authorization URL path to `/oauth/consent`. For local development, set the following in `supabase/config.toml`:

```toml
[auth.oauth_server]
enabled = true
authorization_url_path = "/oauth/consent"
```

Recent CLI versions already write an `[auth.oauth_server]` section with `enabled = false`. Edit that section rather than adding a second one, which fails with `table oauth_server already exists`.

The route expects the `authorization_id` query parameter that Supabase Auth supplies during the authorization flow.

## Further reading

- [OAuth Server](https://supabase.com/docs/guides/auth/oauth-server)
- [Supabase Auth](https://supabase.com/docs/guides/auth)