Redirect to current page after logging in

src/components/Auth/RedirectToLoginPage.tsx

@@ -7,7 +7,8 @@ import { getLoginNavigationUrl } from '@/utils/navigation';
 const RedirectToLoginPage = () => {
   const router = useRouter();
   useEffect(() => {
-    router.replace(getLoginNavigationUrl());
+    const { asPath } = router;
+    router.replace(getLoginNavigationUrl(asPath));
   }, [router]);
 
   return <></>;

src/components/Course/CourseDetails/StatusHeader/index.tsx

@@ -17,7 +17,11 @@ import { enrollUser } from '@/utils/auth/api';
 import { makeGetCourseUrl } from '@/utils/auth/apiPaths';
 import { isLoggedIn } from '@/utils/auth/login';
 import { logButtonClick } from '@/utils/eventLogger';
-import { getLessonNavigationUrl, getLoginNavigationUrl } from '@/utils/navigation';
+import {
+  getCourseNavigationUrl,
+  getLessonNavigationUrl,
+  getLoginNavigationUrl,
+} from '@/utils/navigation';
 
 type Props = {
   course: Course;
@@ -67,7 +71,7 @@ const StatusHeader: React.FC<Props> = ({ course, isCTA = false }) => {
         });
     } else {
       logButtonClick('guest_enroll_course', { courseId: id, isCTA });
-      router.replace(getLoginNavigationUrl());
+      router.replace(getLoginNavigationUrl(getCourseNavigationUrl(slug)));
     }
   };
 

src/components/Course/CourseDetails/Tabs/Syllabus/index.tsx

@@ -36,6 +36,7 @@ const Syllabus: React.FC<Props> = ({ course }) => {
       {lessons.map((lesson, index) => {
         const dayNumber = index + 1;
         const { title, isCompleted, id, slug } = lesson;
+        const url = getLessonNavigationUrl(courseSlug, slug);
 
         return (
           <p className={styles.container} key={index}>
@@ -47,11 +48,7 @@ const Syllabus: React.FC<Props> = ({ course }) => {
               {`: `}
               <Link
                 onClick={() => onDayClick(dayNumber, id)}
-                href={
-                  isUserLoggedIn
-                    ? getLessonNavigationUrl(courseSlug, slug)
-                    : getLoginNavigationUrl()
-                }
+                href={isUserLoggedIn ? url : getLoginNavigationUrl(url)}
                 variant={LinkVariant.Highlight}
               >
                 {title}

src/components/HomePage/QuranGrowthJourneySection/CallToActionButtons/QuranGoalsButtons.tsx

@@ -8,8 +8,9 @@ import GoalButtons from '@/components/HomePage/QuranGrowthJourneySection/Collaps
 import Button, { ButtonSize, ButtonType } from '@/dls/Button/Button';
 import useGetRecentlyReadVerseKeys from '@/hooks/auth/useGetRecentlyReadVerseKeys';
 import useGetStreakWithMetadata from '@/hooks/auth/useGetStreakWithMetadata';
+import { isLoggedIn } from '@/utils/auth/login';
 import { logButtonClick } from '@/utils/eventLogger';
-import { getReadingGoalNavigationUrl } from '@/utils/navigation';
+import { getLoginNavigationUrl, getReadingGoalNavigationUrl } from '@/utils/navigation';
 
 const QuranGoalsButtons = () => {
   const { t } = useTranslation('reading-goal');
@@ -32,13 +33,15 @@ const QuranGoalsButtons = () => {
     );
   }
 
+  const url = getReadingGoalNavigationUrl();
+
   return (
     <div className={styles.buttonsContainer}>
       <Button
         onClick={onCreateReadingGoalClick}
         size={ButtonSize.Small}
         type={ButtonType.Success}
-        href={getReadingGoalNavigationUrl()}
+        href={isLoggedIn() ? url : getLoginNavigationUrl(url)}
       >
         {t('create-reading-goal')}
       </Button>

src/components/HomePage/QuranGrowthJourneySection/CollapsibleSection/QuranReadingGoals/StreakIntroductionWidget.tsx

@@ -16,14 +16,16 @@ const StreakIntroductionWidget = () => {
     });
   };
 
+  const url = getReadingGoalNavigationUrl();
+
   return (
     <>
       <p>{t('qgj.quran-reading-goals.desc.logged-out')}</p>
       <div className={styles.actionsContainer}>
         <Button
           onClick={onCreateReadingGoalClicked}
           size={ButtonSize.Small}
-          href={isLoggedIn() ? getReadingGoalNavigationUrl() : getLoginNavigationUrl()}
+          href={isLoggedIn() ? url : getLoginNavigationUrl(url)}
         >
           {t('reading-goal:create-reading-goal')}
         </Button>

src/components/Login/LoginContainer.tsx

@@ -101,7 +101,7 @@ const LoginContainer = () => {
 
         {loginType === LoginType.Social && (
           <>
-            <SocialLogin />
+            <SocialLogin redirect={redirect} />
             {process.env.NEXT_PUBLIC_ENABLE_MAGIC_LINK_LOGIN === 'true' && (
               <Button
                 onClick={onMagicLinkClicked}

src/components/Login/SocialLogin.tsx

@@ -11,7 +11,11 @@ import { makeGoogleLoginUrl, makeFacebookLoginUrl, makeAppleLoginUrl } from '@/u
 import { logButtonClick } from '@/utils/eventLogger';
 import AuthType from 'types/auth/AuthType';
 
-const SocialLogin = () => {
+type Props = {
+  redirect?: string;
+};
+
+const SocialLogin: React.FC<Props> = ({ redirect }) => {
   const { t } = useTranslation('login');
   const logSocialLoginClick = (type: AuthType) => {
     // eslint-disable-next-line i18next/no-literal-string
@@ -23,7 +27,7 @@ const SocialLogin = () => {
         <Button
           prefix={<GoogleIcon />}
           className={classNames(styles.loginButton, styles.googleButton)}
-          href={makeGoogleLoginUrl()}
+          href={makeGoogleLoginUrl(redirect)}
           shouldFlipOnRTL={false}
           onClick={() => {
             logSocialLoginClick(AuthType.Google);
@@ -36,7 +40,7 @@ const SocialLogin = () => {
         <Button
           prefix={<FacebookIcon />}
           className={classNames(styles.loginButton, styles.facebookButton)}
-          href={makeFacebookLoginUrl()}
+          href={makeFacebookLoginUrl(redirect)}
           shouldFlipOnRTL={false}
           onClick={() => {
             logSocialLoginClick(AuthType.Facebook);
@@ -47,7 +51,7 @@ const SocialLogin = () => {
       )}
       {process.env.NEXT_PUBLIC_ENABLE_APPLE_LOGIN === 'true' && (
         <Button
-          href={makeAppleLoginUrl()}
+          href={makeAppleLoginUrl(redirect)}
           prefix={<AppleIcon />}
           className={styles.loginButton}
           shouldFlipOnRTL={false}

src/components/Navbar/NavbarBody/ProfileAvatarButton.tsx

@@ -22,6 +22,7 @@ import {
   getNotesNavigationUrl,
   getMyCoursesNavigationUrl,
   getReadingGoalProgressNavigationUrl,
+  getLoginNavigationUrl,
 } from '@/utils/navigation';
 
 const ProfileAvatarButton = () => {
@@ -119,7 +120,7 @@ const ProfileAvatarButton = () => {
       tooltip={t('login')}
       ariaLabel={t('login')}
       variant={ButtonVariant.Ghost}
-      href="/login"
+      href={getLoginNavigationUrl()}
       shape={ButtonShape.Circle}
       onClick={onTriggerClicked}
       id="login-button"

src/components/Verse/Notes/index.tsx

@@ -11,7 +11,7 @@ import EmptyNotesIcon from '@/icons/notes-empty.svg';
 import NotesIcon from '@/icons/notes-filled.svg';
 import { isLoggedIn } from '@/utils/auth/login';
 import { logButtonClick } from '@/utils/eventLogger';
-import { getLoginNavigationUrl } from '@/utils/navigation';
+import { getChapterWithStartingVerseUrl, getLoginNavigationUrl } from '@/utils/navigation';
 
 export enum VerseNotesTrigger {
   IconButton = 'button',
@@ -36,7 +36,7 @@ const VerseNotes = ({ verseKey, isTranslationView, hasNotes }: VerseNotesProps)
       isLoggedIn,
     });
     if (!isUserLoggedIn) {
-      router.push(getLoginNavigationUrl());
+      router.push(getLoginNavigationUrl(getChapterWithStartingVerseUrl(verseKey)));
     } else {
       setIsModalOpen(true);
     }

src/pages/ramadan-activities/index.tsx

@@ -22,7 +22,12 @@ import Button, { ButtonVariant } from '@/dls/Button/Button';
 import styles from '@/pages/contentPage.module.scss';
 import { logButtonClick } from '@/utils/eventLogger';
 import { getLanguageAlternates } from '@/utils/locale';
-import { getCanonicalUrl, getRamadanActivitiesNavigationUrl } from '@/utils/navigation';
+import {
+  getCanonicalUrl,
+  getLoginNavigationUrl,
+  getRamadanActivitiesNavigationUrl,
+  getReadingGoalNavigationUrl,
+} from '@/utils/navigation';
 
 const PATH = getRamadanActivitiesNavigationUrl();
 const RamadanActivitiesPage: NextPage = (): JSX.Element => {
@@ -217,7 +222,7 @@ const RamadanActivitiesPage: NextPage = (): JSX.Element => {
             </h1>
             <div>
               Can you keep a 30 day Quran reading streak This Ramadan? Simply
-              <InlineLink text="Log-in" href="/login" />
+              <InlineLink text="Log-in" href={getLoginNavigationUrl()} />
               to Quran.com and begin reading to start your Streak! You can also create a custom goal
               that will help you stay on track:
             </div>
@@ -227,7 +232,7 @@ const RamadanActivitiesPage: NextPage = (): JSX.Element => {
                   onButtonClicked(Section.MONTH_STREAK);
                 }}
                 variant={ButtonVariant.Shadow}
-                href="/reading-goal"
+                href={getReadingGoalNavigationUrl()}
                 isNewTab
                 className={styles.button}
               >

src/utils/auth/apiPaths.ts

@@ -38,11 +38,14 @@ export const makeVerificationCodeUrl = (): string => makeUrl('users/verification
 export const makeSendMagicLinkUrl = (redirect?: string): string =>
   makeUrl('auth/magiclogin', redirect ? { redirect } : undefined);
 
-export const makeGoogleLoginUrl = (): string => makeUrl('auth/google');
+export const makeGoogleLoginUrl = (redirect?: string): string =>
+  makeUrl('auth/google', redirect ? { redirect } : undefined);
 
-export const makeFacebookLoginUrl = (): string => makeUrl('auth/facebook');
+export const makeFacebookLoginUrl = (redirect?: string): string =>
+  makeUrl('auth/facebook', redirect ? { redirect } : undefined);
 
-export const makeAppleLoginUrl = (): string => makeUrl('auth/apple');
+export const makeAppleLoginUrl = (redirect?: string): string =>
+  makeUrl('auth/apple', redirect ? { redirect } : undefined);
 
 export const makeBookmarksUrl = (mushafId: number, limit?: number): string =>
   makeUrl('bookmarks', { mushafId, limit });

src/utils/navigation.ts

@@ -300,7 +300,8 @@ export const getMyCoursesNavigationUrl = () => '/my-learning-plans';
 export const getCoursesNavigationUrl = () => '/learning-plans';
 export const getRamadanActivitiesNavigationUrl = () => '/ramadan-activities';
 
-export const getLoginNavigationUrl = () => '/login';
+export const getLoginNavigationUrl = (redirectTo?: string) =>
+  `/login${redirectTo ? `?r=${redirectTo}` : ''}`;
 
 export const getReadingGoalProgressNavigationUrl = () => '/reading-goal/progress';