@tailor-platform/app-shell 0.18.0 → 0.19.0

package/dist/index.d.ts

@@ -1,6 +1,7 @@
+import { AuthState } from '@tailor-platform/auth-browser-client';
+import { DocumentNode } from 'graphql';
 import { JSX } from 'react/jsx-runtime';
 import { Link } from 'react-router';
-import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { useLocation } from 'react-router';
 import { useNavigate } from 'react-router';
@@ -89,32 +90,127 @@ export declare type AppShellProps = React.PropsWithChildren<{
     errorBoundary?: ErrorBoundaryComponent;
 }>;
 
+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>;
+};
+
 /**
- * We need to build a Login URL with the correct parameters to redirect
- * to our OAuth endpoint login page
+ * Authentication provider component.
+ *
+ * Wrap your application with this component to provide authentication context.
+ *
+ * @example
+ * ```tsx
+ * import { AuthProvider } from "@tailor-platform/app-shell";
+ *
+ * function App() {
+ *   return (
+ *     <AuthProvider
+ *       apiEndpoint="https://xyz.erp.dev"
+ *       clientId="your-client-id"
+ *     >
+ *       <YourAppComponents />
+ *     </AuthProvider>
+ *   );
+ * }
+ * ```
  */
-export declare const buildAuthorizationUrl: ({ apiEndpoint, clientId, state, codeChallenge, redirectUri, }: BuildAuthorizationUrlParams) => string;
+export declare const AuthProvider: (props: React.PropsWithChildren<AuthProviderProps>) => JSX.Element;
 
-declare interface BuildAuthorizationUrlParams {
+declare type AuthProviderProps = {
+    /**
+     * API endpoint of your Tailor Platform application. No `/query` suffix needed.
+     *
+     * @example https://xyz.erp.dev
+     */
     apiEndpoint: string;
+    /**
+     * OAuth2 Client ID of your Tailor Platform application.
+     */
     clientId: string;
-    state: string;
-    codeChallenge: 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;
-}
-
-declare interface BuiltinIdPAuthContextType {
     /**
-     * Initiates the login process by redirecting to the OAuth2 authorization endpoint.
+     * Enable automatic login on initialization.
      */
-    login: () => Promise<void>;
+    autoLogin?: boolean;
     /**
-     * Logs out the user by revoking the token and clearing session data.
+     * Guard UI component to show when loading or unauthenticated.
+     *
+     * If not provided, children will be just rendered in any auth state.
      */
-    logout: () => Promise<void>;
-}
+    guardComponent?: () => React.ReactNode;
+};
 
-export declare const BuiltinIdPAuthProvider: ({ apiEndpoint, clientId, redirectUri, children, }: PropsWithChildren<Props>) => JSX.Element;
+/**
+ * Registerable interface for type extension via module augmentation.
+ *
+ * @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;
+ *     }
+ *   }
+ * }
+ */
+export declare interface AuthRegister {
+}
 
 declare type CommonModuleProps = {
     /**
@@ -157,6 +253,26 @@ 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.
  *
@@ -353,33 +469,6 @@ declare type DynamicLocales<Def extends Record<string, LabelValue>> = {
  */
 export declare type ErrorBoundaryComponent = ReactNode;
 
-/**
- * We need to exchange the code and state we received from the OAuth endpoint
- * for an actual authorization token, in Browser Client case, we get the token
- * inside of a cookie so there is nothing else to do beyond that point
- */
-export declare const exchangeCodeForToken: ({ code, returnedState, apiEndpoint, clientId, redirectUri, }: ExchangeCodeForTokenParams) => Promise<string>;
-
-declare interface ExchangeCodeForTokenParams {
-    apiEndpoint: string;
-    clientId: string;
-    returnedState: string | null;
-    code: string | null;
-    redirectUri?: string;
-    silent?: boolean;
-}
-
-/**
- * When redirected from our IdP Provider, we need to exchange code and state
- * for a token and clean up the URL params
- */
-export declare const handleOAuthCallback: ({ currentUrl, apiEndpoint, clientId, redirectUri, }: {
-    currentUrl: URL;
-    apiEndpoint: string;
-    clientId: string;
-    redirectUri: string;
-}) => Promise<void>;
-
 export declare type I18nLabels<Def extends Record<string, LabelValue> = Record<string, LabelValue>, L extends string = never> = {
     en: Def;
 } & {
@@ -432,38 +521,6 @@ declare type NavItem = {
     items?: Array<NavChildItem>;
 };
 
-export declare const OAUTH_STATE_KEY = "oauth_state";
-
-export declare const PKCE_VERIFIER_KEY = "oauth_pkce_verifier";
-
-/**
- * We need to generate a challenge and state key for OAuth login
- * and stores them in sessionStorage for verification on callback redirect
- */
-export declare const prepareLogin: () => Promise<{
-    codeChallenge: string;
-    state: string;
-}>;
-
-declare type Props = {
-    /**
-     * API endpoint of your Tailor Platform application. No `/query` suffix needed.
-     *
-     * @example https://xyz.erp.dev
-     */
-    apiEndpoint: string;
-    /**
-     * OAuth2 Client ID of your Tailor Platform application.
-     */
-    clientId: string;
-    /**
-     * Redirect URI after login is successful.
-     *
-     * @defaults `window.location.origin`
-     */
-    redirectUri?: string;
-};
-
 declare type ReactResourceProps = {
     /**
      * React component to render.
@@ -555,7 +612,7 @@ declare type ThemeProviderState = {
 
 export declare const useAppShell: () => AppShellContextType;
 
-export declare const useBuiltinIdpAuth: () => BuiltinIdPAuthContextType;
+export declare const useAuth: () => AuthContextType;
 
 export { useLocation }
 
@@ -563,6 +620,16 @@ 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 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-platform/app-shell",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "type": "module",
   "exports": {
     "./styles": "./dist/app-shell.css",
@@ -22,21 +22,21 @@
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-navigation-menu": "^1.2.5",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@tailor-platform/auth-browser-client": "^0.3.0",
     "@tanstack/react-table": "^8.21.2",
-    "@urql/core": "^6.0.0",
-    "@urql/exchange-auth": "^3.0.0",
     "change-case": "^5.4.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.41.0",
+    "graphql": "^16.12.0",
     "lucide-react": "^0.487.0",
     "next-themes": "^0.4.6",
     "oauth4webapi": "^3.8.1",
@@ -45,8 +45,7 @@
     "react-hook-form": "^7.54.2",
     "react-router": "^7.4.0",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
-    "urql": "^5.0.1"
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.2",
@@ -54,9 +53,8 @@
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "happy-dom": "^20.0.11",
     "@vitejs/plugin-react": "^5.1.1",
-    "msw": "^2.11.2",
+    "happy-dom": "^20.0.11",
     "postcss": "^8",
     "prettier": "^3.6.2",
     "tailwindcss": "^4.1.3",