useSignUp

Overview

useSignUp wraps auth.register(). It mirrors the useSignIn ergonomics so sign-up forms can share the same UX patterns.

Signature

export function useSignUp()

Parameters

This hook takes no parameters.

Returns

Field	Type	Description
`signUp`	`(input: { email: string; password: string; name?: string }) => Promise<RegisterResponse>`	Calls `auth.register`.
`data`	`RegisterResponse \| null`	Last successful registration response.
`error`	`string \| null`	Human-readable error string when registration fails.
`isError`	`boolean`	Convenience flag derived from `error`.
`isLoading`	`boolean`	True while a registration request is running.
`reset`	`() => void`	Clears local hook state.
`needsVerification`	`boolean`	`true` when the last `data.user.emailVerified === false`.
`sendVerificationEmail`	`(email: string) => Promise<unknown>`	Calls `auth.sendVerificationEmail`.
`isSendingVerification`	`boolean`	True while a resend request runs.
`verificationError`	`string \| null`	Error string for the resend call.
`verificationSent`	`boolean`	`true` after a successful resend.

Example

"use client"

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

export function RegisterPanel() {
  const { signUp, isLoading, error } = useSignUp()

  async function onSubmit(formData: FormData) {
    await signUp({
      email: String(formData.get("email") ?? ""),
      password: String(formData.get("password") ?? ""),
      name: String(formData.get("name") ?? "") || undefined,
    })
  }

  return (
    <form action={async (fd) => onSubmit(fd)}>
      <input name="name" type="text" />
      <input name="email" type="email" required />
      <input name="password" type="password" required minLength={8} />
      {error ? <p>{error}</p> : null}
      <button type="submit" disabled={isLoading}>
        {isLoading ? "Creating account…" : "Create account"}
      </button>
    </form>
  )
}

How it works

Uses the shared browser client from SimpleAuthProvider.
Converts SDK failures into a string error for easy rendering.
Resets optimistic state via reset() when you need a clean slate.

Shipped by

npx @simpleauthjs/react add sign-up

Source

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

"use client"

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

type SignUpInput = {
  email: string
  password: string
  name?: string
}

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

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

  return "Unable to sign up."
}

export function useSignUp() {
  const auth = useSimpleAuthClient()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [data, setData] = useState<RegisterResponse | null>(null)
  const [isSendingVerification, setIsSendingVerification] = useState(false)
  const [verificationError, setVerificationError] = useState<string | null>(null)
  const [verificationSent, setVerificationSent] = useState(false)

  const needsVerification = data?.user.emailVerified === false

  async function signUp(input: SignUpInput) {
    setIsLoading(true)
    setError(null)
    setVerificationError(null)
    setVerificationSent(false)

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

  const sendVerificationEmail = useCallback(
    async (email: string) => {
      setIsSendingVerification(true)
      setVerificationError(null)
      try {
        await auth.sendVerificationEmail({ email })
        setVerificationSent(true)
      } catch (requestError) {
        setVerificationSent(false)
        setVerificationError(getErrorMessage(requestError))
        throw requestError
      } finally {
        setIsSendingVerification(false)
      }
    },
    [auth],
  )

  function reset() {
    setData(null)
    setError(null)
    setIsLoading(false)
    setIsSendingVerification(false)
    setVerificationError(null)
    setVerificationSent(false)
  }

  return {
    signUp,
    data,
    error,
    isError: Boolean(error),
    isLoading,
    reset,
    needsVerification,
    sendVerificationEmail,
    isSendingVerification,
    verificationError,
    verificationSent,
  }
}

useSignUp

On this page