Show

Declarative gate for signed-in, signed-out, or verified-email states with an optional loading fallback.

Overview

Show reads useAuth and renders children when when matches the current session snapshot. While isLoading is true, it renders fallback (or nothing if fallback is omitted).

Preview

Interactive preview requires JavaScript.

Install

npx @simpleauthjs/react add session

Props

Name	Type	Required	Default	Description
`when`	`"signed-in" \| "signed-out" \| "email-verified"`	Yes	—	Branch to match. `email-verified` requires both a session and `user.emailVerified === true`.
`children`	`ReactNode`	Yes	—	Content to render when the branch matches.
`fallback`	`ReactNode`	No	`undefined`	Shown while the session snapshot is loading (`me()` in flight).

Usage

"use client"

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

export function AccountSettingsTeaser() {
  return (
    <Show when="signed-in" fallback={<p>Loading…</p>}>
      <p>You are signed in.</p>
    </Show>
  )
}

Source

Show is generated next to the other session helpers. The preview lists every file from add session that backs these components.

components/simpleauth/hooks/use-current-user.ts

"use client"

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

type UseCurrentUserOptions = {
  autoLoad?: boolean
}

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

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

  return "Unable to fetch current user."
}

export function useCurrentUser(options: UseCurrentUserOptions = {}) {
  const { autoLoad = true } = options
  const auth = useSimpleAuthClient()
  const [isLoading, setIsLoading] = useState(Boolean(autoLoad))
  const [error, setError] = useState<string | null>(null)
  const [data, setData] = useState<MeResponse | null>(null)

  const refresh = useCallback(async () => {
    setIsLoading(true)
    setError(null)

    try {
      const response = await auth.me()
      setData(response)
      return response
    } catch (requestError) {
      setData(null)
      setError(getErrorMessage(requestError))
      throw requestError
    } finally {
      setIsLoading(false)
    }
  }, [auth])

  useEffect(() => {
    if (!autoLoad) {
      return
    }

    refresh().catch(() => {})
  }, [autoLoad, refresh])

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

useAuth
SignedIn / SignedOut / Protected