talizen 0.2.13 → 0.2.14

package/README.md

@@ -120,6 +120,7 @@ import {
   logout,
   register,
   updateProfile,
+  useAuth,
 } from "talizen/auth";
 
 await register({
@@ -140,6 +141,13 @@ const providers = await listAuthProviders();
 console.log(providers.map((provider) => provider.key));
 
 await loginWithOAuth("github", { redirectUrl: "/account" });
+
+function AccountBadge() {
+  const { user, loading, logout } = useAuth();
+  if (loading) return <span>Loading...</span>;
+  if (!user) return <a href="/login">Sign in</a>;
+  return <button onClick={() => logout()}>{user.name ?? user.account ?? "Logout"}</button>;
+}
 ```
 
 ### Invoke a custom function

package/auth.d.ts

@@ -54,6 +54,23 @@ export declare class TalizenAuthError extends Error {
 }
 export declare function register(input: AuthRegisterInput, options?: TalizenRequestOptions): Promise<AuthUser>;
 export declare function login(input: AuthPasswordInput, options?: TalizenRequestOptions): Promise<AuthUser>;
+export interface UseAuthResult {
+    user: AuthUser | null;
+    loading: boolean;
+    error: unknown;
+    refresh(): Promise<AuthUser | null>;
+    login(input: AuthPasswordInput): Promise<AuthUser>;
+    register(input: AuthRegisterInput): Promise<AuthUser>;
+    logout(): Promise<void>;
+    updateProfile(profile: AuthProfile): Promise<AuthUser>;
+}
+/**
+ * Subscribe to the current auth user.
+ *
+ * The hook reloads `/auth/me` whenever `setTalizenConfig()` changes runtime
+ * config, which lets preview auth headers update the page without remounting.
+ */
+export declare function useAuth(options?: TalizenRequestOptions): UseAuthResult;
 export declare function logout(options?: TalizenRequestOptions): Promise<void>;
 export declare function currentUser(options?: TalizenRequestOptions): Promise<AuthUser | null>;
 export declare function updateProfile(profile: AuthProfile, options?: TalizenRequestOptions): Promise<AuthUser>;

package/auth.js

@@ -1,4 +1,5 @@
-import { requestJson, } from "./core.js";
+import * as React from "react";
+import { getTalizenConfig, requestJson, subscribeTalizenConfig, } from "./core.js";
 export class TalizenAuthError extends Error {
     constructor(message) {
         super(message);
@@ -17,6 +18,80 @@ export async function login(input, options) {
         body: JSON.stringify(input),
     }, options);
 }
+function readAuthConfigSnapshot() {
+    return getTalizenConfig();
+}
+/**
+ * Subscribe to the current auth user.
+ *
+ * The hook reloads `/auth/me` whenever `setTalizenConfig()` changes runtime
+ * config, which lets preview auth headers update the page without remounting.
+ */
+export function useAuth(options) {
+    const configSnapshot = React.useSyncExternalStore(subscribeTalizenConfig, readAuthConfigSnapshot, readAuthConfigSnapshot);
+    const optionsRef = React.useRef(options);
+    const requestIdRef = React.useRef(0);
+    const [state, setState] = React.useState({
+        user: null,
+        loading: true,
+        error: null,
+    });
+    React.useEffect(() => {
+        optionsRef.current = options;
+    }, [options]);
+    const refresh = React.useCallback(async () => {
+        const requestId = requestIdRef.current + 1;
+        requestIdRef.current = requestId;
+        setState(current => ({ ...current, loading: true, error: null }));
+        try {
+            const nextUser = await currentUser(optionsRef.current);
+            if (requestIdRef.current === requestId) {
+                setState({ user: nextUser, loading: false, error: null });
+            }
+            return nextUser;
+        }
+        catch (error) {
+            if (requestIdRef.current === requestId) {
+                setState(current => ({ ...current, loading: false, error }));
+            }
+            throw error;
+        }
+    }, []);
+    React.useEffect(() => {
+        void refresh().catch(() => { });
+    }, [configSnapshot, refresh]);
+    const loginAndRefresh = React.useCallback(async (input) => {
+        const nextUser = await login(input, optionsRef.current);
+        requestIdRef.current += 1;
+        setState({ user: nextUser, loading: false, error: null });
+        return nextUser;
+    }, []);
+    const registerAndRefresh = React.useCallback(async (input) => {
+        const nextUser = await register(input, optionsRef.current);
+        requestIdRef.current += 1;
+        setState({ user: nextUser, loading: false, error: null });
+        return nextUser;
+    }, []);
+    const logoutAndRefresh = React.useCallback(async () => {
+        await logout(optionsRef.current);
+        requestIdRef.current += 1;
+        setState({ user: null, loading: false, error: null });
+    }, []);
+    const updateProfileAndRefresh = React.useCallback(async (profile) => {
+        const nextUser = await updateProfile(profile, optionsRef.current);
+        requestIdRef.current += 1;
+        setState({ user: nextUser, loading: false, error: null });
+        return nextUser;
+    }, []);
+    return {
+        ...state,
+        refresh,
+        login: loginAndRefresh,
+        register: registerAndRefresh,
+        logout: logoutAndRefresh,
+        updateProfile: updateProfileAndRefresh,
+    };
+}
 export async function logout(options) {
     await requestJson("/auth/logout", {
         method: "POST",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "talizen",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "Talizen frontend SDK types for cms, form and core.",
   "type": "module",
   "license": "MIT",