OAuth Consent

Installation

This block includes the Supabase client. 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:

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:

// 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:

VITE_SUPABASE_URL=
VITE_SUPABASE_PUBLISHABLE_KEY=

• If you're using supabase.com, you can find these values in the Connect modal under App Frameworks or in your project's API settings.
• 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:

[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
• Supabase Auth