BigBlocks

OAuth Callback

OAuth callback page block with loading, success, and error states for post-redirect authentication handling

Preview state:

Completing sign in

Please wait while we verify your authentication.

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { OAuthCallbackUI } from "@/registry/bigblocks/blocks/oauth-callback/oauth-callback-ui"
import type {
  OAuthCallbackStatus,
  OAuthCallbackUser,
} from "@/registry/bigblocks/blocks/oauth-callback/use-oauth-callback"

const MOCK_USER: OAuthCallbackUser = {
  id: "usr_abc123",
  name: "Satoshi Nakamoto",
  pubkey: "02a1633cafcc01ebfb6d78e39f687a1f0995c62fc95f51ead10a02ee0be551b5dc",
  bapId: "A4PYmuKGG61WCjjBaRpuSEbqytG",
}

export function OAuthCallbackDemo() {
  const [status, setStatus] = useState<OAuthCallbackStatus>("loading")

  return (
    <div className="flex flex-col gap-6">
      {/* State selector */}
      <div className="flex flex-wrap items-center gap-2">
        <p className="text-sm font-medium text-muted-foreground mr-2">
          Preview state:
        </p>
        <Button
          variant={status === "loading" ? "default" : "outline"}
          size="sm"
          onClick={() => setStatus("loading")}
        >
          Loading
        </Button>
        <Button
          variant={status === "success" ? "default" : "outline"}
          size="sm"
          onClick={() => setStatus("success")}
        >
          Success
        </Button>
        <Button
          variant={status === "error" ? "default" : "outline"}
          size="sm"
          onClick={() => setStatus("error")}
        >
          Error
        </Button>
      </div>

      <Separator />

      {/* Preview */}
      <OAuthCallbackUI
        status={status}
        user={status === "success" ? MOCK_USER : null}
        errorMessage={
          status === "error"
            ? "Invalid state parameter. This may indicate a security issue. Please try signing in again."
            : null
        }
        redirectUrl="/dashboard"
        onRetry={() => setStatus("loading")}
      />
    </div>
  )
}

Installation

bunx shadcn@latest add https://registry.bigblocks.dev/r/oauth-callback.json

Usage

Place this block on your OAuth callback page (e.g. app/auth/callback/page.tsx). It reads code, state, and error from the URL search params automatically.

import { OAuthCallback } from "@/components/blocks/oauth-callback"
import { authClient } from "@/lib/auth-client"
 
export default function CallbackPage() {
  return (
    <OAuthCallback
      onCallback={async ({ code, state }) => {
        const result = await authClient.sigma.handleCallback(
          new URLSearchParams({ code, state })
        )
        return {
          user: {
            id: result.user.sub,
            name: result.user.name,
            image: result.user.picture ?? undefined,
            pubkey: result.user.pubkey,
            bapId: result.user.bap_id,
          },
          accessToken: result.access_token,
        }
      }}
      redirectUrl="/dashboard"
      redirectDelay={2000}
      onSuccess={(result) => console.log("Authenticated:", result.user.id)}
      onError={(err) => console.error("Callback failed:", err)}
    />
  )
}

States

The block renders three states based on the callback flow:

Status	Rendered UI
`loading`	Spinner card with skeleton placeholders
`success`	User avatar, name, public key, and redirect countdown
`error`	Error message with a retry button

Props

OAuthCallback

Prop	Type	Default	Description
`onCallback`	`(params: { code: string; state: string }) => Promise<OAuthCallbackResult>`	—	Handler to exchange auth code for user data (required)
`onSuccess`	`(result: OAuthCallbackResult) => void`	—	Called after successful callback processing
`onError`	`(error: Error) => void`	—	Called when callback processing fails
`redirectUrl`	`string`	`"/"`	URL to redirect to after success
`redirectDelay`	`number`	`2000`	Delay in ms before redirecting
`className`	`string`	—	Additional CSS classes

Hook

useOAuthCallback can be used independently for a fully custom callback page.

import { useOAuthCallback } from "@/components/blocks/oauth-callback"
 
function CustomCallbackPage() {
  const { status, user, errorMessage, retry } = useOAuthCallback({
    onCallback: async ({ code, state }) => {
      const result = await exchangeCode(code, state)
      return { user: { id: result.id, name: result.name } }
    },
    redirectUrl: "/dashboard",
  })
 
  if (status === "loading") return <p>Processing...</p>
  if (status === "error") return <button onClick={retry}>{errorMessage}</button>
  return <p>Welcome, {user?.name}</p>
}

Mnemonic Flow OpNS Manager