Better Auth UI

Discover organization SSO from an email address before showing other sign-in methods.

The SSO plugin replaces the standard sign-in view with an email-first flow. It sends the email to Better Auth for provider discovery. If a provider exists, Better Auth redirects the user to it. If no provider exists, the view shows the configured password and plugin sign-in methods.

Magic-link and email-OTP views reuse the submitted email. Users do not need to enter it again.

Setup

Add SSO to the server

Install @better-auth/sso, add sso() to Better Auth, and apply the plugin schema to your database. Configure providers with Better Auth or Better Auth Dash.

lib/auth.ts

import { sso } from "@better-auth/sso"
import { betterAuth } from "better-auth"

export const auth = betterAuth({
  plugins: [sso()]
})

See the Better Auth SSO guide for provider setup and schema commands.

Add the client plugin

lib/auth-client.ts

import { ssoClient } from "@better-auth/sso/client"
import { createAuthClient } from "better-auth/react"

export const authClient = createAuthClient({
  plugins: [ssoClient()]
})

Register the UI plugin

Place ssoPlugin() before another plugin that replaces the sign-in view.

components/providers.tsx

import { AuthProvider } from "@better-auth-ui/heroui"
import { ssoPlugin } from "@better-auth-ui/heroui/plugins/sso"

<AuthProvider
  authClient={authClient}
  navigate={navigate}
  plugins={[ssoPlugin(), magicLinkPlugin(), emailOtpPlugin()]}
>
  {children}
</AuthProvider>

Options

Set emailFirst: false when you want the data hooks without replacing the sign-in view.

ssoPlugin({
  emailFirst: false,
  localization: {
    continueWithEmail: "Find my workspace"
  }
})

Component

import { EmailFirstSignIn } from "@better-auth-ui/heroui/plugins/sso"

<EmailFirstSignIn />