diff --git a/packages/auth/README.md b/packages/auth/README.md index d1258d09f7..8e7c95fd2e 100644 --- a/packages/auth/README.md +++ b/packages/auth/README.md @@ -25,16 +25,18 @@ npm install @object-ui/auth ## Quick Start ```tsx -import { AuthProvider, useAuth, AuthGuard } from '@object-ui/auth'; -import { createAuthClient } from '@object-ui/auth'; +import type { ReactNode } from 'react'; +import { AuthProvider, AuthGuard, createAuthClient, useAuth } from '@object-ui/auth'; -const authClient = createAuthClient({ - baseURL: 'https://api.example.com/auth', -}); +// Your app supplies the sign-in page shown to unauthenticated visitors. +declare const LoginPage: () => ReactNode; + +const authUrl = 'https://api.example.com/auth'; +const authClient = createAuthClient({ baseURL: authUrl }); function App() { return ( - + }> @@ -57,12 +59,21 @@ function Dashboard() { ### AuthProvider -Wraps your application with authentication context: +Wraps your application with authentication context. `authUrl` is **required**; +`client` is optional, and when you pass one it is used instead of the client +`AuthProvider` would otherwise build from `authUrl`: ```tsx - +import type { ReactNode } from 'react'; +import { AuthProvider } from '@object-ui/auth'; +import type { AuthClient } from '@object-ui/auth'; + +declare const authClient: AuthClient; +declare const App: () => ReactNode; + + - +; ``` ### useAuth @@ -70,6 +81,8 @@ Wraps your application with authentication context: Hook for accessing auth state and methods: ```tsx +import { useAuth } from '@object-ui/auth'; + const { user, session, @@ -100,9 +113,14 @@ const { Protects children from unauthenticated access: ```tsx +import type { ReactNode } from 'react'; +import { AuthGuard, LoginForm } from '@object-ui/auth'; + +declare const ProtectedContent: () => ReactNode; + }> - +; ``` ### LoginForm / RegisterForm / ForgotPasswordForm @@ -110,9 +128,13 @@ Protects children from unauthenticated access: Pre-built authentication form components: ```tsx - navigate('/dashboard')} /> - navigate('/welcome')} /> - navigate('/check-email')} /> +import { ForgotPasswordForm, LoginForm, RegisterForm } from '@object-ui/auth'; + +declare const navigate: (to: string) => void; + + navigate('/dashboard')} />; + navigate('/welcome')} />; + navigate('/check-email')} />; ``` ### UserMenu @@ -120,7 +142,9 @@ Pre-built authentication form components: Displays current user info with avatar and sign-out: ```tsx - +import { UserMenu } from '@object-ui/auth'; + +; ``` ### createAuthenticatedFetch @@ -129,6 +153,8 @@ Creates a fetch wrapper that injects the stored Bearer token (plus `X-Tenant-ID` and `Accept-Language`) into API requests: ```tsx +import { createAuthenticatedFetch } from '@object-ui/auth'; + const authedFetch = createAuthenticatedFetch(); // For fetches whose target URL comes from view metadata (`provider: 'api'` @@ -330,8 +356,11 @@ This feature aligns with the `PreviewModeConfig` from `@objectstack/spec/kernel` ### Usage ```tsx +import type { ReactNode } from 'react'; import { AuthProvider, PreviewBanner } from '@object-ui/auth'; +declare const Dashboard: () => ReactNode; + function App() { return (