@tailor-platform/app-shell 0.24.0 → 0.26.0

package/dist/index.d.ts

@@ -1,12 +1,12 @@
-import { AuthState } from '@tailor-platform/auth-browser-client';
+import { AuthClient } from '@tailor-platform/auth-public-client';
 import { ClassProp } from 'class-variance-authority/types';
-import { DocumentNode } from 'graphql';
 import { JSX } from 'react/jsx-runtime';
 import { Link } from 'react-router';
 import { LoaderFunctionArgs } from 'react-router';
 import { Params } from 'react-router';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
+import { toast } from 'sonner';
 import { useLocation } from 'react-router';
 import { useNavigate } from 'react-router';
 import { useParams } from 'react-router';
@@ -146,37 +146,19 @@ export declare type AppShellProps = React.PropsWithChildren<{
 export declare interface AppShellRegister {
 }
 
-declare type AuthContextType = {
-    /**
-     * Current authentication state.
-     */
-    authState: AuthState<User>;
-    /**
-     * Initiates the login process.
-     *
-     * This redirects the user to the Tailor Platform authentication page.
-     */
-    login: () => Promise<void>;
-    /**
-     * Logs out the current user.
-     *
-     * This clears the authentication tokens and user session.
-     */
-    logout: () => Promise<void>;
-    /**
-     * Checks the current authentication status.
-     *
-     * Remember that this method always makes a network request to verify the auth status.
-     * If the user is authenticated, returns the user information and updates `authState` in the context.
-     *
-     * This also attempts to refresh tokens internally if they are expired.
-     */
-    checkAuthStatus: () => Promise<AuthState<User>>;
-    /**
-     * OAuth callback handler.
-     */
-    handleCallback: () => Promise<void>;
-};
+export { AuthClient }
+
+/**
+ * Configuration for creating an enhanced auth client
+ */
+export declare interface AuthClientConfig {
+    /** OAuth client ID */
+    clientId: string;
+    /** Authorization server base URL (e.g., https://your-app.erp.dev) */
+    appUri: string;
+    /** Redirect URI after authorization (default: window.location.origin) */
+    redirectUri?: string;
+}
 
 /**
  * Authentication provider component.
@@ -185,14 +167,17 @@ declare type AuthContextType = {
  *
  * @example
  * ```tsx
- * import { AuthProvider } from "@tailor-platform/app-shell";
+ * import { createAuthClient, AuthProvider } from "@tailor-platform/app-shell";
+ *
+ * // Create the auth client outside of the component
+ * const authClient = createAuthClient({
+ *   clientId: "your-client-id",
+ *   appUri: "https://xyz.erp.dev",
+ * });
  *
  * function App() {
  *   return (
- *     <AuthProvider
- *       apiEndpoint="https://xyz.erp.dev"
- *       clientId="your-client-id"
- *     >
+ *     <AuthProvider client={authClient}>
  *       <YourAppComponents />
  *     </AuthProvider>
  *   );
@@ -203,39 +188,10 @@ export declare const AuthProvider: (props: React.PropsWithChildren<AuthProviderP
 
 declare type AuthProviderProps = {
     /**
-     * API endpoint of your Tailor Platform application. No `/query` suffix needed.
-     *
-     * @example https://xyz.erp.dev
+     * The EnhancedAuthClient instance created with createAuthClient from @tailor-platform/app-shell.
+     * This allows you to initialize the client outside the component.
      */
-    apiEndpoint: string;
-    /**
-     * OAuth2 Client ID of your Tailor Platform application.
-     */
-    clientId: string;
-    /**
-     * GraphQL query to fetch the current authenticated user.
-     *
-     * The result of this query should return the user object.
-     * If you override `AuthRegister["user"]`, make sure to have the fields match your custom user type.
-     *
-     * @defaults
-     * ```graphql
-     * query {
-     *   me {
-     *     id
-     *     email
-     *     name
-     *   }
-     * }
-     * ```
-     */
-    meQuery?: string | DocumentNode;
-    /**
-     * Redirect URI after login is successful.
-     *
-     * @defaults `window.location.origin`
-     */
-    redirectUri?: string;
+    client: EnhancedAuthClient;
     /**
      * Enable automatic login on initialization.
      */
@@ -249,24 +205,24 @@ declare type AuthProviderProps = {
 };
 
 /**
- * Registerable interface for type extension via module augmentation.
+ * Authentication state.
  *
- * @example
- * // In your project's TypeScript file (e.g., app-shell.d.ts, App.tsx, etc.)
- * declare module "@tailor-platform/app-shell" {
- *   interface AuthRegister {
- *     user: {
- *       id: string;
- *       email: string;
- *       name?: string;
- *       role: "admin" | "user";
- *       organizationId: string;
- *     }
- *   }
- * }
+ * This type matches the AuthState from @tailor-platform/auth-public-client.
  */
-export declare interface AuthRegister {
-}
+export declare type AuthState = {
+    /**
+     * Whether the user is authenticated.
+     */
+    isAuthenticated: boolean;
+    /**
+     * Error message if authentication failed.
+     */
+    error: string | null;
+    /**
+     * Whether the initial authentication check has completed.
+     */
+    isReady: boolean;
+};
 
 export declare function Badge({ className, variant, children, ...props }: BadgeProps): JSX.Element;
 
@@ -363,6 +319,8 @@ export declare type ContextData = AppShellRegister extends {
     contextData: infer T;
 } ? T : Record<string, unknown>;
 
+export declare function createAuthClient(config: AuthClientConfig): EnhancedAuthClient;
+
 /**
  * Date format options
  */
@@ -375,26 +333,6 @@ declare type DefaultSidebarProps = {
     footer?: React.ReactNode;
 };
 
-/**
- * Default user type when no custom user type is registered.
- *
- * You can extend this type via module augmentation:
- * @example
- * declare module "@tailor-platform/app-shell" {
- *   interface Register {
- *     user: DefaultUser & {
- *       role: "admin" | "user";
- *       organizationId: string;
- *     }
- *   }
- * }
- */
-export declare type DefaultUser = {
-    id: string;
-    email: string;
-    name?: string;
-};
-
 /**
  * Defines internationalization labels for multiple locales.
  *
@@ -627,6 +565,27 @@ declare type DynamicLocales<Def extends Record<string, LabelValue>> = {
  */
 declare type EmptyBehavior = "dash" | "hide";
 
+/**
+ * Enhanced auth client with additional helper methods
+ */
+export declare interface EnhancedAuthClient extends AuthClient {
+    /**
+     * Get the appUri used to create this client
+     */
+    getAppUri(): string;
+    /**
+     * Get Authorization and DPoP headers for protected resource requests.
+     * This version automatically uses the appUri for the /query endpoint.
+     *
+     * @param path - Optional path to append to appUri (default: "/query")
+     * @param method - HTTP method (default: "POST")
+     */
+    getAuthHeadersForQuery(path?: string, method?: string): Promise<{
+        Authorization: string;
+        DPoP: string;
+    }>;
+}
+
 /**
  * Error boundary element type for route error handling.
  *
@@ -975,7 +934,92 @@ export declare const useAppShellConfig: () => AppShellConfigContextType;
  */
 export declare const useAppShellData: () => AppShellDataContextType;
 
-export declare const useAuth: () => AuthContextType;
+/**
+ * Authentication hook.
+ *
+ * Returns authentication state and methods. Use `isReady` to check if
+ * the initial authentication check has completed before rendering
+ * authenticated content.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isAuthenticated, isReady, login, logout } = useAuth();
+ *
+ *   if (!isReady) return <Loading />;
+ *   if (!isAuthenticated) return <button onClick={login}>Log In</button>;
+ *
+ *   return <button onClick={logout}>Log Out</button>;
+ * }
+ * ```
+ */
+export declare const useAuth: () => {
+    error: string | null;
+    isAuthenticated: boolean;
+    isReady: boolean;
+    login: () => Promise<void>;
+    logout: () => Promise<void>;
+    checkAuthStatus: () => Promise<AuthState>;
+};
+
+/**
+ * Suspense-compatible authentication hook.
+ *
+ * This hook integrates with React Suspense by throwing a promise while
+ * the authentication state is loading. Use this hook when you want to
+ * leverage Suspense boundaries for loading states.
+ *
+ * This uses the `ready()` function from the underlying auth client, which
+ * returns a Promise that resolves when the initial authentication check has completed.
+ *
+ * @throws {Promise} Throws a promise while authentication is loading
+ * @throws {Error} Throws an error if used outside AuthProvider
+ *
+ * @example
+ * ```tsx
+ * import { Suspense } from 'react';
+ * import { createAuthClient, AuthProvider, useAuthSuspense } from '@tailor-platform/app-shell';
+ *
+ * const authClient = createAuthClient({
+ *   clientId: 'your-client-id',
+ *   appUri: 'https://api.example.com',
+ * });
+ *
+ * function App() {
+ *   return (
+ *     <AuthProvider client={authClient}>
+ *       <Suspense fallback={<div>Loading authentication...</div>}>
+ *         <ProtectedContent />
+ *       </Suspense>
+ *     </AuthProvider>
+ *   );
+ * }
+ *
+ * function ProtectedContent() {
+ *   const { isAuthenticated, login, logout } = useAuthSuspense();
+ *
+ *   // isReady is guaranteed to be true here (Suspense handles loading)
+ *
+ *   if (!isAuthenticated) {
+ *     return <button onClick={login}>Log In</button>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <p>Welcome!</p>
+ *       <button onClick={logout}>Log Out</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare const useAuthSuspense: () => {
+    error: string | null;
+    isAuthenticated: boolean;
+    login: () => Promise<void>;
+    logout: () => Promise<void>;
+    checkAuthStatus: () => Promise<AuthState>;
+};
 
 export { useLocation }
 
@@ -983,20 +1027,12 @@ export { useNavigate }
 
 export { useParams }
 
-/**
- * User type that can be extended via the AuthRegister interface.
- *
- * If `AuthRegister["user"]` is defined, it will be used as the User type.
- * Otherwise, the DefaultUser type will be used.
- */
-declare type User = AuthRegister extends {
-    user: infer TUser;
-} ? TUser : DefaultUser;
-
 export { useRouteError }
 
 export { useSearchParams }
 
 export declare const useTheme: () => ThemeProviderState;
 
+export declare const useToast: () => typeof toast;
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-platform/app-shell",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "type": "module",
   "exports": {
     "./styles": "./dist/app-shell.css",
@@ -28,7 +28,7 @@
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailor-platform/auth-browser-client": "^0.3.0",
+    "@tailor-platform/auth-public-client": "^0.4.0",
     "@tanstack/react-table": "^8.21.2",
     "change-case": "^5.4.4",
     "class-variance-authority": "^0.7.1",
@@ -47,7 +47,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.2",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22",
     "@types/react": "^19",