useSimpleAuthClient

Overview

useSimpleAuthClient returns the SimpleAuthClient instance from React context. When no provider value exists, it falls back to getSimpleAuthClient() in the generated code so standalone modules keep working.

Signature

export function useSimpleAuthClient(): SimpleAuthClient

Parameters

This hook takes no parameters.

Returns

Field	Type	Description
(return value)	`SimpleAuthClient`	The browser SDK client used by all hooks.

Example

"use client"

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

export function SignOutButton() {
  const auth = useSimpleAuthClient()

  return (
    <button
      type="button"
      onClick={async () => {
        await auth.logout()
        window.location.reload()
      }}
    >
      Sign out
    </button>
  )
}

How it works

Reads from the context that SimpleAuthProvider sets in the generated implementation.
Memoizes the resolved client together with the optional client prop on the provider.
Shares the same instance with every hook in the folder.

Shipped by

npx @simpleauthjs/react init

Source

components/simpleauth/provider.tsx

"use client"

import { createContext, useContext, useMemo } from "react"
import type { ReactNode } from "react"
import type { SimpleAuthClient } from "@simpleauthjs/core"
import { getSimpleAuthClient } from "./client"

type SimpleAuthProviderProps = {
  children: ReactNode
  client?: SimpleAuthClient
}

const SimpleAuthContext = createContext<SimpleAuthClient | null>(null)

export function SimpleAuthProvider({ children, client }: SimpleAuthProviderProps) {
  const value = useMemo(() => client ?? getSimpleAuthClient(), [client])

  return (
    <SimpleAuthContext.Provider value={value}>{children}</SimpleAuthContext.Provider>
  )
}

export function useSimpleAuthClient() {
  const contextClient = useContext(SimpleAuthContext)
  return contextClient ?? getSimpleAuthClient()
}

useSimpleAuthClient

On this page