talizen 0.2.13 → 0.2.15

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

@@ -49,11 +49,33 @@ export interface AuthProviderListResponse {
 export interface AuthOAuthLoginURLOptions extends TalizenRequestOptions {
     redirectUrl?: string;
 }
+export type User = AuthUser;
 export declare class TalizenAuthError extends Error {
     constructor(message: string);
 }
 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;
+    isAuthenticated: boolean;
+    isInitialized: boolean;
+    refresh(): Promise<AuthUser | null>;
+    login(input: AuthPasswordInput): Promise<AuthUser>;
+    login(account: string, password: string): Promise<AuthUser>;
+    register(input: AuthRegisterInput): Promise<AuthUser>;
+    register(account: string, password: string, name?: string): 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, TalizenHttpError, } from "./core.js";
 export class TalizenAuthError extends Error {
     constructor(message) {
         super(message);
@@ -17,6 +18,150 @@ export async function login(input, options) {
         body: JSON.stringify(input),
     }, options);
 }
+const authListeners = new Set();
+let currentUserState = null;
+let authErrorState = null;
+let isAuthInitialized = false;
+let isAuthLoading = false;
+let authSnapshot = readAuthSnapshot();
+let authRequestId = 0;
+let isAuthConfigSubscriptionStarted = false;
+function readAuthSnapshot() {
+    return {
+        user: currentUserState,
+        loading: isAuthLoading,
+        error: authErrorState,
+        isAuthenticated: !!currentUserState,
+        isInitialized: isAuthInitialized,
+    };
+}
+function emitAuthChange() {
+    authSnapshot = readAuthSnapshot();
+    authListeners.forEach(listener => listener());
+}
+function subscribeAuth(listener) {
+    authListeners.add(listener);
+    return () => {
+        authListeners.delete(listener);
+    };
+}
+function ensureAuthConfigSubscription() {
+    if (isAuthConfigSubscriptionStarted)
+        return;
+    isAuthConfigSubscriptionStarted = true;
+    subscribeTalizenConfig(() => {
+        void refreshAuthState().catch(() => { });
+    });
+}
+function normalizeLoginInput(input, password) {
+    if (typeof input === "string") {
+        return {
+            account: input,
+            password: password ?? "",
+        };
+    }
+    return input;
+}
+function normalizeRegisterInput(input, password, name) {
+    if (typeof input === "string") {
+        return {
+            account: input,
+            email: input,
+            password: password ?? "",
+            name,
+        };
+    }
+    return input;
+}
+function isUnauthenticatedError(error) {
+    return error instanceof TalizenHttpError && error.status === 401;
+}
+async function refreshAuthState(options) {
+    const requestId = authRequestId + 1;
+    authRequestId = requestId;
+    isAuthLoading = true;
+    authErrorState = null;
+    emitAuthChange();
+    try {
+        const user = await currentUser(options);
+        if (authRequestId === requestId) {
+            currentUserState = user;
+            authErrorState = null;
+            isAuthInitialized = true;
+            isAuthLoading = false;
+            emitAuthChange();
+        }
+        return user;
+    }
+    catch (error) {
+        if (authRequestId === requestId) {
+            currentUserState = null;
+            authErrorState = isUnauthenticatedError(error) ? null : error;
+            isAuthInitialized = true;
+            isAuthLoading = false;
+            emitAuthChange();
+        }
+        if (isUnauthenticatedError(error)) {
+            return null;
+        }
+        throw error;
+    }
+}
+function setAuthUser(user) {
+    authRequestId += 1;
+    currentUserState = user;
+    authErrorState = null;
+    isAuthInitialized = true;
+    isAuthLoading = false;
+    emitAuthChange();
+}
+/**
+ * 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 snapshot = React.useSyncExternalStore(subscribeAuth, () => authSnapshot, () => authSnapshot);
+    const optionsRef = React.useRef(options);
+    React.useEffect(() => {
+        optionsRef.current = options;
+    }, [options]);
+    const refresh = React.useCallback(async () => {
+        return refreshAuthState(optionsRef.current);
+    }, []);
+    React.useEffect(() => {
+        ensureAuthConfigSubscription();
+        void refresh().catch(() => { });
+    }, [refresh]);
+    const loginAndRefresh = React.useCallback(async (input, password) => {
+        const nextUser = await login(normalizeLoginInput(input, password), optionsRef.current);
+        setAuthUser(nextUser);
+        return nextUser;
+    }, []);
+    const registerAndRefresh = React.useCallback(async (input, password, name) => {
+        const nextUser = await register(normalizeRegisterInput(input, password, name), optionsRef.current);
+        setAuthUser(nextUser);
+        return nextUser;
+    }, []);
+    const logoutAndRefresh = React.useCallback(async () => {
+        await logout(optionsRef.current);
+        setAuthUser(null);
+    }, []);
+    const updateProfileAndRefresh = React.useCallback(async (profile) => {
+        const nextUser = await updateProfile(profile, optionsRef.current);
+        setAuthUser(nextUser);
+        return nextUser;
+    }, []);
+    return {
+        ...snapshot,
+        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.15",
   "description": "Talizen frontend SDK types for cms, form and core.",
   "type": "module",
   "license": "MIT",