@digitaldefiance/express-suite-react-components 2.9.1 → 2.9.3

package/src/services/authService.ts

@@ -0,0 +1,422 @@
+// services/authService.js
+import {
+  EciesCryptoCore,
+  ECIESService,
+  EmailString,
+  hexToUint8Array,
+  IECIESConfig,
+  SecureString,
+  uint8ArrayToHex,
+} from '@digitaldefiance/ecies-lib';
+import { getSuiteCoreTranslation, IConstants, IRequestUserDTO, SuiteCoreStringKey, TranslatableSuiteError } from '@digitaldefiance/suite-core-lib';
+import { CoreLanguageCode } from '@digitaldefiance/i18n-lib';
+import { Wallet } from '@ethereumjs/wallet';
+import axios, { isAxiosError } from 'axios';
+import { createApiClient }  from './api';
+import { createAuthenticatedApiClient } from './authenticatedApi';
+
+interface AuthContextFunctions {
+  setUser: (user: IRequestUserDTO | null) => void;
+  setLanguage: (lang: CoreLanguageCode) => void;
+}
+
+export class AuthService {
+  private eciesService: ECIESService;
+  private cryptoCore: EciesCryptoCore;
+  private apiClient: axios.AxiosInstance;
+  private authenticatedApiClient: axios.AxiosInstance;
+
+  constructor(
+    private constants: IConstants,
+    private baseUrl: string,
+    eciesConfig: IECIESConfig
+  ) {
+    this.eciesService = new ECIESService(eciesConfig);
+    this.cryptoCore = new EciesCryptoCore(eciesConfig);
+    this.apiClient = createApiClient(this.baseUrl);
+    this.authenticatedApiClient = createAuthenticatedApiClient(this.baseUrl);
+  }
+
+  getSiteDomain(): string {
+    return this.constants.AdministratorEmail.split('@')[1];
+  }
+
+  async register(
+    username: string,
+    email: string,
+    timezone: string,
+    password?: string,
+  ): Promise<
+    | { success: boolean; message: string; mnemonic: string }
+    | {
+        error: string;
+        errorType?: string;
+        field?: string;
+        errors?: Array<Record<string, string>>;
+      }
+  > {
+    try {
+      const response = await this.apiClient.post('/user/register', {
+        username,
+        email,
+        timezone,
+        ...(password ? { password } : {}),
+      });
+      if (response.status !== 201) {
+        return {
+          error: response.data.message
+            ? response.data.message
+            : getSuiteCoreTranslation(SuiteCoreStringKey.Registration_Error),
+          ...(response.data.errorType
+            ? { errorType: response.data.errorType }
+            : {}),
+          ...(response.data.errors ? { errors: response.data.errors } : {}),
+        };
+      }
+      return {
+        success: true,
+        message:
+          response.data.message ??
+          getSuiteCoreTranslation(SuiteCoreStringKey.Registration_Success, {
+            MNEMONIC: response.data.mnemonic,
+          }),
+        mnemonic: response.data.mnemonic,
+      };
+    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        return {
+          error:
+            error.response.data.error?.message ??
+            error.response.data.message ??
+            error.message ??
+            getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError),
+          ...(error.response.data.errorType
+            ? { errorType: error.response.data.errorType }
+            : {}),
+          ...(error.response.data.error?.field
+            ? { field: error.response.data.error.field }
+            : {}),
+          ...(error.response.data.errors
+            ? { errors: error.response.data.errors }
+            : {}),
+        };
+      } else {
+        return {
+          error: getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError),
+        };
+      }
+    }
+  }
+
+  async directLogin(
+    mnemonic: SecureString,
+    username?: string,
+    email?: EmailString,
+  ): Promise<
+    | { token: string; user: IRequestUserDTO; wallet: Wallet; message: string }
+    | { error: string; errorType?: string }
+  > {
+    if (!username && !email) {
+      return {
+        error: getSuiteCoreTranslation(SuiteCoreStringKey.Validation_UsernameOrEmailRequired),
+      };
+    }
+    try {
+      const loginRequest = await this.apiClient.post('/user/request-direct-login');
+      if (loginRequest.data.challenge) {
+        const { wallet } = this.cryptoCore.walletAndSeedFromMnemonic(mnemonic);
+        const publicKey = wallet.getPublicKey();
+        // Add 0x04 prefix for uncompressed public key
+        const publicKeyWithPrefix = new Uint8Array(publicKey.length + 1);
+        publicKeyWithPrefix[0] = 0x04;
+        publicKeyWithPrefix.set(publicKey, 1);
+        const challengeBuffer = hexToUint8Array(loginRequest.data.challenge);
+        const privateKeyBuffer = wallet.getPrivateKey();
+        const signature = this.eciesService.signMessage(privateKeyBuffer, challengeBuffer);
+        const signatureHex = uint8ArrayToHex(signature);
+        const loginResponse = await this.apiClient.post('/user/direct-challenge', {
+          username: username,
+          email: email ? email.email : undefined,
+          challenge: loginRequest.data.challenge,
+          signature: signatureHex,
+        });
+        if (loginResponse.data.token && loginResponse.data.user) {
+          return {
+            message: loginResponse.data.message,
+            token: loginResponse.data.token,
+            user: loginResponse.data.user,
+            wallet,
+          };
+        }
+      }
+    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        // Check for DirectChallengeNotEnabled error
+        if (error.response.status === 403 && error.response.data.errorType === 'DirectChallengeNotEnabledError') {
+          return {
+            error: getSuiteCoreTranslation(SuiteCoreStringKey.Error_Login_DirectChallengeNotEnabled),
+            errorType: 'DirectChallengeNotEnabled',
+          };
+        }
+        // Check for PasswordLoginNotEnabled error
+        if (error.response.status === 403 && error.response.data.errorType === 'PasswordLoginNotEnabledError') {
+          return {
+            error: getSuiteCoreTranslation(SuiteCoreStringKey.Error_Login_PasswordLoginNotEnabled),
+            errorType: 'PasswordLoginNotEnabled',
+          };
+        }
+        
+        return {
+          error:
+            error.response.data.error?.message ??
+            error.response.data.message ??
+            error.message ??
+            getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError),
+          ...(error.response.data.errorType
+            ? { errorType: error.response.data.errorType }
+            : {}),
+        };
+      }
+      console.error('directLogin: non-axios error:', error);
+    }
+    return {
+      error: getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError),
+    };
+  }
+
+  async requestEmailLogin(
+    username?: string,
+    email?: EmailString,
+  ): Promise<string | { error: string; errorType?: string }> {
+    if (!username && !email) {
+      return {
+        error: getSuiteCoreTranslation(SuiteCoreStringKey.Validation_UsernameOrEmailRequired),
+      };
+    }
+    try {
+      const result = await this.apiClient.post('/user/request-email-login', {
+        email: email ? email.email : undefined,
+        username,
+      });
+      if (result.data.message) {
+        return result.data.message;
+      }
+    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        return {
+          error:
+            error.response.data.error?.message ??
+            error.response.data.message ??
+            error.message ??
+            getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError),
+          ...(error.response.data.errorType
+            ? { errorType: error.response.data.errorType }
+            : {}),
+        };
+      }
+    }
+    return {
+      error: getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError),
+    };
+  }
+
+  async emailChallengeLogin(
+    mnemonic: SecureString,
+    token: string,
+    username?: string,
+    email?: EmailString,
+  ): Promise<
+    | { token: string; user: IRequestUserDTO; wallet: Wallet; message: string }
+    | { error: string; errorType?: string }
+  > {
+    if (!username && !email) {
+      return {
+        error: getSuiteCoreTranslation(SuiteCoreStringKey.Validation_UsernameOrEmailRequired),
+      };
+    }
+    try {
+      const { wallet } = this.cryptoCore.walletAndSeedFromMnemonic(mnemonic);
+      const challengeBuffer = hexToUint8Array(token);
+      const privateKeyBuffer = wallet.getPrivateKey();
+      const signature = this.eciesService.signMessage(privateKeyBuffer, challengeBuffer);
+      const signatureHex = uint8ArrayToHex(signature);
+      const response = await this.apiClient.post('/user/email-login', {
+        token,
+        signature: signatureHex,
+        username: username ?? null,
+        email: email ?? null,
+      });
+      if (response.data.token && response.data.user) {
+        return {
+          message: response.data.message,
+          token: response.data.token,
+          user: response.data.user,
+          wallet,
+        };
+      }
+    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        return {
+          error:
+            error.response.data.error?.message ??
+            error.response.data.message ??
+            error.message ??
+            getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError),
+          ...(error.response.data.errorType
+            ? { errorType: error.response.data.errorType }
+            : {}),
+        };
+      }
+    }
+    return {
+      error: getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError),
+    };
+  }
+
+  async verifyToken(
+    token: string,
+  ): Promise<IRequestUserDTO | { error: string; errorType?: string }> {
+    try {
+      const response = await this.apiClient.get('/user/verify', {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      return response.data.user as IRequestUserDTO;
+    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        return {
+          error: error.response.data.message
+            ? error.response.data.message
+            : error.message
+            ? error.message
+            : getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError),
+          ...(error.response.data.errorType
+            ? { errorType: error.response.data.errorType }
+            : {}),
+        };
+      } else {
+        return {
+          error: getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError),
+        };
+      }
+    }
+  }
+
+  async refreshToken(): Promise<{
+    token: string;
+    user: IRequestUserDTO;
+  }> {
+    try {
+      const refreshResponse = await this.authenticatedApiClient.get('/user/refresh-token');
+      if (refreshResponse.status === 200) {
+        const newToken = refreshResponse.headers['authorization'];
+        let token: string | undefined = undefined;
+        let user: IRequestUserDTO | undefined = undefined;
+        if (newToken?.startsWith('Bearer ')) {
+          token = newToken.slice(7);
+        }
+        if (refreshResponse.data.user) {
+          user = refreshResponse.data.user;
+        }
+        if (token && user) {
+          return { token, user };
+        }
+      }
+    } catch (error) {
+      console.error('Token refresh error:', error);
+      if (isAxiosError(error) && error.response) {
+        console.error('Error response:', error.response.data);
+        console.error('Error status:', error.response.status);
+      }
+    }
+    throw new TranslatableSuiteError(SuiteCoreStringKey.Common_UnexpectedError);
+  }
+
+  async changePassword(
+    currentPassword: string,
+    newPassword: string,
+  ): Promise<{ success: boolean } | { error: string; errorType?: string }> {
+    try {
+      await this.authenticatedApiClient.post('/user/change-password', {
+        currentPassword,
+        newPassword,
+      });
+      return { success: true };
+    } catch (error) {
+      if (isAxiosError(error) && error.response) {
+        return {
+          error:
+            error.response.data.error?.message ??
+            error.response.data.message ??
+            error.message ??
+            getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError),
+          ...(error.response.data.errorType
+            ? { errorType: error.response.data.errorType }
+            : {}),
+        };
+      }
+      return { error: getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError) };
+    }
+  }
+
+  async backupCodeLogin(
+    identifier: string,
+    code: string,
+    isEmail: boolean,
+    recoverMnemonic: boolean,
+    newPassword?: string,
+  ): Promise<
+    | {
+        token: string;
+        codeCount: number;
+        user?: IRequestUserDTO;
+        mnemonic?: string;
+        message?: string;
+      }
+    | { error: string; status?: number; errorType?: string }
+  > {
+    try {
+      const response = await this.apiClient.post('/user/backup-code', {
+        [isEmail ? 'email' : 'username']: identifier,
+        code,
+        recoverMnemonic,
+        ...(newPassword ? { newPassword } : {}),
+      });
+      if (response.data.token && response.data.user) {
+        return {
+          token: response.data.token,
+          user: response.data.user,
+          codeCount: response.data.codeCount ?? 0,
+          ...(response.data.mnemonic ? { mnemonic: response.data.mnemonic } : {}),
+          ...(response.data.message ? { message: response.data.message } : {}),
+        };
+      }
+      return {
+        error: response.data.message
+          ? response.data.message
+          : getSuiteCoreTranslation(SuiteCoreStringKey.Validation_InvalidToken),
+        ...(response.data.errorType
+          ? { errorType: response.data.errorType }
+          : {}),
+      };
+    } catch (error) {
+      console.error('Backup code login error:', error);
+      if (isAxiosError(error) && error.response) {
+        return {
+          error:
+            error.response.data.error.message ??
+            error.response.data.message ??
+            error.message ??
+            getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError),
+          ...(error.response.data.errorType
+            ? { errorType: error.response.data.errorType }
+            : {}),
+          status: error.response.status,
+        };
+      }
+      return { error: getSuiteCoreTranslation(SuiteCoreStringKey.Common_UnexpectedError) };
+    }
+  }
+}
+
+export const createAuthService = (constants: IConstants, baseUrl: string, eciesConfig: IECIESConfig) => 
+  new AuthService(constants, baseUrl, eciesConfig);

package/src/services/authenticatedApi.ts

@@ -0,0 +1,17 @@
+import axios from 'axios';
+
+export function createAuthenticatedApiClient(baseURL: string, tokenKey: string = 'authToken') {
+  const api = axios.create({ baseURL });
+
+  api.interceptors.request.use((config) => {
+    const token = localStorage.getItem(tokenKey);
+    if (token) {
+      config.headers['Authorization'] = `Bearer ${token}`;
+    }
+    const languageCode = localStorage.getItem('languageCode') ?? 'en-US';
+    config.headers['Accept-Language'] = languageCode;
+    return config;
+  });
+
+  return api;
+}

package/src/services/index.ts

@@ -0,0 +1,3 @@
+export * from './api';
+export * from './authenticatedApi';
+export * from './authService';

package/src/types/MenuType.ts

@@ -0,0 +1,15 @@
+// Branded type for menu type identifiers
+export type MenuType = string & { readonly __brand: 'MenuType' };
+
+// Factory function to create menu types
+export const createMenuType = (id: string): MenuType => id as MenuType;
+
+// Built-in menu types
+export const MenuTypes = {
+  SideMenu: createMenuType('SideMenu'),
+  TopMenu: createMenuType('TopMenu'),
+  UserMenu: createMenuType('UserMenu'),
+} as const;
+
+// Type for the built-in menu types
+export type BuiltInMenuType = typeof MenuTypes[keyof typeof MenuTypes];

package/src/types/expirationSeconds.ts

@@ -0,0 +1,18 @@
+export const ExpirationSecondsOptionValues = [0, 10, 30, 45, 60, 120, 300, 600];
+
+export function createExpirationSecondsOptionNames(
+  secondsLabel: string,
+  minuteLabel: string,
+  minutesLabel: string
+): string[] {
+  return [
+    `0 ${secondsLabel}`,
+    `10 ${secondsLabel}`,
+    `30 ${secondsLabel}`,
+    `45 ${secondsLabel}`,
+    `1 ${minuteLabel}`,
+    `2 ${minutesLabel}`,
+    `5 ${minutesLabel}`,
+    `10 ${minutesLabel}`,
+  ];
+}

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './MenuType';

package/src/types/translation.ts

@@ -0,0 +1,20 @@
+/**
+ * Translation function type for components
+ * Accepts a key and optional variables, returns translated string
+ */
+export type TranslationFunction = (
+  key: string,
+  variables?: Record<string, string | number>
+) => string;
+
+/**
+ * Helper to get translated text or fallback to provided string
+ */
+export function getTranslatedText(
+  t: TranslationFunction | undefined,
+  key: string,
+  fallback: string,
+  variables?: Record<string, string | number>
+): string {
+  return t ? t(key, variables) : fallback;
+}

package/src/wrappers/BackupCodeLoginWrapper.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { BackupCodeLoginForm } from '../components/BackupCodeLoginForm';
+import { useAuth, useSuiteConfig } from '../contexts';
+
+export interface BackupCodeLoginWrapperProps {
+  onSuccess?: () => void;
+  componentProps?: Partial<React.ComponentProps<typeof BackupCodeLoginForm>>;
+}
+
+export const BackupCodeLoginWrapper: FC<BackupCodeLoginWrapperProps> = ({ 
+  onSuccess,
+  componentProps = {},
+}) => {
+  const { backupCodeLogin, isAuthenticated } = useAuth();
+  const navigate = useNavigate();
+  const { routes } = useSuiteConfig();
+  
+  const handleSubmit: typeof backupCodeLogin = async (...args) => {
+    const result = await backupCodeLogin(...args);
+    if ('token' in result && onSuccess) {
+      onSuccess();
+    }
+    return result;
+  };
+  
+  return (
+    <BackupCodeLoginForm 
+      onSubmit={handleSubmit}
+      onNavigate={navigate}
+      isAuthenticated={isAuthenticated}
+      {...componentProps}
+    />
+  );
+};

package/src/wrappers/BackupCodesWrapper.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { useLocation } from 'react-router-dom';
+import { BackupCodesForm } from '../components/BackupCodesForm';
+import { useBackupCodes } from '../hooks';
+
+export interface BackupCodesWrapperProps {
+  componentProps?: Partial<React.ComponentProps<typeof BackupCodesForm>>;
+}
+
+export const BackupCodesWrapper: FC<BackupCodesWrapperProps> = ({ 
+  componentProps = {},
+}) => {
+  const location = useLocation();
+  const initialCodeCount = (location.state as { codeCount?: number })?.codeCount ?? null;
+  const { backupCodesRemaining, generateBackupCodes } = useBackupCodes({ initialCodeCount });
+
+  const handleSubmit = async (values: { password?: string; mnemonic?: string }) => {
+    return await generateBackupCodes(values.password, values.mnemonic);
+  };
+  
+  return (
+    <BackupCodesForm 
+      onSubmit={handleSubmit} 
+      backupCodesRemaining={backupCodesRemaining}
+      {...componentProps}
+    />
+  );
+};

package/src/wrappers/ChangePasswordFormWrapper.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { ChangePasswordForm } from '../components/ChangePasswordForm';
+import { useAuth } from '../contexts';
+
+export interface ChangePasswordFormWrapperProps {
+  onSuccess?: () => void;
+  componentProps?: Partial<React.ComponentProps<typeof ChangePasswordForm>>;
+}
+
+export const ChangePasswordFormWrapper: FC<ChangePasswordFormWrapperProps> = ({ 
+  onSuccess,
+  componentProps = {},
+}) => {
+  const { changePassword } = useAuth();
+
+  const handleSubmit = async (values: any) => {
+    const result = await changePassword(
+      values.currentPassword,
+      values.newPassword
+    );
+    if ('error' in result) {
+      throw new Error(result.error);
+    }
+    if (onSuccess) {
+      onSuccess();
+    }
+    return result;
+  };
+
+  return <ChangePasswordForm onSubmit={handleSubmit} {...componentProps} />;
+};

package/src/wrappers/LoginFormWrapper.tsx

@@ -0,0 +1,59 @@
+import { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { SecureString, EmailString } from '@digitaldefiance/ecies-lib';
+import { LoginForm, LoginFormValues, LoginFormProps } from '../components/LoginForm';
+import { useAuth, useSuiteConfig } from '../contexts';
+import { SuiteCoreStringKey, TranslatableSuiteError } from '@digitaldefiance/suite-core-lib';
+
+export interface LoginFormWrapperProps {
+  onSuccess?: () => void;
+  redirectTo?: string;
+  componentProps?: Partial<Omit<LoginFormProps, 'onSubmit'>>;
+}
+
+export const LoginFormWrapper: FC<LoginFormWrapperProps> = ({ 
+  onSuccess,
+  redirectTo,
+  componentProps = {},
+}) => {
+  const { directLogin, passwordLogin } = useAuth();
+  const navigate = useNavigate();
+  const { routes } = useSuiteConfig();
+
+  const handleSubmit = async (values: LoginFormValues) => {
+    const email = values.email && values.email.trim().length > 0 ? new EmailString(values.email) : undefined;
+    const username = values.username && values.username.trim() ? values.username : undefined;
+    
+    if (values.password) {
+      const result = await passwordLogin(
+        new SecureString(values.password),
+        username,
+        email
+      );
+      if ('error' in result) {
+        throw new Error(result.error);
+      }
+      if (onSuccess) {
+        onSuccess();
+      }
+      navigate(redirectTo || routes.dashboard || '/dashboard');
+    } else if (values.mnemonic) {
+      const result = await directLogin(
+        new SecureString(values.mnemonic),
+        username,
+        email
+      );
+      if ('error' in result) {
+        throw new Error(result.error);
+      }
+      if (onSuccess) {
+        onSuccess();
+      }
+      navigate(redirectTo || routes.dashboard || '/dashboard');
+    } else {
+      throw new TranslatableSuiteError(SuiteCoreStringKey.Error_NoPasswordOrMnemonicProvided);
+    }
+  };
+
+  return <LoginForm onSubmit={handleSubmit} {...componentProps} />;
+};

package/src/wrappers/LogoutPageWrapper.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { LogoutPage } from '../components/LogoutPage';
+import { useAuth, useSuiteConfig } from '../contexts';
+
+export interface LogoutPageWrapperProps {
+  onSuccess?: () => void;
+  redirectTo?: string;
+  componentProps?: Partial<React.ComponentProps<typeof LogoutPage>>;
+}
+
+export const LogoutPageWrapper: FC<LogoutPageWrapperProps> = ({ 
+  onSuccess,
+  redirectTo,
+  componentProps = {},
+}) => {
+  const { logout } = useAuth();
+  const navigate = useNavigate();
+  const { routes } = useSuiteConfig();
+  
+  const handleLogout = async () => {
+    await logout();
+    if (onSuccess) {
+      onSuccess();
+    }
+    navigate(redirectTo || routes.login || '/login');
+  };
+  
+  return <LogoutPage onLogout={handleLogout} onNavigate={navigate} {...componentProps} />;
+};