Keep track of the old page before social login

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -3,10 +3,13 @@ import { useEffect, useState } from 'preact/hooks';
 import GitHubIcon from '../../icons/github.svg';
 import SpinnerIcon from '../../icons/spinner.svg';
 import Cookies from 'js-cookie';
-import {TOKEN_COOKIE_NAME} from "../../lib/jwt";
+import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
 type GitHubButtonProps = {};
 
+const GITHUB_REDIRECT_AT = 'githubRedirectAt';
+const GITHUB_LAST_PAGE = 'githubLastPage';
+
 export function GitHubButton(props: GitHubButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
@@ -38,8 +41,25 @@ export function GitHubButton(props: GitHubButtonProps) {
           setError('Something went wrong. Please try again later.');
           setIsLoading(false);
         } else {
+          let redirectUrl = '/';
+          const gitHubRedirectAt = localStorage.getItem(GITHUB_REDIRECT_AT);
+          const lastPageBeforeGithub = localStorage.getItem(GITHUB_LAST_PAGE);
+
+          // If the social redirect is there and less than 30 seconds old
+          // redirect to the page that user was on before they clicked the github login button
+          if (gitHubRedirectAt && lastPageBeforeGithub) {
+            const socialRedirectAtTime = parseInt(gitHubRedirectAt, 10);
+            const now = Date.now();
+            const timeSinceRedirect = now - socialRedirectAtTime;
+
+            if (timeSinceRedirect < 30 * 1000) {
+              redirectUrl = lastPageBeforeGithub;
+            }
+          }
+
+          localStorage.removeItem(GITHUB_REDIRECT_AT);
           Cookies.set(TOKEN_COOKIE_NAME, data.token);
-          window.location.href = '/';
+          window.location.href = redirectUrl;
         }
       })
       .catch((err) => {
@@ -58,6 +78,13 @@ export function GitHubButton(props: GitHubButtonProps) {
       .then((data: any) => {
         // @todo proper typing for API response
         if (data.loginUrl) {
+          // For non authentication pages, we want to redirect back to the page
+          // the user was on before they clicked the social login button
+          if (!['/login', '/signup'].includes(window.location.pathname)) {
+            localStorage.setItem(GITHUB_REDIRECT_AT, Date.now().toString());
+            localStorage.setItem(GITHUB_LAST_PAGE, window.location.pathname);
+          }
+
           window.location.href = data.loginUrl;
         } else {
           setError('Something went wrong. Please try again later.');

src/components/AuthenticationFlow/GoogleButton.tsx

@@ -2,10 +2,13 @@ import { useEffect, useState } from 'preact/hooks';
 import Cookies from 'js-cookie';
 import GoogleIcon from '../../icons/google.svg';
 import SpinnerIcon from '../../icons/spinner.svg';
-import {TOKEN_COOKIE_NAME} from "../../lib/jwt";
+import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
 type GoogleButtonProps = {};
 
+const GOOGLE_REDIRECT_AT = 'googleRedirectAt';
+const GOOGLE_LAST_PAGE = 'googleLastPage';
+
 export function GoogleButton(props: GoogleButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
@@ -37,8 +40,25 @@ export function GoogleButton(props: GoogleButtonProps) {
           setError('Something went wrong. Please try again later.');
           setIsLoading(false);
         } else {
+          let redirectUrl = '/';
+          const googleRedirectAt = localStorage.getItem(GOOGLE_REDIRECT_AT);
+          const lastPageBeforeGoogle = localStorage.getItem(GOOGLE_LAST_PAGE);
+
+          // If the social redirect is there and less than 30 seconds old
+          // redirect to the page that user was on before they clicked the github login button
+          if (googleRedirectAt && lastPageBeforeGoogle) {
+            const socialRedirectAtTime = parseInt(googleRedirectAt, 10);
+            const now = Date.now();
+            const timeSinceRedirect = now - socialRedirectAtTime;
+
+            if (timeSinceRedirect < 30 * 1000) {
+              redirectUrl = lastPageBeforeGoogle;
+            }
+          }
+
+          localStorage.removeItem(GOOGLE_REDIRECT_AT);
           Cookies.set(TOKEN_COOKIE_NAME, data.token);
-          window.location.href = '/';
+          window.location.href = redirectUrl;
         }
       })
       .catch((err) => {
@@ -57,6 +77,13 @@ export function GoogleButton(props: GoogleButtonProps) {
       .then((data: any) => {
         // @todo proper typing for API response
         if (data.loginUrl) {
+          // For non authentication pages, we want to redirect back to the page
+          // the user was on before they clicked the social login button
+          if (!['/login', '/signup'].includes(window.location.pathname)) {
+            localStorage.setItem(GOOGLE_REDIRECT_AT, Date.now().toString());
+            localStorage.setItem(GOOGLE_LAST_PAGE, window.location.pathname);
+          }
+
           window.location.href = data.loginUrl;
         } else {
           setError('Something went wrong. Please try again later.');