Authentication

Copy-paste authentication UI that works with any backend. The components carry no auth dependency: they own the visual steps (form → code → done) and expose onSubmit / loading / error. You own the calls to your auth provider.

The contract

Every form is the same shape — the only thing that changes between providers is what you do inside onSubmit:

<SignInForm
  loading={loading}
  error={error}
  onSubmit={async ({ emailAddress, password }) => {
    setLoading(true);
    setError(undefined);
    try {
      await signIn(emailAddress, password); // your auth provider
    } catch (e) {
      setError("Couldn't sign in.");
    } finally {
      setLoading(false);
    }
  }}
/>

Setup

npx stylesheet-ui add auth-screen sign-in-form sign-up-form otp-input social-auth-buttons new-password-form user-card

Install your auth provider’s SDK separately, then call it inside each onSubmit.

The pieces

• SignInForm — email + password sign-in
• SignUpForm + OtpInput — sign-up with emailed-code verification
• SocialAuthButtons — OAuth / SSO provider buttons
• NewPasswordForm — set a new password (reset flows)
• UserCard — signed-in identity + sign out
• AuthScreen — centered, keyboard-aware layout for any of the above

Every piece is backend-agnostic — wire onSubmit (and the social onSelect) to whatever provider you use.