Fix: SH-STUDENT-APP-7 Redux error #9 - Reducers may not dispatch actions

src/components/on-board/hero.tsx

@@ -7,7 +7,7 @@ import Spinner from "../common/spinner";
 import { useEffect, useState } from "react";
 import { GoogleAuth } from "@codetrix-studio/capacitor-google-auth";
 import { useGoogleIdTokenForAuth } from "@/providers/auth.service";
-import { setCredentials } from "@/store/slices/authSlice";
+import { loginWithCredentials } from "@/store/slices/authSlice";
 import { setIsProfileCompleted } from "@/store/slices/userSlice";
 import { useTranslation } from "react-i18next";
 import { alertDialog } from "@/hooks/use-alert-dialog";
@@ -44,9 +44,7 @@ export function Hero() {
             isProfileCompleted: res.isProfileCompleted
           }));
 
-          dispatch(setCredentials({
-            token: res.token
-          }));
+          dispatch(loginWithCredentials(res.token));
 
           //todo: set language based on saved preference?
           //language_pref

src/pages/(auth)/landing/page.tsx

@@ -5,7 +5,7 @@ import AuthLayout from "../layout";
 import { useEffect, useRef, useState } from "react";
 import { loginByKey } from "@/providers/auth.service";
 import { setIsProfileCompleted } from "@/store/slices/userSlice";
-import { setCredentials } from "@/store/slices/authSlice";
+import { loginWithCredentials } from "@/store/slices/authSlice";
 import { useAppDispatch } from "@/store/store";
 import { useIonRouter } from "@ionic/react";
 import { useQuery } from "@/utils/common";
@@ -42,9 +42,7 @@ export default function LandingPage() {
         //setAuthKey(null);
 
         // After successful login
-        dispatch(setCredentials({
-          token: res.token
-        }));
+        dispatch(loginWithCredentials(res.token));
 
         dispatch(setIsProfileCompleted({ 
           isProfileCompleted: res.isProfileCompleted

src/pages/(auth)/login-two-step/page.tsx

@@ -10,7 +10,7 @@ import {
 import { FormInput } from "@/components/ui/form-input";
 import OnboardFooter from "@/components/on-board/layout/footer";
 import SubmitButton from "@/components/ui/submit-button";
-import { setCredentials } from "@/store/slices/authSlice";
+import { loginWithCredentials } from "@/store/slices/authSlice";
 import { useAppDispatch } from "@/store/store";
 import {  loginTwoStep } from "@/providers/auth.service";
 import { Suspense, useEffect, useState } from "react";
@@ -98,9 +98,7 @@ export default function LoginTwoStepPage() {
 
       if (res.operation == 'success') {
         // After successful login
-        dispatch(setCredentials({
-          token: res.token
-        }));
+        dispatch(loginWithCredentials(res.token));
 
         dispatch(setIsProfileCompleted({ 
           isProfileCompleted: res.isProfileCompleted

src/pages/(auth)/login/page.tsx

@@ -10,7 +10,7 @@ import {
 import { FormInput } from "@/components/ui/form-input";
 import OnboardFooter from "@/components/on-board/layout/footer";
 import SubmitButton from "@/components/ui/submit-button";
-import { setCredentials, setUnVerifiedToken } from "@/store/slices/authSlice";
+import { loginWithCredentials, setUnVerifiedToken } from "@/store/slices/authSlice";
 import { useAppDispatch } from "@/store/store";
 import { basicAuth } from "@/providers/auth.service";
 import { Suspense, useEffect, useState } from "react";
@@ -111,9 +111,7 @@ export default function LoginPage() {
       } else {
 
         // After successful login
-        dispatch(setCredentials({
-          token: res.token
-        }));
+        dispatch(loginWithCredentials(res.token));
 
         dispatch(setIsProfileCompleted({ 
           isProfileCompleted: res.isProfileCompleted

src/pages/(auth)/update-password/[token]/page.tsx

@@ -18,7 +18,7 @@ import { useIonRouter } from "@ionic/react";
 import { useAppDispatch } from "@/store/store";
 import { setIsProfileCompleted } from "@/store/slices/userSlice";
 import { updatePassword } from "@/providers/auth.service";
-import { setCredentials } from "@/store/slices/authSlice";
+import { loginWithCredentials } from "@/store/slices/authSlice";
 import { page, track } from "@/providers/analytics.service";
 import { alertDialog } from "@/hooks/use-alert-dialog";
 import { useTranslation } from "react-i18next";
@@ -86,9 +86,7 @@ const formSchema = z.object({
                   });
                   //'Password recovery email sent, please check your email.'
 
-                    dispatch(setCredentials({
-                        token: res.accessToken.token
-                      }));
+                    dispatch(loginWithCredentials(res.accessToken.token));
 
                       dispatch(setIsProfileCompleted({ 
                         isProfileCompleted: res.accessToken.isProfileCompleted

src/pages/(auth)/verify-email/[email]/page.tsx

@@ -20,7 +20,7 @@ import { useParams } from "react-router-dom";
 import { resendVerificationEmail, verifyEmail } from "@/providers/auth.service";
 import { errorMessage, useQuery } from "@/utils/common";
 import { useAppDispatch } from "@/store/store";
-import { setCredentials, setUnVerifiedToken } from "@/store/slices/authSlice";
+import { loginWithCredentials, setUnVerifiedToken } from "@/store/slices/authSlice";
 import { setIsProfileCompleted, setUser } from "@/store/slices/userSlice";
 import { page, track } from "@/providers/analytics.service";
 import { alertDialog } from "@/hooks/use-alert-dialog";
@@ -141,9 +141,7 @@ export default function VerifyEmailPage() {
         }));
 
         // After successful login
-        dispatch(setCredentials({
-          token: res.token
-        }));
+        dispatch(loginWithCredentials(res.token));
 
         dispatch(setIsProfileCompleted({ 
           isProfileCompleted: res.isProfileCompleted

src/store/slices/authSlice.ts

@@ -1,5 +1,6 @@
 import { userLogin$ } from '@/providers/event.service';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { AppDispatch } from '@/store/store';
 //import { cookies } from 'next/headers';
 //import Cookies from 'js-cookie';
 
@@ -29,8 +30,6 @@ const authSlice = createSlice({
       });*/
 
       //Cookies.set('isAuthenticated', "1");
-
-      userLogin$.next({});
     },
     logout: (state) => {
       state.token = null;
@@ -48,4 +47,15 @@ const authSlice = createSlice({
 });
 
 export const { setCredentials, logout, setUnVerifiedToken } = authSlice.actions;
+
+/**
+ * Thunk that sets credentials and then emits the userLogin$ event after the
+ * reducer has fully returned, avoiding Redux error #9 ("Reducers may not
+ * dispatch actions").
+ */
+export const loginWithCredentials = (token: string) => (dispatch: AppDispatch) => {
+  dispatch(setCredentials({ token }));
+  userLogin$.next({});
+};
+
 export default authSlice.reducer;