Oauth Callback Page
OAuth connecting state card with a Spinner, three step rows showing progress for a GitHub org link, and fallback links if the page hangs.
OAuth connecting state card with a Spinner, three step rows showing progress for a GitHub org link, and fallback links if the page hangs.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
OAuth Callback Page is a centered Acme card showing the in-progress state of connecting GitHub as acme-org. A Spinner from ui/spinner sits above the heading; below it, three step rows in a ruled list show Verifying authorization code and Fetching acme-org organization access as completed (filled circle with a Check), and Syncing repositories and members as the active step (empty ring, bold label). A fallback line at the bottom offers Retry the connection and contact support links for when the page hangs, and an outer note tells the user not to close the tab.
Steps are one const array with a done boolean; the active step takes text-foreground font-medium while completed steps use text-muted-foreground. No client state is needed; the Spinner is decorative markup so the block previews without a hook.
Reach for this block as the redirect landing page after the OAuth provider sends the user back, while your server exchanges the code and fetches org data. Replace the step labels with the actual async operations your integration runs.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the GitHub org connection flow. Other OAuth callback states:
Tip: show the org or account name being connected as bold text in the subtitle so users can catch a wrong-account mistake before the sync finishes.