SimpleAuthProvider

Overview

SimpleAuthProvider stores the SimpleAuthClient instance that hooks read via useSimpleAuthClient. Pass an explicit client when you need custom configuration; otherwise the generated provider calls getSimpleAuthClient() which reads your public environment variables.

Preview

Interactive preview requires JavaScript.

Install

npx @simpleauthjs/react init

Props

Name	Type	Required	Default	Description
`children`	`ReactNode`	Yes	—	Your application tree.
`client`	`SimpleAuthClient`	No	`undefined`	Optional explicit client. When omitted, the generated helper builds one from env vars.

Usage

Auto client from environment variables

import type { ReactNode } from "react"
import { SimpleAuthProvider } from "@/components/simpleauth/provider"

export function AppShell({ children }: { children: ReactNode }) {
  return <SimpleAuthProvider>{children}</SimpleAuthProvider>
}

Custom client instance

import type { ReactNode } from "react"
import { createSimpleAuthClient } from "@simpleauthjs/core"
import { SimpleAuthProvider } from "@/components/simpleauth/provider"

const client = createSimpleAuthClient({
  apiKey: process.env.NEXT_PUBLIC_SIMPLEAUTH_PUBLIC_KEY!,
})

export function AppShell({ children }: { children: ReactNode }) {
  return <SimpleAuthProvider client={client}>{children}</SimpleAuthProvider>
}

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()
}

Customisation

Owned by you

This file lives at components/simpleauth/provider.tsx. Adjust how the client is created, add logging, or integrate with your DI layer without forking the CLI.

Add analytics when the provider mounts, swap in a mocked client during tests, or wrap children with additional context providers.

SimpleAuthProvider

On this page