fix: resolves ban user action to show message and logout (#2263)

Author: mohsinayoob

locales/en/login.json

@@ -14,7 +14,8 @@
   "login-cta": "Log-in or Sign up now:",
   "login-error": {
     "AuthenticationError": "Authentication failed. Please try again later",
-    "TokenExpiredError": "You have been logged out, please login again."
+    "TokenExpiredError": "You have been logged out, please login again.",
+    "BannedUserError": "Sorry, Your account is banned. Contact Quran.Foundation."
   },
   "login-title": "Login to Quran.com",
   "other-options": "Other Login Options",

src/pages/login.tsx

@@ -34,10 +34,11 @@ const LoginPage: NextPage<Props> = () => {
   useEffect(() => {
     if (query.error) {
       const errorMessage = getErrorMessage(query.error);
-      toast(errorMessage, {
-        status: ToastStatus.Error,
+      replace(getLoginNavigationUrl(), null, { shallow: true }).then(() => {
+        toast(errorMessage, {
+          status: ToastStatus.Error,
+        });
       });
-      replace(getLoginNavigationUrl(), null, { shallow: true });
     }
   }, [query.error, toast, replace, t, getErrorMessage]);
 

src/utils/auth/api.ts

@@ -1,5 +1,6 @@
 /* eslint-disable max-lines */
 import { NextApiRequest } from 'next';
+import Router from 'next/router';
 import { configureRefreshFetch } from 'refresh-fetch';
 
 import { getTimezone } from '../datetime';
@@ -26,6 +27,7 @@ import { CreateGoalRequest, Goal, GoalCategory, UpdateGoalRequest } from '@/type
 import { Note } from '@/types/auth/Note';
 import { Response } from '@/types/auth/Response';
 import { StreakWithMetadataParams, StreakWithUserMetadata } from '@/types/auth/Streak';
+import AuthError from '@/types/AuthError';
 import GenerateMediaFileRequest, { MediaType } from '@/types/Media/GenerateMediaFileRequest';
 import MediaRenderError from '@/types/Media/MediaRenderError';
 import { Mushaf } from '@/types/QuranReader';
@@ -98,11 +100,20 @@ const IGNORE_ERRORS = [
 
 const handleErrors = async (res) => {
   const body = await res.json();
+  const error = body?.error || body?.details?.error;
+
   // sometimes FE needs to handle the error from the API instead of showing a general something went wrong message
-  const shouldIgnoreError = IGNORE_ERRORS.includes(body?.error?.code);
+  const shouldIgnoreError = IGNORE_ERRORS.includes(error?.code);
   if (shouldIgnoreError) {
     return body;
   }
+  // const toast = useToast();
+
+  if (error?.code === AuthError.BannedUserError) {
+    await logoutUser();
+    return Router.push(`/login?error=${AuthError.BannedUserError}`);
+  }
+
   throw new Error(body?.message);
 };
 

types/AuthError.ts

@@ -2,5 +2,6 @@ enum AuthError {
   AuthenticationError = 'AuthenticationError',
   TokenExpiredError = 'TokenExpiredError',
   GenerateCookieError = 'GenerateCookieError',
+  BannedUserError = 'BannedUserError',
 }
 export default AuthError;