Merge branch 'feature/authentication' into feature/scalfolding

apps/portal/src/app/components/ErrorBoundary.tsx

@@ -0,0 +1,50 @@
+import { Component } from 'react';
+import type { ReactNode, ErrorInfo } from 'react';
+import { Center, Paper, Title, Text, Button } from '@mantine/core';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('ErrorBoundary caught:', error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Center h="100vh">
+          <Paper p="xl" shadow="md" radius="md" w={400}>
+            <Title order={3} mb="sm">Something went wrong</Title>
+            <Text c="dimmed" size="sm" mb="lg">
+              {this.state.error?.message || 'An unexpected error occurred.'}
+            </Text>
+            <Button
+              fullWidth
+              onClick={() => {
+                this.setState({ hasError: false, error: null });
+                window.location.href = '/';
+              }}
+            >
+              Reload page
+            </Button>
+          </Paper>
+        </Center>
+      );
+    }
+
+    return this.props.children;
+  }
+}

apps/portal/src/app/features/auth/hooks/useAuth.ts

@@ -1,17 +0,0 @@
-import { useAppDispatch, useAppSelector } from '../../../store/hooks';
-import { loginSuccess, logout as logoutAction, hydrateAuth } from '../store/auth.slice';
-import type { LoginPayload } from '../types/auth.types';
-
-export function useAuth() {
-  const dispatch = useAppDispatch();
-  const { user, token, isAuthenticated } = useAppSelector((s) => s.auth);
-
-  return {
-    user,
-    token,
-    isAuthenticated,
-    login: (p: LoginPayload) => dispatch(loginSuccess(p)),
-    logout: () => dispatch(logoutAction()),
-    hydrate: () => dispatch(hydrateAuth()),
-  };
-}

apps/portal/src/app/features/auth/pages/LoginPage.tsx

@@ -14,24 +14,25 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useNavigate, Link } from 'react-router-dom';
-import { useAuth } from '../hooks/useAuth';
+import { useAppDispatch } from '../../../store/hooks';
+import { loginSuccess, setUser } from '../store/auth.slice';
+import type { LoginPayload, AuthUser } from '../types/auth.types';
+import { useApiMutation } from '@ema-platform/api';
 import { notify } from '@ema-platform/ui';
 
-const BASE_API_URL =
-  (import.meta as { env?: Record<string, string> }).env?.['VITE_BASE_API_URL'] ??
-  'http://localhost:3001/api';
-
 const schema = z.object({
-  email: z.string().email('Enter a valid email'),
-  password: z.string().min(0, 'Password must be at least 6 characters'),
+  email: z.string().email({ message: 'Enter a valid email' }),
+  password: z.string().min(5, { message: 'Password must be at least 6 characters' }),
 });
 
 type FormValues = z.infer<typeof schema>;
 
 export function LoginPage() {
   const navigate = useNavigate();
-  const { login } = useAuth();
+  const dispatch = useAppDispatch();
   const [isLoading, setIsLoading] = useState(false);
+  const [loginTrigger] = useApiMutation<LoginPayload>();
+  const [meTrigger] = useApiMutation<AuthUser>();
 
   const {
     register,
@@ -44,15 +45,26 @@ export function LoginPage() {
   const onSubmit = async (values: FormValues) => {
     setIsLoading(true);
     try {
-      const res = await fetch(`${BASE_API_URL}/auth/login`, {
+      const data = await loginTrigger({
+        url: '/auth/login',
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(values),
-      });
-      if (!res.ok) throw new Error('Login failed');
-      const data = (await res.json()) as Parameters<typeof login>[0];
-      login(data);
-      navigate('/dashboard');
+        body: values,
+      }).unwrap();
+      dispatch(loginSuccess(data));
+
+      const me = await meTrigger({
+        url: '/auth/me',
+        method: 'GET',
+      }).unwrap();
+      dispatch(setUser(me));
+
+      if (me.status === 'accepted') {
+        navigate('/dashboard');
+      } else {
+        navigate('/otp-verify', {
+          state: { email: me.email, phoneNumber: me.phoneNumber },
+        });
+      }
     } catch {
       notify.error('Invalid email or password');
     } finally {

apps/portal/src/app/features/auth/pages/OTPVerificationPage.tsx

@@ -0,0 +1,109 @@
+import {
+  Paper,
+  TextInput,
+  Button,
+  Stack,
+  Title,
+  Center,
+  Text,
+} from '@mantine/core';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useApiMutation } from '@ema-platform/api';
+import { notify } from '@ema-platform/ui';
+
+const schema = z.object({
+  verificationCode: z.string().min(1, { message: 'Verification code is required' }),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+export function OTPVerificationPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const state = location.state as
+    | { email?: string; phoneNumber?: string }
+    | null;
+  const email = state?.email ?? '';
+  const phoneNumber = state?.phoneNumber ?? '';
+
+  const [verifyTrigger, { isLoading: loading }] = useApiMutation();
+  const [resendTrigger, { isLoading: resending }] = useApiMutation();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+  });
+
+  const onSubmit = async (values: FormValues) => {
+    try {
+      await verifyTrigger({
+        url: '/auth/verify-phone-number',
+        method: 'PATCH',
+        body: { email, phoneNumber, verificationCode: values.verificationCode },
+      }).unwrap();
+
+      notify.success('Phone number verified successfully');
+      navigate('/dashboard');
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Something went wrong';
+      notify.error(msg);
+    }
+  };
+
+  const handleResendOtp = async () => {
+    try {
+      await resendTrigger({
+        url: '/auth/resend-otp',
+        method: 'POST',
+        body: { email },
+      }).unwrap();
+
+      notify.success('Verification code resent to your email');
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Something went wrong';
+      notify.error(msg);
+    }
+  };
+
+  return (
+    <Center h="100vh">
+      <Paper p="xl" shadow="md" radius="md" w={400}>
+        <Stack gap="md">
+          <Title order={3}>Verify your email</Title>
+          <Text c="dimmed" size="sm">
+            A verification code has been sent to {email || 'your email'}. Enter it
+            below to complete your registration.
+          </Text>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Stack gap="sm">
+              <TextInput
+                label="Verification Code"
+                placeholder="Enter the code from your email"
+                error={errors.verificationCode?.message}
+                {...register('verificationCode')}
+              />
+              <Button type="submit" loading={loading} fullWidth mt="sm">
+                Verify
+              </Button>
+            </Stack>
+          </form>
+          <Button
+            variant="subtle"
+            size="sm"
+            loading={resending}
+            onClick={handleResendOtp}
+            fullWidth
+          >
+            Send OTP again
+          </Button>
+        </Stack>
+      </Paper>
+    </Center>
+  );
+}

apps/portal/src/app/features/auth/pages/SetPasswordPage.tsx

@@ -1,138 +0,0 @@
-import {
-  Paper,
-  TextInput,
-  PasswordInput,
-  Button,
-  Stack,
-  Title,
-  Center,
-  Text,
-} from '@mantine/core';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useAppDispatch, useAppSelector } from '../../../store/hooks';
-import {
-  setPasswordStart,
-  setPasswordSuccess,
-  setPasswordFailure,
-} from '../store/set-password.slice';
-import { notify } from '@ema-platform/ui';
-
-const BASE_API_URL =
-  (import.meta as { env?: Record<string, string> }).env?.['VITE_BASE_API_URL'] ??
-  'http://localhost:3001/api';
-
-const schema = z
-  .object({
-    userId: z.string().min(1, 'User ID is required'),
-    email: z.string().email('Enter a valid email'),
-    verificationCode: z.string().min(1, 'Verification code is required'),
-    newPassword: z.string().min(6, 'Password must be at least 6 characters'),
-    confirmPassword: z.string().min(6, 'Confirm your password'),
-  })
-  .refine((data) => data.newPassword === data.confirmPassword, {
-    message: 'Passwords do not match',
-    path: ['confirmPassword'],
-  });
-
-type FormValues = z.infer<typeof schema>;
-
-export function SetPasswordPage() {
-  const navigate = useNavigate();
-  const dispatch = useAppDispatch();
-  const location = useLocation();
-  const { loading } = useAppSelector((s) => s.setPassword);
-  const signupEmail = (location.state as { email?: string } | null)?.email ?? '';
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<FormValues>({
-    resolver: zodResolver(schema),
-    defaultValues: { email: signupEmail },
-  });
-
-  const onSubmit = async (values: FormValues) => {
-    dispatch(setPasswordStart());
-    try {
-      const res = await fetch(`${BASE_API_URL}/auth/set-password`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          userId: values.userId,
-          email: values.email,
-          verificationCode: values.verificationCode,
-          newPassword: values.newPassword,
-          confirmPassword: values.confirmPassword,
-        }),
-      });
-
-      if (!res.ok) {
-        const errorData = await res.json().catch(() => null);
-        throw new Error(errorData?.message ?? 'Failed to set password');
-      }
-
-      dispatch(setPasswordSuccess());
-      notify.success('Password set successfully');
-      navigate('/dashboard');
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : 'Something went wrong';
-      dispatch(setPasswordFailure(msg));
-      notify.error(msg);
-    }
-  };
-
-  return (
-    <Center h="100vh">
-      <Paper p="xl" shadow="md" radius="md" w={400}>
-        <Stack gap="md">
-          <Title order={3}>Set your password</Title>
-          <Text c="dimmed" size="sm">
-            A verification code has been sent to your email. Enter it below along
-            with your new password to complete registration.
-          </Text>
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <Stack gap="sm">
-              <TextInput
-                label="User ID"
-                placeholder="Enter your user ID"
-                error={errors.userId?.message}
-                {...register('userId')}
-              />
-              <TextInput
-                label="Email"
-                placeholder="you@example.com"
-                error={errors.email?.message}
-                {...register('email')}
-              />
-              <TextInput
-                label="Verification Code"
-                placeholder="Enter the code from your email"
-                error={errors.verificationCode?.message}
-                {...register('verificationCode')}
-              />
-              <PasswordInput
-                label="New Password"
-                placeholder="Enter a new password"
-                error={errors.newPassword?.message}
-                {...register('newPassword')}
-              />
-              <PasswordInput
-                label="Confirm Password"
-                placeholder="Confirm your new password"
-                error={errors.confirmPassword?.message}
-                {...register('confirmPassword')}
-              />
-              <Button type="submit" loading={loading} fullWidth mt="sm">
-                Set Password
-              </Button>
-            </Stack>
-          </form>
-        </Stack>
-      </Paper>
-    </Center>
-  );
-}

apps/portal/src/app/features/auth/pages/SignupPage.tsx

@@ -1,6 +1,7 @@
 import {
   Paper,
   TextInput,
+  PasswordInput,
   Button,
   Stack,
   Title,
@@ -12,23 +13,26 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { useNavigate, Link } from 'react-router-dom';
-import { useAppDispatch, useAppSelector } from '../../../store/hooks';
-import { signupStart, signupSuccess, signupFailure } from '../store/signup.slice';
-import { hydrateAuth } from '../store/auth.slice';
-import { authStorage } from '../utils/auth-storage';
+import { useAppDispatch } from '../../../store/hooks';
+import { loginSuccess } from '../store/auth.slice';
+import { useApiMutation } from '@ema-platform/api';
 import { notify } from '@ema-platform/ui';
 
-const BASE_API_URL =
-  (import.meta as { env?: Record<string, string> }).env?.['VITE_BASE_API_URL'] ??
-  'http://localhost:3001/api';
-
-const schema = z.object({
-  email: z.string().email('Enter a valid email'),
-  username: z.string().min(3, 'Username must be at least 3 characters'),
-  phoneNumber: z.string().min(1, 'Phone number is required'),
-  userType: z.string().min(1, 'User type is required'),
-  name: z.string().min(1, 'Name is required'),
-});
+const schema = z
+  .object({
+    email: z.string().email(),
+    username: z.string().min(3, { message: 'Username must be at least 3 characters' }),
+    phoneNumber: z.string().min(1, { message: 'Phone number is required' }),
+    userType: z.literal('individual'),
+    nameEn: z.string().min(1, { message: 'Name (English) is required' }),
+    nameAm: z.string().optional(),
+    password: z.string().min(8, { message: 'Password must be at least 8 characters' }),
+    confirmPassword: z.string().min(8, { message: 'Confirm your password' }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword'],
+  });
 
 type FormValues = z.infer<typeof schema>;
 
@@ -41,12 +45,18 @@ interface SignupPayload {
     am: string;
     en: string;
   };
+  password: string;
+  confirmPassword: string;
 }
 
 export function SignupPage() {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
-  const { loading } = useAppSelector((s) => s.signup);
+  const [signupTrigger, { isLoading: loading }] = useApiMutation<{
+    token: string;
+    refreshToken: string;
+    isPhoneNumberVerified: boolean;
+  }>();
 
   const {
     register,
@@ -54,44 +64,40 @@ export function SignupPage() {
     formState: { errors },
   } = useForm<FormValues>({
     resolver: zodResolver(schema),
+    defaultValues: { userType: 'individual' },
   });
 
   const onSubmit = async (values: FormValues) => {
-    dispatch(signupStart());
     try {
       const payload: SignupPayload = {
         email: values.email,
         username: values.username,
         phoneNumber: values.phoneNumber,
         userType: values.userType,
-        name: {
-          am: '',
-          en: values.name,
-        },
+        name: { en: values.nameEn, am: values.nameAm ?? '' },
+        password: values.password,
+        confirmPassword: values.confirmPassword,
       };
 
-      const res = await fetch(`${BASE_API_URL}/auth/signup`, {
+      const data = await signupTrigger({
+        url: '/auth/signup-with-pwd',
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload),
+        body: payload,
+      }).unwrap();
+
+      dispatch(
+        loginSuccess({
+          token: data.token,
+          refreshToken: data.refreshToken,
+          isPhoneNumberVerified: data.isPhoneNumberVerified,
+        }),
+      );
+
+      navigate('/otp-verify', {
+        state: { email: values.email, phoneNumber: values.phoneNumber },
       });
-
-      if (!res.ok) {
-        const errorData = await res.json().catch(() => null);
-        throw new Error(errorData?.message ?? 'Signup failed');
-      }
-
-      const data = (await res.json()) as { token: string; refreshToken: string };
-
-      authStorage.setToken(data.token);
-      authStorage.setRefreshToken(data.refreshToken);
-      dispatch(hydrateAuth());
-      dispatch(signupSuccess());
-
-      navigate('/set-password', { state: { email: values.email } });
     } catch (err) {
       const msg = err instanceof Error ? err.message : 'Something went wrong';
-      dispatch(signupFailure(msg));
       notify.error(msg);
     }
   };
@@ -104,10 +110,16 @@ export function SignupPage() {
           <form onSubmit={handleSubmit(onSubmit)}>
             <Stack gap="sm">
               <TextInput
-                label="Full Name"
-                placeholder="Your full name"
-                error={errors.name?.message}
-                {...register('name')}
+                label="Name (English)"
+                placeholder="Your name in English"
+                error={errors.nameEn?.message}
+                {...register('nameEn')}
+              />
+              <TextInput
+                label="Name (Amharic)"
+                placeholder="Your name in Amharic"
+                error={errors.nameAm?.message}
+                {...register('nameAm')}
               />
               <TextInput
                 label="Email"
@@ -127,11 +139,17 @@ export function SignupPage() {
                 error={errors.phoneNumber?.message}
                 {...register('phoneNumber')}
               />
-              <TextInput
-                label="User Type"
-                placeholder="e.g. customer, admin"
-                error={errors.userType?.message}
-                {...register('userType')}
+              <PasswordInput
+                label="Password"
+                placeholder="Enter a password"
+                error={errors.password?.message}
+                {...register('password')}
+              />
+              <PasswordInput
+                label="Confirm Password"
+                placeholder="Confirm your password"
+                error={errors.confirmPassword?.message}
+                {...register('confirmPassword')}
               />
               <Button type="submit" loading={loading} fullWidth mt="sm">
                 Sign up

apps/portal/src/app/features/auth/store/auth.slice.ts

@@ -1,5 +1,5 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
-import type { AuthState, LoginPayload } from '../types/auth.types';
+import type { AuthState, AuthUser, LoginPayload } from '../types/auth.types';
 import { authStorage } from '../utils/auth-storage';
 
 const initialState: AuthState = {
@@ -13,12 +13,14 @@ const authSlice = createSlice({
   initialState,
   reducers: {
     loginSuccess(state, action: PayloadAction<LoginPayload>) {
-      state.user = action.payload.user;
       state.token = action.payload.token;
       state.isAuthenticated = true;
       authStorage.setToken(action.payload.token);
       authStorage.setRefreshToken(action.payload.refreshToken);
-      authStorage.setUser(action.payload.user);
+    },
+    setUser(state, action: PayloadAction<AuthUser>) {
+      state.user = action.payload;
+      authStorage.setUser(action.payload);
     },
     logout(state) {
       state.user = null;
@@ -38,5 +40,5 @@ const authSlice = createSlice({
   },
 });
 
-export const { loginSuccess, logout, hydrateAuth } = authSlice.actions;
+export const { loginSuccess, setUser, logout, hydrateAuth } = authSlice.actions;
 export const authReducer = authSlice.reducer;

apps/portal/src/app/features/auth/store/set-password.slice.ts

@@ -1,42 +0,0 @@
-import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
-
-interface SetPasswordState {
-  loading: boolean;
-  success: boolean;
-  error: string | null;
-}
-
-const initialState: SetPasswordState = {
-  loading: false,
-  success: false,
-  error: null,
-};
-
-const setPasswordSlice = createSlice({
-  name: 'setPassword',
-  initialState,
-  reducers: {
-    setPasswordStart(state) {
-      state.loading = true;
-      state.error = null;
-      state.success = false;
-    },
-    setPasswordSuccess(state) {
-      state.loading = false;
-      state.success = true;
-    },
-    setPasswordFailure(state, action: PayloadAction<string>) {
-      state.loading = false;
-      state.error = action.payload;
-    },
-    resetSetPassword(state) {
-      state.loading = false;
-      state.success = false;
-      state.error = null;
-    },
-  },
-});
-
-export const { setPasswordStart, setPasswordSuccess, setPasswordFailure, resetSetPassword } =
-  setPasswordSlice.actions;
-export const setPasswordReducer = setPasswordSlice.reducer;

apps/portal/src/app/features/auth/store/signup.slice.ts

@@ -1,41 +0,0 @@
-import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
-
-interface SignupState {
-  loading: boolean;
-  success: boolean;
-  error: string | null;
-}
-
-const initialState: SignupState = {
-  loading: false,
-  success: false,
-  error: null,
-};
-
-const signupSlice = createSlice({
-  name: 'signup',
-  initialState,
-  reducers: {
-    signupStart(state) {
-      state.loading = true;
-      state.error = null;
-      state.success = false;
-    },
-    signupSuccess(state) {
-      state.loading = false;
-      state.success = true;
-    },
-    signupFailure(state, action: PayloadAction<string>) {
-      state.loading = false;
-      state.error = action.payload;
-    },
-    resetSignup(state) {
-      state.loading = false;
-      state.success = false;
-      state.error = null;
-    },
-  },
-});
-
-export const { signupStart, signupSuccess, signupFailure, resetSignup } = signupSlice.actions;
-export const signupReducer = signupSlice.reducer;

apps/portal/src/app/features/auth/types/auth.types.ts

@@ -2,8 +2,16 @@ export interface AuthUser {
   id: string;
   email: string;
   username: string;
-  roles: string[];
-  permissions: string[];
+  phoneNumber: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  status: string;
+  sharepointId: string | null;
+  hasSetPassword: boolean;
+  hasFinishedRegistration: boolean;
+  hasFinishedDMSOnboarding: boolean;
 }
 
 export interface AuthState {
@@ -13,7 +21,7 @@ export interface AuthState {
 }
 
 export interface LoginPayload {
-  user: AuthUser;
   token: string;
   refreshToken: string;
+  isPhoneNumberVerified: boolean;
 }

apps/portal/src/app/providers/AppProviders.tsx

@@ -1,8 +1,10 @@
 import { Provider } from 'react-redux';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AuthProvider } from '@tria-plc/iamui-common';
 import type { ReactNode } from 'react';
 import { store } from '../store';
 import { MantineThemeProvider } from './MantineThemeProvider';
+import { ErrorBoundary } from '../components/ErrorBoundary';
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: 1, staleTime: 1000 * 60 * 5 } },
@@ -10,10 +12,14 @@ const queryClient = new QueryClient({
 
 export function AppProviders({ children }: { children: ReactNode }) {
   return (
-    <Provider store={store}>
-      <QueryClientProvider client={queryClient}>
-        <MantineThemeProvider>{children}</MantineThemeProvider>
-      </QueryClientProvider>
-    </Provider>
+    <ErrorBoundary>
+      <Provider store={store}>
+        <QueryClientProvider client={queryClient}>
+          <AuthProvider>
+            <MantineThemeProvider>{children}</MantineThemeProvider>
+          </AuthProvider>
+        </QueryClientProvider>
+      </Provider>
+    </ErrorBoundary>
   );
 }

apps/portal/src/app/store/index.ts

@@ -4,6 +4,16 @@ import { authReducer } from '../features/auth/store/auth.slice';
 import { signupReducer } from '../features/auth/store/signup.slice';
 import { setPasswordReducer } from '../features/auth/store/set-password.slice';
 import { licensesReducer } from '../features/licenses/store/licenses.slice';
+import { authStorage } from '../features/auth/utils/auth-storage';
+
+const preloadedAuth = (() => {
+  const token = authStorage.getToken();
+  const user = authStorage.getUser();
+  if (token && user) {
+    return { token, user, isAuthenticated: true };
+  }
+  return undefined;
+})();
 
 export const store = configureStore({
   reducer: {
@@ -13,6 +23,7 @@ export const store = configureStore({
     licenses: licensesReducer,
     [baseApi.reducerPath]: baseApi.reducer,
   },
+  preloadedState: preloadedAuth ? { auth: preloadedAuth } : undefined,
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(baseApi.middleware),
 });