SignOutButton

Overview

SignOutButton is a thin wrapper around useSignOut: one click calls logout on the browser client. Use children for a custom label and onSuccess to refresh the router or clear client state.

Preview

Interactive preview requires JavaScript.

Install

npx @simpleauthjs/react add sign-out

Props

Name	Type	Required	Description
`className`	`string`	No	Passed to the underlying `<button>`.
`children`	`ReactNode`	No	Button label; defaults to “Sign out”.
`onSuccess`	`() => void`	No	Runs after `logout` resolves.

Usage

"use client"

import { SignOutButton } from "@/components/simpleauth"
import { useRouter } from "next/navigation"

export function AccountMenu() {
  const router = useRouter()

  return (
    <SignOutButton onSuccess={() => router.refresh()} className="text-sm underline">
      Log out
    </SignOutButton>
  )
}

Source

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

"use client"

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

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

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

  return "Unable to sign out."
}

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

  async function signOut() {
    setIsLoading(true)
    setError(null)

    try {
      const response = await auth.logout()
      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 {
    signOut,
    data,
    error,
    isError: Boolean(error),
    isLoading,
    reset,
  }
}