# OAuth Consent

OAuth 2.1 consent block for React single-page applications

## Files

Includes first-party dependencies: safe-next-path.

- `components/`
  - `oauth-consent.tsx`
- `hooks/`
  - `use-oauth-consent.ts`
- `lib/`
  - `safe-next-path.ts`
  - `supabase/`
    - `client.ts`

External registry dependencies: button, card.

Full source: https://supabase.com/library/r/oauth-consent-react.json
Full source: https://supabase.com/library/r/safe-next-path.json

## Installation

Install this block:

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

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

## Usage

This block provides an OAuth 2.1 consent component for an app that already has authentication. It does not install sign-in, sign-up, callback, or router-specific routes.

Render the component from your existing `/oauth/consent` route and pass the `authorization_id` query parameter. Set `signInPath` to the sign-in route in your app:

```tsx
import { OAuthConsent } from '@/components/oauth-consent'

export function ConsentPage() {
  const authorizationId = new URLSearchParams(window.location.search).get('authorization_id')

  return (
    <main className="flex min-h-svh items-center justify-center p-6 md:p-10">
      <OAuthConsent
        className="w-full max-w-lg"
        authorizationId={authorizationId}
        signInPath="/login"
        productName="Your product"
      />
    </main>
  )
}
```

When the visitor has no session, the consent screen redirects to `signInPath` and preserves the original consent URL in the `next` query parameter. 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 block follows `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)
  location.href =
    nextUrl.origin === window.location.origin
      ? `${nextUrl.pathname}${nextUrl.search}${nextUrl.hash}`
      : '/protected'
} catch {
  location.href = '/protected'
}
```

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

### Getting started

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

```env
VITE_SUPABASE_URL=
VITE_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=react\&using=vite\&with=supabasejs) 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)