Sign in

Present a credible authentication entry pointLink to section

SignInPanel gives an application a bounded sign-in composition while keeping authentication behavior entirely in the consuming app. Supply your own form, provider controls, error state and footer links; the Block does not validate credentials, create sessions or configure providers.

Canonical identityLink to section

• Category: Authentication, slug auth.
• Block: sign-in, export SignInPanel.
• Canonical source: apps/marketing/content/blocks/auth/sign-in/.
• Complete entry point: index.tsx.

Copy sourceLink to section

Configure the public UI package and tokens, then create src/components/blocks/sign-in/index.tsx in your application. Use the Source tab's copy button when available.

If clipboard access is unavailable, select the code manually.

The Preview tab renders the real canonical SignInPanel through a deterministic local fixture. It performs no authentication or network request. The Source tab is the complete canonical file included at build time, not a duplicated implementation.

Install by copying sourceLink to section

Keep the complete file at the application-owned path above. Copying source does not install dependencies, configure authentication or add routes for you. Connect the presentation to your own auth boundary, then validate it in your application.

"use client";

import { SignInPanel } from "./blocks/sign-in";

export function SignInScreen() {
  return (
    <SignInPanel
      description="Use your workspace account to continue."
      form={
        <form
          className="space-y-4"
          onSubmit={(event) => event.preventDefault()}
        >
          <label className="grid gap-2 text-sm">
            Email
            <input
              className="rounded-md border bg-background px-3 py-2"
              name="email"
              type="email"
              autoComplete="email"
            />
          </label>
          <button className="rounded-md border px-4 py-2" type="submit">
            Continue
          </button>
        </form>
      }
      footer={<a href="/forgot-password">Forgot your password?</a>}
    />
  );
}

Use "use client" only in a consumer component that actually owns interactive handlers or client auth state. The canonical Block itself stays presentation-only.

What the application ownsLink to section

form is required. title, description, providers, error, footer and className are optional. Provider buttons, links and form controls are rendered as supplied, so their callbacks, refs, disabled states and native semantics stay under your control.

The optional error region uses role="alert" because it is intended for an already-known consumer error. Do not place speculative validation copy there before a failed action. Provider configuration, credentials, MFA, account lockout, rate limiting and session policy remain outside the Block.

Responsive and accessibility notesLink to section

The panel is bounded to a readable width, uses semantic theme classes and wraps consumer content naturally. Keep every field programmatically labelled, preserve visible focus and give provider controls clear accessible names. Review your actual error copy, disabled states, password-manager behavior and keyboard flow after integration.

Ownership and updatesLink to section

Your application owns the copied source and does not receive automatic updates. Review future canonical changes deliberately, preserve local customizations and validate it in your application before adoption.

Boundaries and next stepsLink to section

No Auth.js setup, OAuth configuration, credential validation, password policy, session mutation, persistence, authorization, analytics or production secret is implemented here.

Explore the Blocks catalog, compare the related Sign up and Password recovery Blocks, or compare Starters for a full application foundation.