Components

SignIn

Name: Authon
Author: Authon

A pre-built sign-in component that handles email/password authentication and OAuth provider flows. Available in popup and inline modes.

Usage

tsx

import { SignIn } from "@authon/react";

// Popup mode — triggers a modal on click
<SignIn mode="popup" />

// Inline mode — renders the form directly on the page
<SignIn mode="inline" />

Props

Prop	Type	Default	Description
mode	"popup" \| "inline"	"popup"	How the sign-in UI is displayed
afterSignInUrl	string	provider default	URL to redirect to after sign in
className	string	—	CSS class for the trigger button (popup mode)
children	ReactNode	"Sign in"	Trigger button content (popup mode)

Popup Mode

Popup mode renders a button that opens the sign-in modal when clicked. You can customize the button appearance:

tsx

<SignIn mode="popup" className="my-custom-btn">
  Sign in to your account
</SignIn>

Inline Mode

Inline mode renders the sign-in form directly. Useful for dedicated sign-in pages:

app/sign-in/page.tsx

import { SignIn } from "@authon/react";

export default function SignInPage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-slate-950">
      <SignIn
        mode="inline"
        afterSignInUrl="/dashboard"
      />
    </div>
  );
}

Customization

The sign-in UI is styled using the customization settings from your Authon Dashboard → Customize tab. You can configure:

Brand name and logo
Primary gradient colors
Card background color
Border radius
OAuth provider order