dauth-context-react 4.0.4 → 6.0.0

package/src/api/dauth.api.ts

@@ -1,118 +1,87 @@
-import { getServerBasePath } from './utils/config';
 import { IDauthUser } from '../interfaces';
 import {
-  IdeleteAccountAPIResponse,
-  IExchangeCodeAPIResponse,
-  IgetUserAPIResponse,
-  IrefreshTokenAPIResponse,
-  IupdateUserAPIResponse,
+  IExchangeCodeResponse,
+  ISessionResponse,
+  IUpdateUserResponse,
+  IDeleteAccountResponse,
 } from './interfaces/dauth.api.responses';
 
-export const getUserAPI = async (
-  domainName: string,
-  token: string
-): Promise<IgetUserAPIResponse> => {
-  const params = {
-    method: 'GET',
-    headers: {
-      Authorization: token,
-      'Content-Type': 'application/json',
-    },
-  };
-  const response = await fetch(
-    `${getServerBasePath()}/app/${domainName}/user`,
-    params
+function getCsrfToken(): string {
+  const match = document.cookie.match(
+    /(?:^|;\s*)(?:__Host-csrf|csrf-token)=([^;]*)/
   );
+  if (!match?.[1]) return '';
+  try {
+    return decodeURIComponent(match[1]);
+  } catch {
+    return match[1];
+  }
+}
+
+export async function exchangeCodeAPI(
+  basePath: string,
+  code: string
+): Promise<IExchangeCodeResponse> {
+  const response = await fetch(`${basePath}/exchange-code`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify({ code }),
+  });
   const data = await response.json();
   return { response, data };
-};
+}
 
-export const updateUserAPI = async (
-  domainName: string,
-  user: Partial<IDauthUser>,
-  token: string
-): Promise<IupdateUserAPIResponse> => {
-  const params = {
-    method: 'PATCH',
-    headers: {
-      Authorization: token,
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(user),
-  };
-  const response = await fetch(
-    `${getServerBasePath()}/app/${domainName}/user`,
-    params
-  );
+export async function getSessionAPI(
+  basePath: string
+): Promise<ISessionResponse> {
+  const response = await fetch(`${basePath}/session`, {
+    method: 'GET',
+    credentials: 'include',
+  });
   const data = await response.json();
   return { response, data };
-};
+}
 
-export const refreshTokenAPI = async (
-  domainName: string,
-  refreshToken: string
-): Promise<IrefreshTokenAPIResponse> => {
-  const params = {
+export async function logoutAPI(
+  basePath: string
+): Promise<{ response: Response }> {
+  const response = await fetch(`${basePath}/logout`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ refreshToken }),
-  };
-  const response = await fetch(
-    `${getServerBasePath()}/app/${domainName}/refresh-token`,
-    params
-  );
-  const data = await response.json();
-  return { response, data };
-};
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-Token': getCsrfToken(),
+    },
+    credentials: 'include',
+  });
+  return { response };
+}
 
-export const deleteAccountAPI = async (
-  domainName: string,
-  token: string
-): Promise<IdeleteAccountAPIResponse> => {
-  const params = {
-    method: 'DELETE',
+export async function updateUserAPI(
+  basePath: string,
+  user: Partial<IDauthUser>
+): Promise<IUpdateUserResponse> {
+  const response = await fetch(`${basePath}/user`, {
+    method: 'PATCH',
     headers: {
-      Authorization: token,
       'Content-Type': 'application/json',
+      'X-CSRF-Token': getCsrfToken(),
     },
-  };
-  const response = await fetch(
-    `${getServerBasePath()}/app/${domainName}/user`,
-    params
-  );
+    credentials: 'include',
+    body: JSON.stringify(user),
+  });
   const data = await response.json();
   return { response, data };
-};
+}
 
-export const exchangeCodeAPI = async (
-  domainName: string,
-  code: string
-): Promise<IExchangeCodeAPIResponse> => {
-  const params = {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ code }),
-  };
-  const response = await fetch(
-    `${getServerBasePath()}/app/${domainName}/exchange-code`,
-    params
-  );
+export async function deleteAccountAPI(
+  basePath: string
+): Promise<IDeleteAccountResponse> {
+  const response = await fetch(`${basePath}/user`, {
+    method: 'DELETE',
+    headers: { 'X-CSRF-Token': getCsrfToken() },
+    credentials: 'include',
+  });
   const data = await response.json();
   return { response, data };
-};
-
-export const logoutAPI = async (
-  domainName: string,
-  refreshToken: string
-): Promise<{ response: Response }> => {
-  const params = {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ refreshToken }),
-  };
-  const response = await fetch(
-    `${getServerBasePath()}/app/${domainName}/logout`,
-    params
-  );
-  return { response };
-};
+}

package/src/api/interfaces/dauth.api.responses.ts

@@ -1,23 +1,23 @@
 import { IDauthDomainState, IDauthUser } from '../../interfaces';
 
-export interface IdeleteAccountAPIResponse {
+export interface IExchangeCodeResponse {
   response: Response;
   data: {
-    status: string;
-    message: string;
+    user: IDauthUser;
+    domain: IDauthDomainState;
+    isNewUser: boolean;
   };
 }
 
-export interface IgetUserAPIResponse {
+export interface ISessionResponse {
   response: Response;
   data: {
-    status: string;
     user: IDauthUser;
     domain: IDauthDomainState;
   };
 }
 
-export interface IupdateUserAPIResponse {
+export interface IUpdateUserResponse {
   response: Response;
   data: {
     status: string;
@@ -26,19 +26,10 @@ export interface IupdateUserAPIResponse {
   };
 }
 
-export interface IrefreshTokenAPIResponse {
-  response: Response;
-  data: {
-    accessToken: string;
-    refreshToken: string;
-  };
-}
-
-export interface IExchangeCodeAPIResponse {
+export interface IDeleteAccountResponse {
   response: Response;
   data: {
-    accessToken: string;
-    refreshToken: string;
-    isNewUser?: boolean;
+    status: string;
+    message: string;
   };
 }

package/src/api/utils/config.ts

@@ -1,4 +1,3 @@
-export const apiVersion = 'v1';
 export const serverDomain = 'dauth.ovh';
 
 let _dauthUrl: string | undefined;
@@ -10,25 +9,21 @@ export function setDauthUrl(url: string | undefined) {
 function checkIsLocalhost(): boolean {
   if (typeof window === 'undefined') return false;
   const hostname = window.location.hostname;
-  return Boolean(
+  return (
     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
+    /^127(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/.test(
+      hostname
     ) ||
-    hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+    /^192\.168(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){2}$/.test(
+      hostname
+    ) ||
+    /^10(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/.test(
+      hostname
+    )
   );
 }
 
-export function getServerBasePath() {
-  if (_dauthUrl) return `${_dauthUrl}/api/${apiVersion}`;
-  const isLocalhost = checkIsLocalhost();
-  const serverPort = 4012;
-  const serverLocalUrl = `${window.location.protocol}//${window.location.hostname}:${serverPort}/api/${apiVersion}`;
-  const serverProdUrl = `https://${serverDomain}/api/${apiVersion}`;
-  return isLocalhost ? serverLocalUrl : serverProdUrl;
-}
-
 export function getClientBasePath() {
   if (_dauthUrl) return _dauthUrl;
   const isLocalhost = checkIsLocalhost();

package/src/api/utils/routes.ts

@@ -1,4 +1,3 @@
 export const routes = {
   signin: 'signin',
-  updateUser: 'update-user',
 };

package/src/constants.ts

@@ -1,3 +1 @@
-export const TOKEN_LS = 'dauth_state';
-export const REFRESH_TOKEN_LS = 'dauth_refresh_token';
 export const AUTH_CODE_PARAM = 'code';

package/src/index.tsx

@@ -5,126 +5,69 @@ import React, {
   useCallback,
   createContext,
   useContext,
-  useRef,
 } from 'react';
 import initialDauthState from './initialDauthState';
 import userReducer from './reducer/dauth.reducer';
 import * as action from './reducer/dauth.actions';
 import { getClientBasePath, setDauthUrl } from './api/utils/config';
-import { TOKEN_LS, REFRESH_TOKEN_LS, AUTH_CODE_PARAM } from './constants';
+import { AUTH_CODE_PARAM } from './constants';
 import { routes } from './api/utils/routes';
 import type {
   IDauthProviderProps,
-  IDauthStorageKeys,
-  IDauthUser,
   IDauthAuthMethods,
+  IDauthUser,
+  IFormField,
+  DauthProfileModalProps,
 } from './interfaces';
-import { SET_IS_LOADING } from './reducer/dauth.types';
 
-export type { IDauthProviderProps, IDauthAuthMethods };
+export { DauthProfileModal } from './DauthProfileModal';
+export type {
+  IDauthProviderProps,
+  IDauthAuthMethods,
+  IFormField,
+  DauthProfileModalProps,
+};
 
 const defaultOnError = (error: Error) => console.error(error);
 
 export const DauthProvider: React.FC<IDauthProviderProps> = (
   props: IDauthProviderProps
 ) => {
-  const { domainName, children, storageKey, onError, env, dauthUrl } = props;
+  const {
+    domainName,
+    children,
+    authProxyPath = '/api/auth',
+    onError,
+    env,
+    dauthUrl,
+  } = props;
   const [dauthState, dispatch] = useReducer(userReducer, initialDauthState);
-  const refreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Configure custom dauth URL before any API calls
   useEffect(() => {
     setDauthUrl(dauthUrl);
   }, [dauthUrl]);
 
-  const storageKeys: IDauthStorageKeys = useMemo(
-    () => ({
-      accessToken: storageKey?.accessToken ?? TOKEN_LS,
-      refreshToken: storageKey?.refreshToken ?? REFRESH_TOKEN_LS,
-    }),
-    [storageKey?.accessToken, storageKey?.refreshToken]
-  );
-
   const handleError = useCallback(
     (error: Error) => (onError ?? defaultOnError)(error),
     [onError]
   );
 
-  // Build action context
   const ctx = useMemo(
-    () => ({ dispatch, domainName, storageKeys, onError: handleError }),
-    [domainName, storageKeys, handleError]
+    () => ({ dispatch, authProxyPath, onError: handleError }),
+    [authProxyPath, handleError]
   );
 
-  // Schedule next proactive refresh based on access token expiry
-  const scheduleRefresh = useCallback(() => {
-    if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
-    const token = localStorage.getItem(storageKeys.accessToken);
-    if (!token) return;
-    try {
-      const payloadB64 = token.split('.')[1];
-      if (!payloadB64) return;
-      const payload = JSON.parse(atob(payloadB64));
-      const expiresIn = (payload.exp || 0) * 1000 - Date.now();
-      // Refresh 5 minutes before expiry, minimum 10 seconds
-      const refreshIn = Math.max(expiresIn - 5 * 60 * 1000, 10_000);
-      refreshTimerRef.current = setTimeout(async () => {
-        await action.refreshSessionAction(ctx);
-        scheduleRefresh();
-      }, refreshIn);
-    } catch (_) {
-      // If decode fails, retry in 5 minutes
-      refreshTimerRef.current = setTimeout(
-        async () => {
-          await action.refreshSessionAction(ctx);
-          scheduleRefresh();
-        },
-        5 * 60 * 1000
-      );
-    }
-  }, [ctx, storageKeys.accessToken]);
-
-  // Catch login redirect — exchange authorization code for tokens
-  useEffect(() => {
-    (async () => {
-      const queryString = window.location.search;
-      if (!queryString) return;
-      const urlParams = new URLSearchParams(queryString);
-      const code = urlParams.get(AUTH_CODE_PARAM);
-      if (code && !dauthState.isAuthenticated) {
-        return action.exchangeCodeAction({ ...ctx, code });
-      }
-    })();
-  }, []);
-
-  // Auto Login
+  // On mount: exchange code or auto-login via session cookie
   useEffect(() => {
-    (async () => {
-      // Skip if code exchange is in progress — that effect handles isLoading
-      const urlParams = new URLSearchParams(window.location.search);
-      if (urlParams.get(AUTH_CODE_PARAM)) return;
-
-      const refreshToken = localStorage.getItem(storageKeys.refreshToken);
-      if (refreshToken && !dauthState.isAuthenticated) {
-        return action.setAutoLoginAction(ctx);
-      } else {
-        return dispatch({
-          type: SET_IS_LOADING,
-          payload: { isLoading: false },
-        });
-      }
-    })();
-  }, []);
-
-  // Schedule proactive refresh when authenticated
-  useEffect(() => {
-    if (dauthState.isAuthenticated) {
-      scheduleRefresh();
+    const params = new URLSearchParams(window.location.search);
+    const code = params.get(AUTH_CODE_PARAM);
+    if (code) {
+      action.exchangeCodeAction(ctx, code);
+    } else {
+      action.autoLoginAction(ctx);
     }
-    return () => {
-      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
-    };
-  }, [dauthState.isAuthenticated, scheduleRefresh]);
+  }, []);
 
   const loginWithRedirect = useCallback(() => {
     const base = `${getClientBasePath()}/${domainName}/${routes.signin}`;
@@ -132,23 +75,10 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
     return window.location.replace(url);
   }, [domainName, env]);
 
-  const logout = useCallback(() => {
-    if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
-    return action.setLogoutAction({
-      dispatch,
-      domainName,
-      storageKeys,
-    });
-  }, [domainName, storageKeys]);
-
-  const getAccessToken = useCallback(async () => {
-    const token = await action.getAccessTokenAction(ctx);
-    return token as string;
-  }, [ctx]);
+  const logout = useCallback(() => action.logoutAction(ctx), [ctx]);
 
   const updateUser = useCallback(
     async (fields: Partial<IDauthUser>) => {
-      const token_ls = localStorage.getItem(storageKeys.accessToken);
       const {
         name,
         lastname,
@@ -173,52 +103,25 @@ export const DauthProvider: React.FC<IDauthProviderProps> = (
         country,
         metadata,
       } as Partial<IDauthUser>;
-      return (await action.setUpdateUserAction({
-        ...ctx,
-        user,
-        token: token_ls,
-      })) as boolean;
+      return action.updateUserAction(ctx, user);
     },
-    [ctx, storageKeys.accessToken]
+    [ctx]
   );
 
-  const updateUserWithRedirect = useCallback(() => {
-    const token_ls = localStorage.getItem(storageKeys.accessToken);
-    if (!token_ls) return;
-    return window.location.replace(
-      `${getClientBasePath()}/${domainName}/${routes.updateUser}/${token_ls}`
-    );
-  }, [domainName, storageKeys.accessToken]);
-
-  const deleteAccount = useCallback(async () => {
-    const token_ls = localStorage.getItem(storageKeys.accessToken);
-    if (!token_ls) return false;
-    if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
-    return (await action.deleteAccountAction({
-      ...ctx,
-      token: token_ls,
-    })) as boolean;
-  }, [ctx, storageKeys.accessToken]);
+  const deleteAccount = useCallback(
+    () => action.deleteAccountAction(ctx),
+    [ctx]
+  );
 
   const memoProvider = useMemo(
     () => ({
       ...dauthState,
       loginWithRedirect,
       logout,
-      getAccessToken,
       updateUser,
-      updateUserWithRedirect,
       deleteAccount,
     }),
-    [
-      dauthState,
-      loginWithRedirect,
-      logout,
-      getAccessToken,
-      updateUser,
-      updateUserWithRedirect,
-      deleteAccount,
-    ]
+    [dauthState, loginWithRedirect, logout, updateUser, deleteAccount]
   );
 
   return (

package/src/initialDauthState.ts

@@ -12,9 +12,7 @@ const initialDauthState: IDauthState = {
   isAuthenticated: false,
   loginWithRedirect: () => {},
   logout: () => {},
-  getAccessToken: () => Promise.resolve(''),
   updateUser: () => Promise.resolve(false),
-  updateUserWithRedirect: () => {},
   deleteAccount: () => Promise.resolve(false),
 };
 

package/src/interfaces.ts

@@ -31,12 +31,18 @@ export interface IDauthAuthMethods {
   passkey: boolean;
 }
 
+export interface IFormField {
+  field: string;
+  required: boolean;
+}
+
 export interface IDauthDomainState {
   name: string;
   environments?: IDauthDomainEnvironment[];
   loginRedirect: string;
   allowedOrigins: string[];
   authMethods?: IDauthAuthMethods;
+  formFields?: IFormField[];
 }
 
 export interface IDauthState {
@@ -46,32 +52,28 @@ export interface IDauthState {
   isAuthenticated: boolean;
   loginWithRedirect: () => void;
   logout: () => void;
-  getAccessToken: () => Promise<string>;
   updateUser: (fields: Partial<IDauthUser>) => Promise<boolean>;
-  updateUserWithRedirect: () => void;
   deleteAccount: () => Promise<boolean>;
 }
 
+export interface DauthProfileModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
 export interface IActionStatus {
   type: TStatusTypes;
   message: string;
 }
 export type TStatusTypes = 'success' | 'error' | 'info' | 'warning';
 
-export interface IDauthStorageKeys {
-  accessToken: string;
-  refreshToken: string;
-}
-
 export interface IDauthProviderProps {
   domainName: string;
   children: React.ReactNode;
-  storageKey?: {
-    accessToken?: string;
-    refreshToken?: string;
-  };
+  /** Base path of the auth proxy on the consumer backend. Default: '/api/auth'. */
+  authProxyPath?: string;
   onError?: (error: Error) => void;
   env?: string;
-  /** Override the dauth server URL (e.g. 'https://dev.dauth.ovh' for staging) */
+  /** Override the dauth frontend URL for loginWithRedirect (e.g. 'https://dev.dauth.ovh' for staging) */
   dauthUrl?: string;
 }