Redirecting to SSO

Auth44: Redirecting to SSO

A full-height centered card that shows a spinning Loader2 badge above an optional heading and description, plus an optional fallback prompt line ending in a manual-continue link, for use as the interstitial while an SSO or OAuth handoff redirects to an identity provider.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth44?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth44?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth44.tsx.

Quick start

The installed file exports auth44Demo alongside the block: the exact props behind the preview above. Spread it to get a working redirect screen in one line.

import { Auth44, auth44Demo } from "@/components/beste/block/auth44";

export default function Page() {
  return <Auth44 {...auth44Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Auth44 } from "@/components/beste/block/auth44";

export default function Page() {
  return (
    <Auth44
      heading="Redirecting to Okta…"
      description="Hold tight, we're taking you to your identity provider."
      fallbackPrompt={{
        text: "Not redirected automatically?",
        linkLabel: "Continue manually",
        href: "https://beste.co",
      }}
    />
  );
}

Props

type FallbackPrompt = {
  text: string;
  linkLabel: string;
  href: string;
};

Behavior notes

• The block ships no redirect logic of its own: the actual navigation to the identity provider is left to the integrator, and the component only renders the waiting UI.
• The Loader2 spinner badge is always rendered via animate-spin; it is decorative and has no loading state, prop, or completion callback tied to it.
• Each text region is conditionally rendered: heading, description, and fallbackPrompt are only emitted when truthy, so passing none yields a card containing just the spinner.
• The fallback link is a Next.js Link pointing at fallbackPrompt.href with no onClick or interception, so it performs a plain client navigation to whatever URL you supply.
• The outer <section> fixes min-h-screen and vertically centers its content, so the block expects to own the full viewport height rather than sit inside a constrained container.
• No props are lifted into internal useState; the component is fully controlled by its props and holds no state of its own.