OAuthButtons

Code

import { OAuthButtons } from "@fadymondy/nasaq/web";export function Providers() {  return <OAuthButtons providers={["google", "github", "apple"]} onSelect={(id) => startOAuth(id)} />;}declare function startOAuth(id: string): Promise<void>;

Auth · beta

Live examples and controls: OAuthButtons in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/oauth-buttons.json

A group of "Continue with X" buttons. Each provider's logo is the official artwork in its official colours; the button text uses the approved verbs (Continue / Sign in / Sign up with). Clicking one shows a spinner on that button and disables the others until your handler settles.

When to useCopy Anchor Link

• Under or above a sign-in or sign-up form.
• intent="signup" on registration screens, "signin" on login.

When not to useCopy Anchor Link

• Enterprise SAML or a provider list you fully own: pass OAuthCustomProvider items, or build a menu.
• Connecting accounts inside settings: use a connected-accounts list.

ImportCopy Anchor Link

import { OAuthButtons } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { OAuthButtons } from "@fadymondy/nasaq/web";

export function Providers() {
  return <OAuthButtons providers={["google", "github", "apple"]} onSelect={(id) => startOAuth(id)} />;
}

declare function startOAuth(id: string): Promise<void>;

AnatomyCopy Anchor Link

OAuthButtons                     data-slot="oauth-buttons", role="group"
└─ Button (one per provider)     data-slot="oauth-button", data-provider
   ├─ logo                        official SVG, aria-hidden
   ├─ label                       "Continue with Google"
   └─ LastUsed (optional)         data-slot="last-used": the "Last used" pill at the inline end
OAuthDivider                     data-slot="oauth-divider" (the "or" rule)

APICopy Anchor Link

OAuthButtons: every div prop except onSelect, plus:

LastUsed: the small pill on its own, for other sign-in buttons (the passkey button in SignInFlow uses it). Give its parent relative.

OAuthDivider: a horizontal rule with centred text. children defaults to "or" / "أو".

Logos: Google (multicolour "G"), GitHub (Octicon mark, follows text colour), Apple (black on light, white on dark) and Microsoft (four squares) are the official marks, never recoloured, mirrored or redrawn. Source URLs are in oauth-logos.tsx.

ExamplesCopy Anchor Link

Sign-up, two columns

import { OAuthButtons, OAuthDivider } from "@fadymondy/nasaq/web";

export function SignUpProviders() {
  return (
    <>
      <OAuthButtons layout="grid" intent="signup" providers={["google", "microsoft"]} onSelect={begin} />
      <OAuthDivider />
    </>
  );
}

declare function begin(id: string): Promise<void>;

A custom provider

import { OAuthButtons } from "@fadymondy/nasaq/web";

export function Sso() {
  return (
    <OAuthButtons
      providers={["google", { id: "okta", label: "Continue with Okta", icon: <span aria-hidden="true">O</span> }]}
      onSelect={() => {}}
    />
  );
}

AccessibilityCopy Anchor Link

• The group has an accessible name (labels.group). Each button's name is the full text ("Continue with Google"), the logo is aria-hidden. In icon-only layout the text is kept as the accessible name.
• Loading buttons are aria-busy; the other buttons are disabled while one is pending.
• The "Last used" text is inside the button, so it is read as part of its name.
• All buttons are keyboard operable and show the standard focus ring.

RTL & i18nCopy Anchor Link

• Logos are never mirrored, in either direction. Only the position of the icon relative to the text flips.
• Provider names stay in Latin script inside Arabic labels (المتابعة عبر Google), as the brands require.
• The divider text follows the locale ("أو").

Styling & tokensCopy Anchor Link

• Buttons are the secondary Button; Apple is a black button in light theme and white in dark, per Apple's guidelines.
• Brand colours live only inside the logo SVGs. Everything else uses --nq-* tokens.

Do / Don'tCopy Anchor Link

• Do keep the provider order the same on sign-in and sign-up.
• Do use the official verbs through intent.
• Don't restyle, recolour or redraw a provider logo.
• Don't show a provider you have not configured.

RelatedCopy Anchor Link

• login-form
• register-form
• button
• auth-layout

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-auth-oauth-buttons--docs