Enterprise SSO Sign In

Auth14: Enterprise SSO Sign In

Full-height single sign-on screen: a work-email field feeds a "Continue with SSO" button, with Google and Microsoft providers offered below a divider as a secondary path. There is no password field anywhere in this block.

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/auth14?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/auth14.tsx and the button, input, and field shadcn/ui primitives it's built on.

Quick start

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

import { Auth14, auth14Demo } from "@/components/beste/block/auth14";

export default function SsoSignInPage() {
  return <Auth14 {...auth14Demo} />;
}

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

import { Building2 } from "lucide-react";
import { Auth14 } from "@/components/beste/block/auth14";

export default function SsoSignInPage() {
  return (
    <Auth14
      icon={<Building2 className="size-6" />}
      heading="Sign in to your organization"
      description="Enter your work email to continue with your company's single sign-on."
      labels={{
        email: "Work email",
        emailPlaceholder: "you@company.com",
        submit: "Continue with SSO",
        divider: "or",
      }}
      footerPrompt={{ text: "Don't have a workspace?", linkLabel: "Talk to sales", href: "/contact" }}
    />
  );
}

Props

type SocialProvider = { label: string; icon: React.ReactNode; href?: string };

type Auth14Labels = {
  email?: string;
  emailPlaceholder?: string;
  submit?: string;
  divider?: string;
};

Behavior notes

• There is no password input in this block at all: the single email field plus "Continue with SSO" button models a work-email-first identity-provider redirect, not a credentialed sign-in.
• The <form> only calls e.preventDefault() on submit, so the actual SSO redirect isn't wired; the integrator has to add that behavior.
• The divider uses FieldSeparator with a *:data-[slot=field-separator-content]:bg-card class override so its label chip matches the card's background instead of the page background behind it.
• Social provider buttons render below the divider as a secondary/fallback path rather than the primary action, the opposite ordering from auth9's split-screen sign-in where social providers come first.
• Social provider buttons are asChild links to provider.href, not real OAuth triggers.