SignInForm

Overview

SignInForm renders a minimal accessible form that calls useSignIn under the hood. A footer always prompts users without an account to create one (pass signUpHref or onSwitchToSignUp for a link or button). Provide onSuccess when you need to redirect or close a modal after a successful login.

Preview

Interactive preview requires JavaScript.

Install

npx @simpleauthjs/react add sign-in --style minimal

The install snippet uses --style minimal. You can also use --style modern. Style variants compares those two in the live preview. Run npx @simpleauthjs/react add --help for every --style slug the CLI accepts.

Running add sign-in automatically scaffolds the Google and GitHub auth files when they are missing (same as running add google-auth and add github-auth).

Props

Name	Type	Required	Default	Description
`onSuccess`	`() => void`	No	`undefined`	Called after `signIn` resolves without throwing.
`appName`	`string`	No	`undefined`	Shown in the header next to the SimpleAuth badge. When set, the title becomes `Sign in to {appName}`.
`signUpHref`	`string`	No	`undefined`	Renders a “Create one” link in the footer (used when `onSwitchToSignUp` is not set).
`forgotPasswordHref`	`string`	No	`undefined`	Renders a “Forgot password?” link (used when `onForgotPassword` is not set).
`onSwitchToSignUp`	`() => void`	No	`undefined`	Footer button for sign-up; takes precedence over `signUpHref`.
`onForgotPassword`	`() => void`	No	`undefined`	Footer button for forgot password; takes precedence over `forgotPasswordHref`.
`googleRedirectUrl`	`string`	No	`undefined`	When set, renders Continue with Google below the email form.
`githubRedirectUrl`	`string`	No	`undefined`	When set, renders Continue with GitHub below the email form.

Usage

import { SignInForm } from "@/components/simpleauth"

export default function LoginPage() {
  return <SignInForm appName="Acme" onSuccess={() => console.info("signed in")} />
}

With Google and GitHub (same components as GoogleButton / GithubButton):

<SignInForm
  appName="Acme"
  googleRedirectUrl="https://myapp.com/dashboard"
  githubRedirectUrl="https://myapp.com/dashboard"
/>

Remove the OAuth buttons

The quickest way to ship email-only sign-in is to omit both googleRedirectUrl and githubRedirectUrl — the buttons then do not render. To remove OAuth from the generated file entirely, edit components/simpleauth/ui/sign-in-form.tsx and delete (a) the GoogleButton and GithubButton import lines, (b) the googleRedirectUrl / githubRedirectUrl entries in SignInFormProps and the component destructure, and (c) the .sa-sign-in-oauth-below JSX block. You can also delete the unused feature files (for example components/simpleauth/ui/google-button.tsx, components/simpleauth/hooks/use-google-auth.ts, components/simpleauth/styles/google-button.css, and the GitHub equivalents).

Source

components/simpleauth/hooks/use-sign-in.ts

"use client"

import { useState } from "react"
import { SimpleAuthError, type LoginResponse } from "@simpleauthjs/core"
import { useSimpleAuthClient } from "../provider"

type SignInInput = {
  email: string
  password: string
}

function getErrorMessage(error: unknown) {
  if (error instanceof SimpleAuthError) {
    return error.message
  }

  if (error instanceof Error) {
    return error.message
  }

  return "Unable to sign in."
}

export function useSignIn() {
  const auth = useSimpleAuthClient()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [data, setData] = useState<LoginResponse | null>(null)

  async function signIn(input: SignInInput) {
    setIsLoading(true)
    setError(null)

    try {
      const response = await auth.login(input)
      setData(response)
      return response
    } catch (requestError) {
      setData(null)
      setError(getErrorMessage(requestError))
      throw requestError
    } finally {
      setIsLoading(false)
    }
  }

  function reset() {
    setData(null)
    setError(null)
    setIsLoading(false)
  }

  return {
    signIn,
    data,
    error,
    isError: Boolean(error),
    isLoading,
    reset,
  }
}

Customisation

Owned by you

Edit components/simpleauth/ui/sign-in-form.tsx and components/simpleauth/styles/sign-in-form.css directly. The CLI only overwrites them when you run add with --force.

Swap the submit button label, plug in your design system inputs, or add a loading spinner tied to useSignIn internals.

SignInForm

On this page