[QF-1165]: resolves the build and redirect issue

src/api.ts

@@ -30,6 +30,7 @@ import {
   makeWordByWordTranslationsUrl,
 } from '@/utils/apiPaths';
 import generateSignature from '@/utils/auth/signature';
+import { isStaticBuild } from '@/utils/build';
 import { SearchRequest, AdvancedCopyRequest, PagesLookUpRequest } from 'types/ApiRequests';
 import {
   TranslationsResponse,
@@ -65,7 +66,6 @@ export const X_AUTH_SIGNATURE = 'x-auth-signature';
 export const X_TIMESTAMP = 'x-timestamp';
 export const X_INTERNAL_CLIENT = 'x-internal-client';
 
-const isStaticBuild = process.env.IS_BUILD_TIME === 'true';
 export const fetcher = async function fetcher<T>(
   input: RequestInfo,
   init: RequestInit = {},

src/pages/auth.tsx

@@ -12,6 +12,8 @@ interface AuthProps {
   error?: string;
 }
 
+const LOGIN_URL = '/login';
+
 const Auth: React.FC<AuthProps> = ({ error }) => {
   const router = useRouter();
   const toast = useToast();
@@ -37,14 +39,14 @@ const Auth: React.FC<AuthProps> = ({ error }) => {
  *
  * @param {GetServerSidePropsContext} context - The context object containing request and response information.
  * @param {string} token - The token used for authentication and redirection.
- * @param {string} redirectUrl - The URL to redirect the user to after successful token handling.
+ * @param {string} destination - The URL to redirect the user to after successful token handling.
  * @returns {Promise<GetServerSidePropsResult<any>>} - A promise that resolves to the server-side props result,
  * which includes either a redirection or an error message.
  */
 const handleTokenRedirection = async (
   context: GetServerSidePropsContext,
   token: string,
-  redirectUrl: string,
+  destination: string,
 ): Promise<GetServerSidePropsResult<any>> => {
   try {
     const baseUrl = getBaseUrl(context);
@@ -59,7 +61,7 @@ const handleTokenRedirection = async (
     return {
       props: {},
       redirect: {
-        destination: redirectUrl,
+        destination,
         permanent: false,
       },
     };
@@ -128,15 +130,16 @@ const setProxyCookies = (response: Response, context: GetServerSidePropsContext)
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const { r, token } = context.query;
   const redirectUrl = (r || '/') as string;
+  const destination = redirectUrl === LOGIN_URL ? '/' : redirectUrl;
 
   if (token) {
-    return handleTokenRedirection(context, token as string, redirectUrl);
+    return handleTokenRedirection(context, token as string, destination);
   }
 
   return {
     props: {},
     redirect: {
-      destination: redirectUrl,
+      destination,
       permanent: false,
     },
   };

src/utils/api.ts

@@ -3,6 +3,7 @@ import { decamelizeKeys } from 'humps';
 import stringify from './qs-stringify';
 import { getBasePath } from './url';
 
+import { isStaticBuild } from '@/utils/build';
 import { Mushaf, MushafLines, QuranFont, QuranFontMushaf } from 'types/QuranReader';
 
 export const ITEMS_PER_PAGE = 10;
@@ -17,7 +18,6 @@ export const API_HOST =
   process.env.NEXT_PUBLIC_VERCEL_ENV === 'production' ? PRODUCTION_API_HOST : STAGING_API_HOST;
 
 const { API_GATEWAY_URL } = process.env;
-const isStaticBuild = process.env.IS_BUILD_TIME === 'true';
 
 /**
  * Generates a url to make an api call to our backend

src/utils/apiPaths.ts

@@ -1,5 +1,6 @@
 import { decamelizeKeys } from 'humps';
 
+// eslint-disable-next-line import/no-cycle
 import { getDefaultWordFields, getMushafId, ITEMS_PER_PAGE, makeUrl } from './api';
 import stringify from './qs-stringify';
 

src/utils/auth/api.ts

@@ -1,12 +1,15 @@
 /* eslint-disable max-lines */
+import { NextApiRequest } from 'next';
 import { configureRefreshFetch } from 'refresh-fetch';
 
 import { getTimezone } from '../datetime';
 import { prepareGenerateMediaFileRequestData } from '../media/utils';
 
+import generateSignature from './signature';
 import BookmarkByCollectionIdQueryParams from './types/BookmarkByCollectionIdQueryParams';
 import GetAllNotesQueryParams from './types/Note/GetAllNotesQueryParams';
 
+import { fetcher, X_AUTH_SIGNATURE, X_INTERNAL_CLIENT, X_TIMESTAMP } from '@/api';
 import {
   FilterActivityDaysParams,
   QuranActivityDay,
@@ -72,7 +75,7 @@ import {
   makeGetMediaFileProgressUrl,
   makeGetMonthlyMediaFilesCountUrl,
 } from '@/utils/auth/apiPaths';
-import { fetcher } from 'src/api';
+import { isStaticBuild } from '@/utils/build';
 import CompleteAnnouncementRequest from 'types/auth/CompleteAnnouncementRequest';
 import { GetBookmarkCollectionsIdResponse } from 'types/auth/GetBookmarksByCollectionId';
 import PreferenceGroup from 'types/auth/PreferenceGroup';
@@ -88,7 +91,6 @@ import { Collection } from 'types/Collection';
 import CompleteSignupRequest from 'types/CompleteSignupRequest';
 
 type RequestData = Record<string, any>;
-
 const IGNORE_ERRORS = [
   MediaRenderError.MediaVersesRangeLimitExceeded,
   MediaRenderError.MediaFilesPerUserLimitExceeded,
@@ -445,13 +447,31 @@ export const withCredentialsFetcher = async <T>(
   init?: RequestInit,
 ): Promise<T> => {
   try {
+    let additionalHeaders = {};
+    if (isStaticBuild) {
+      const req: NextApiRequest = {
+        url: typeof input === 'string' ? input : input.url,
+        method: init.method || 'GET',
+        body: init.body,
+        headers: init.headers,
+        query: {},
+      } as NextApiRequest;
+
+      const { signature, timestamp } = generateSignature(req, req.url);
+      additionalHeaders = {
+        [X_AUTH_SIGNATURE]: signature,
+        [X_TIMESTAMP]: timestamp,
+        [X_INTERNAL_CLIENT]: process.env.INTERNAL_CLIENT_ID,
+      };
+    }
     const data = await fetcher<T>(input, {
       ...init,
       credentials: 'include',
       headers: {
         ...init?.headers,
         // eslint-disable-next-line @typescript-eslint/naming-convention
         'x-timezone': getTimezone(),
+        ...additionalHeaders,
       },
     });
     return data;

src/utils/build.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const isStaticBuild = process.env.IS_BUILD_TIME === 'true';

src/utils/url.ts

@@ -1,3 +1,5 @@
+import { isStaticBuild } from '@/utils/build';
+
 const getLocalePostfix = (locale: string) => (locale !== 'en' ? `/${locale}` : '');
 
 export const getCurrentPath = () => {
@@ -43,7 +45,7 @@ export const navigateToExternalUrl = (url: string) => {
  * @returns {string}
  */
 export const getBasePath = (): string =>
-  `${process.env.NEXT_PUBLIC_VERCEL_ENV === 'development' ? 'http' : 'https'}://${
+  `${process.env.NEXT_PUBLIC_VERCEL_ENV === 'development' ? 'https' : 'https'}://${
     process.env.NEXT_PUBLIC_VERCEL_URL
   }`;
 
@@ -54,6 +56,9 @@ export const getBasePath = (): string =>
  * @returns  {string}
  */
 export const getAuthApiPath = (path: string): string => {
-  const BASE_PATH = getBasePath();
-  return `${BASE_PATH}/api/proxy/auth/${path}`;
+  const PROXY_PATH = '/api/proxy/auth/';
+  const BASE_PATH = isStaticBuild
+    ? `${process.env.API_GATEWAY_URL}/auth/`
+    : `${getBasePath()}${PROXY_PATH}`;
+  return `${BASE_PATH}${path}`;
 };