dauth-context-react 0.2.120 → 0.2.122

package/README.md

@@ -1,68 +1,291 @@
-# IMPORTANT
-This package 
+# dauth-context-react
 
-# Dauth React Context
-This is a simple example of how to use a custom `DauthProvider`, and how to utilize the `Dauth` authentication context in your React application.
+React context provider and hook for token-based authentication with the [DAuth](https://dauth.ovh) service. Provides `DauthProvider` and `useDauth()` hook for seamless integration of DAuth tenant authentication into React applications.
 
 ## Installation
-You can install this package via npm. Make sure you have Node.js installed on your machine. Then, in your project directory, run the following command:
+
 ```bash
 npm install dauth-context-react
+# or
+yarn add dauth-context-react
 ```
 
-## Code Example
-Here's a simplified example of how to use Dauth Provider:
-```
+### Peer Dependencies
+
+- `react` >= 16
+
+## Quick Start
+
+### 1. Wrap your app with `DauthProvider`
+
+```tsx
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
+import { DauthProvider } from 'dauth-context-react';
 import router from './router/router';
-import  { DauthProvider } from 'dauth-context-react';
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <DauthProvider
-    domainName={domainName}
-    sid={sid}
-    ssid={ssid}
+    domainName="your-domain-name"
+    tsk="your-tenant-secret-key"
   >
-    <RouterProvider 
-      router={router} 
-      fallbackElement={<></>} 
-    />
-  </DauthProvider>,
-  document.getElementById('root')
+    <RouterProvider router={router} fallbackElement={<></>} />
+  </DauthProvider>
 );
 ```
 
-## Example: Using Authentication Context
-Here's an example of how to use the authentication context (dauth-context-react) in your components:
+### 2. Use the `useDauth()` hook in your components
+
+```tsx
+import { useDauth } from 'dauth-context-react';
+
+function MyComponent() {
+  const {
+    isAuthenticated,
+    isLoading,
+    user,
+    loginWithRedirect,
+    logout,
+    getAccessToken,
+  } = useDauth();
+
+  if (isLoading) return <div>Loading...</div>;
+
+  if (isAuthenticated) {
+    return (
+      <div>
+        <p>Hello, {user.name}!</p>
+        <button onClick={logout}>Logout</button>
+      </div>
+    );
+  }
+
+  return <button onClick={loginWithRedirect}>Login</button>;
+}
+```
+
+## API
+
+### `<DauthProvider>`
+
+| Prop | Type | Description |
+|---|---|---|
+| `domainName` | `string` | Your DAuth domain name (used for API routing and tenant resolution) |
+| `tsk` | `string` | Tenant Secret Key for JWT verification |
+| `children` | `React.ReactNode` | Child components |
+
+### `useDauth()` Hook
+
+Returns the current authentication state and action methods:
+
+| Property | Type | Description |
+|---|---|---|
+| `user` | `IDauthUser` | Authenticated user object |
+| `domain` | `IDauthDomainState` | Domain configuration (name, loginRedirect, allowedOrigins) |
+| `isLoading` | `boolean` | `true` while initial auth check is in progress |
+| `isAuthenticated` | `boolean` | `true` if user is authenticated |
+| `loginWithRedirect` | `() => void` | Redirects to the DAuth tenant sign-in page |
+| `logout` | `() => void` | Clears token and resets auth state |
+| `getAccessToken` | `() => Promise<string>` | Returns a fresh access token (refreshes if needed) |
+| `updateUser` | `(fields: Partial<IDauthUser>) => Promise<boolean>` | Updates user profile fields |
+| `updateUserWithRedirect` | `() => void` | Redirects to the DAuth user update page |
+| `sendEmailVerification` | `() => Promise<boolean>` | Sends a verification email to the user |
+| `sendEmailVerificationStatus` | `{ status: IActionStatus, isLoading: boolean }` | Status of the email verification request |
+
+### `IDauthUser`
+
+```typescript
+interface IDauthUser {
+  _id: string;
+  name: string;
+  lastname: string;
+  nickname: string;
+  email: string;
+  isVerified: boolean;
+  language: string;
+  avatar: { id: string; url: string };
+  role: string;
+  telPrefix: string;
+  telSuffix: string;
+  createdAt: Date;
+  updatedAt: Date;
+  lastLogin: Date;
+}
+```
+
+## Real-World Integration Example
+
+This is the pattern used in `easymediacloud-frontend-react`, which delegates all user authentication to dauth.
+
+### 1. Provider hierarchy in `App.tsx`
+
+```tsx
+// src/App.tsx
+import { DauthProvider } from 'dauth-context-react';
+import { LicensesProvider } from './context/licenses/LicensesProvider';
+import { RouterProvider } from 'react-router-dom';
+import router from './router/router';
+import config from './config/config';
+
+function App() {
+  return (
+    <DauthProvider
+      domainName={config.services.dauth.DOMAIN_NAME as string}
+      tsk={config.services.dauth.TSK as string}
+    >
+      <LicensesProvider>
+        <RouterProvider router={router} fallbackElement={<></>} />
+      </LicensesProvider>
+    </DauthProvider>
+  );
+}
+```
+
+Environment variables (`.env.development`):
+```
+REACT_APP_DAUTH_DOMAIN_NAME=your-domain-name
+REACT_APP_DAUTH_TSK=your-tenant-secret-key
 ```
-import React, { useContext } from 'react';
+
+### 2. Route protection with `EnsureAuthenticated`
+
+```tsx
+// src/router/middlewares.tsx
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useDauth } from 'dauth-context-react';
+import { routes } from './routes';
+
+export function EnsureAuthenticated({ children }: { children: React.ReactNode }) {
+  const { isAuthenticated, isLoading } = useDauth();
+  const navigate = useNavigate();
 
-function SomeComponent() {
-  const { isAuthenticated, isLoading, user, loginWithRedirect, logout, getAccessToken } = useDauth();
+  useEffect(() => {
+    if (!isAuthenticated && !isLoading) {
+      navigate(routes.home);
+    }
+  }, [isAuthenticated, isLoading, navigate]);
+
+  return <>{children}</>;
+}
+
+// In router config:
+{
+  path: '/license/:id',
+  element: (
+    <EnsureAuthenticated>
+      <LicenseDetail />
+    </EnsureAuthenticated>
+  ),
+}
+```
+
+### 3. Passing tokens to API calls from a context provider
+
+```tsx
+// src/context/licenses/LicensesProvider.tsx
+import { useCallback, useReducer } from 'react';
+import { useDauth } from 'dauth-context-react';
+
+function LicensesProvider({ children }: { children: React.ReactNode }) {
+  const [state, dispatch] = useReducer(licenseReducer, initialState);
+  const { getAccessToken } = useDauth();
+
+  const getLicenses = useCallback(async () => {
+    const token = await getAccessToken();
+    const { data } = await fetchLicenses(token);
+    dispatch({ type: 'SET_LICENSES', payload: data });
+  }, [getAccessToken]);
+
+  const createLicense = useCallback(async (name: string) => {
+    const token = await getAccessToken();
+    await postLicense({ name, token });
+  }, [getAccessToken]);
+
+  return (
+    <LicensesContext.Provider value={{ ...state, getLicenses, createLicense }}>
+      {children}
+    </LicensesContext.Provider>
+  );
+}
+```
+
+### 4. Using `useDauth()` in components
+
+```tsx
+// src/views/components/ProfileIcon.tsx
+import { useDauth } from 'dauth-context-react';
+
+function ProfileIcon() {
+  const { user, isAuthenticated, loginWithRedirect, logout, updateUserWithRedirect } = useDauth();
 
   return (
-    isLoading ? <div>Loading...</div> :
-      isAuthenticated ? (
-        <div>
-          Hello {user.name}
-          <button onClick={() => logout()}>Logout</button>
-        </div>
+    <Popover title={user.email}>
+      {isAuthenticated ? (
+        <>
+          <Avatar src={user.avatar?.url} />
+          <button onClick={updateUserWithRedirect}>My Profile</button>
+          <button onClick={logout}>Logout</button>
+        </>
       ) : (
-        <div>
-          <button onClick={() => loginWithRedirect()}>Login</button>
-        </div>
-      )
+        <button onClick={loginWithRedirect}>Login</button>
+      )}
+    </Popover>
   );
 }
+```
+
+### 5. Language sync from dauth user
+
+```tsx
+// src/views/layouts/LayoutBasic.tsx
+import { useDauth } from 'dauth-context-react';
+import i18n from 'i18next';
+
+function LayoutMain() {
+  const { user } = useDauth();
 
-export default SomeComponent;
+  useEffect(() => {
+    i18n.changeLanguage(user.language);
+  }, [user.language]);
+
+  return <Outlet />;
+}
 ```
 
-## About
-This project is maintained by David T. Pizarro Frick.
+## How It Works
+
+1. **On mount:** Checks the URL for a redirect token (`?dauth_state=...`), then attempts auto-login from localStorage.
+2. **Token verification:** Runs a 5-minute interval to verify the stored token is still valid against the DAuth backend.
+3. **Localhost detection:** Automatically routes API calls to `localhost:4012` during development (detects `localhost`, `127.0.0.1`, `[::1]`, and `192.168.x.x`) and to `https://<domainName>.dauth.ovh` in production.
+4. **Token storage:** Tokens are stored in localStorage under the key `dauth_state`.
+
+## Development
+
+```bash
+npm start          # Watch mode (tsdx watch)
+npm run build      # Production build (CJS + ESM)
+npm test           # Run Jest tests
+npm run lint       # ESLint via tsdx
+npm run size       # Check bundle size (10KB budget per entry)
+npm run analyze    # Bundle size analysis with visualization
+```
+
+### Bundle Outputs
+
+- **CJS:** `dist/index.js` (with `.development.js` and `.production.min.js` variants)
+- **ESM:** `dist/dauth-context-react.esm.js`
+- **Types:** `dist/index.d.ts`
+
+### CI
+
+GitHub Actions runs lint, tests with coverage, and build across Node 20.x on Ubuntu, Windows, and macOS.
+
+## Author
+
+David T. Pizarro Frick
 
 ## License
-This project is licensed under the MIT License.
+
+MIT

package/dist/dauth-context-react.cjs.development.js

@@ -355,7 +355,7 @@ function _extends() {
 
 var initialDauthState = {
   user: {
-    language: /*#__PURE__*/window.document.documentElement.getAttribute('lang') || 'es'
+    language: (typeof window !== 'undefined' ? /*#__PURE__*/window.document.documentElement.getAttribute('lang') : null) || 'es'
   },
   domain: {},
   isLoading: true,
@@ -447,14 +447,19 @@ var routes = {
   tenantGetUser: 't-get-user',
   tenantResendEmailVerification: 't-resend-email-verification',
   tenantRefreshAccessToken: 't-refresh-access-token',
-  tenantVerifyToken: "t-verify-token"
+  tenantVerifyToken: 't-verify-token'
 };
 
-var isLocalhost = /*#__PURE__*/Boolean(window.location.hostname === 'localhost' || window.location.hostname === '[::1]' || /*#__PURE__*/window.location.hostname.match(/(192)\.(168)\.(1)\.([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/gm) || /*#__PURE__*/window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));
 var apiVersion = 'v1';
 var serverDomain = 'dauth.ovh';
+function checkIsLocalhost() {
+  if (typeof window === 'undefined') return false;
+  var hostname = window.location.hostname;
+  return Boolean(hostname === 'localhost' || hostname === '[::1]' || hostname.match(/(192)\.(168)\.(1)\.([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/gm) || hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));
+}
 function getServerBasePath(_ref) {
   var domainName = _ref.domainName;
+  var isLocalhost = checkIsLocalhost();
   var serverPort = 4012;
   var serverLocalUrl = window.location.protocol + "//" + window.location.hostname + ":" + serverPort + "/api/" + apiVersion;
   var serverProdUrl = "https://" + domainName + "." + serverDomain + "/api/" + apiVersion;
@@ -463,6 +468,7 @@ function getServerBasePath(_ref) {
 }
 function getClientBasePath(_ref2) {
   var domainName = _ref2.domainName;
+  var isLocalhost = checkIsLocalhost();
   var clientPort = 5185;
   var clientLocalUrl = window.location.protocol + "//" + window.location.hostname + ":" + clientPort;
   var clientProdUrl = "https://" + domainName + "." + serverDomain;
@@ -706,7 +712,7 @@ function _setDauthStateAction() {
         case 15:
           _context.prev = 15;
           _context.t0 = _context["catch"](2);
-          console.log(_context.t0);
+          console.error(_context.t0);
           return _context.abrupt("return", resetUser(dispatch));
         case 19:
           _context.prev = 19;
@@ -730,7 +736,7 @@ function setAutoLoginAction(_x2) {
 }
 function _setAutoLoginAction() {
   _setAutoLoginAction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2) {
-    var dispatch, token_ls, domainName, refreshAccessTokenFetch, getUserFetch;
+    var dispatch, token_ls, domainName, refreshAccessTokenFetch, newToken, getUserFetch;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -747,15 +753,16 @@ function _setAutoLoginAction() {
         case 5:
           refreshAccessTokenFetch = _context2.sent;
           if (!(refreshAccessTokenFetch.response.status === 200)) {
-            _context2.next = 20;
+            _context2.next = 21;
             break;
           }
-          _context2.next = 9;
-          return getUserAPI(domainName, token_ls);
-        case 9:
+          newToken = refreshAccessTokenFetch.data.accessToken || token_ls;
+          _context2.next = 10;
+          return getUserAPI(domainName, newToken);
+        case 10:
           getUserFetch = _context2.sent;
           if (!(getUserFetch.response.status === 200)) {
-            _context2.next = 16;
+            _context2.next = 17;
             break;
           }
           dispatch({
@@ -768,41 +775,41 @@ function _setAutoLoginAction() {
           });
           localStorage.setItem(TOKEN_LS, refreshAccessTokenFetch.data.accessToken);
           return _context2.abrupt("return");
-        case 16:
+        case 17:
           window.location.replace(getClientBasePath({
             domainName: domainName
           }) + "/" + routes.tenantSignin + "/" + domainName);
           return _context2.abrupt("return", resetUser(dispatch));
-        case 18:
-          _context2.next = 22;
+        case 19:
+          _context2.next = 23;
           break;
-        case 20:
+        case 21:
           window.location.replace(getClientBasePath({
             domainName: domainName
           }) + "/" + routes.tenantSignin + "/" + domainName);
           return _context2.abrupt("return", resetUser(dispatch));
-        case 22:
-          _context2.next = 28;
+        case 23:
+          _context2.next = 29;
           break;
-        case 24:
-          _context2.prev = 24;
+        case 25:
+          _context2.prev = 25;
           _context2.t0 = _context2["catch"](2);
-          console.log(_context2.t0);
+          console.error(_context2.t0);
           return _context2.abrupt("return", resetUser(dispatch));
-        case 28:
-          _context2.prev = 28;
+        case 29:
+          _context2.prev = 29;
           dispatch({
             type: SET_IS_LOADING,
             payload: {
               isLoading: false
             }
           });
-          return _context2.finish(28);
-        case 31:
+          return _context2.finish(29);
+        case 32:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[2, 24, 28, 31]]);
+    }, _callee2, null, [[2, 25, 29, 32]]);
   }));
   return _setAutoLoginAction.apply(this, arguments);
 }
@@ -870,7 +877,7 @@ function _setUpdateUserAction() {
           });
           return _context3.abrupt("return", true);
         case 14:
-          console.log('Update user error', getUserFetch.data.message);
+          console.error('Update user error', getUserFetch.data.message);
           return _context3.abrupt("return", false);
         case 16:
           _context3.next = 22;
@@ -878,7 +885,7 @@ function _setUpdateUserAction() {
         case 18:
           _context3.prev = 18;
           _context3.t0 = _context3["catch"](5);
-          console.log('Update user error', _context3.t0);
+          console.error('Update user error', _context3.t0);
           return _context3.abrupt("return", false);
         case 22:
         case "end":
@@ -985,28 +992,31 @@ function _checkTokenAction() {
         case 4:
           refreshAccessTokenFetch = _context5.sent;
           if (!(refreshAccessTokenFetch.response.status === 200)) {
-            _context5.next = 9;
+            _context5.next = 10;
             break;
           }
+          if (refreshAccessTokenFetch.data.accessToken) {
+            localStorage.setItem(TOKEN_LS, refreshAccessTokenFetch.data.accessToken);
+          }
           return _context5.abrupt("return");
-        case 9:
+        case 10:
           window.location.replace(getClientBasePath({
             domainName: domainName
           }) + "/" + routes.tenantSignin + "/" + domainName);
           return _context5.abrupt("return", resetUser(dispatch));
-        case 11:
-          _context5.next = 17;
+        case 12:
+          _context5.next = 18;
           break;
-        case 13:
-          _context5.prev = 13;
+        case 14:
+          _context5.prev = 14;
           _context5.t0 = _context5["catch"](1);
           resetUser(dispatch);
           throw _context5.t0;
-        case 17:
+        case 18:
         case "end":
           return _context5.stop();
       }
-    }, _callee5, null, [[1, 13]]);
+    }, _callee5, null, [[1, 14]]);
   }));
   return _checkTokenAction.apply(this, arguments);
 }
@@ -1210,7 +1220,7 @@ var DauthProvider = function DauthProvider(props) {
           case 0:
             token_ls = localStorage.getItem(TOKEN_LS);
             if (!(token_ls && !dauthState.isAuthenticated)) {
-              _context4.next = 11;
+              _context4.next = 13;
               break;
             }
             _context4.next = 4;
@@ -1232,6 +1242,16 @@ var DauthProvider = function DauthProvider(props) {
             });
             throw new Error('Ask value in DauthProvider is not valid');
           case 11:
+            _context4.next = 14;
+            break;
+          case 13:
+            return _context4.abrupt("return", dispatch({
+              type: SET_IS_LOADING,
+              payload: {
+                isLoading: false
+              }
+            }));
+          case 14:
           case "end":
             return _context4.stop();
         }
@@ -1242,7 +1262,7 @@ var DauthProvider = function DauthProvider(props) {
     return window.location.replace(getClientBasePath({
       domainName: domainName
     }) + "/" + routes.tenantSignin + "/" + domainName);
-  }, [domainName, domainName]);
+  }, [domainName]);
   var logout = React.useCallback(function () {
     return setLogoutAction({
       dispatch: dispatch
@@ -1266,7 +1286,7 @@ var DauthProvider = function DauthProvider(props) {
           return _context5.stop();
       }
     }, _callee5);
-  })), []);
+  })), [domainName]);
   var updateUser = React.useCallback( /*#__PURE__*/function () {
     var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(_ref6) {
       var name, lastname, nickname, telPrefix, telSuffix, language, avatar, token_ls, user;
@@ -1309,7 +1329,7 @@ var DauthProvider = function DauthProvider(props) {
     return window.location.replace(getClientBasePath({
       domainName: domainName
     }) + "/" + routes.tenantUpdateUser + "/" + domainName + "/" + token_ls);
-  }, [domainName, domainName]);
+  }, [domainName]);
   var sendEmailVerification = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
     var token_ls;
     return _regeneratorRuntime().wrap(function _callee7$(_context7) {