auth pattern

SSO callback

Loading screen during OAuth provider redirects.

When to use it

OAuth provider redirected back with a code. Page exchanges it for a session.

Visible reassurance auth is in progress
Clear path back if it fails

Layout regions

card

States

loading
success
error

Example

// app/auth/callback/[provider]/page.tsx (Server Component)
export default async function Callback({ searchParams }) {
  const { code, state } = await searchParams
  await exchangeCode(code, state)
  redirect('/dashboard')
}

The full SSO callback pattern specifies 2 exact microcopy strings, 1 motion spec, 3 composition rules — all gated behind the full recipe. Get the full recipe.

Forgot password

Build the SSO callback pattern in your project.

Get started