From f17673b6e778ccc5ff86ab539400ed0397cd372f Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 11 Apr 2023 13:06:02 +0100 Subject: [PATCH] Keep track of the old page before social login --- .../AuthenticationFlow/GitHubButton.tsx | 31 +++++++++++++++++-- .../AuthenticationFlow/GoogleButton.tsx | 31 +++++++++++++++++-- 2 files changed, 58 insertions(+), 4 deletions(-) diff --git a/src/components/AuthenticationFlow/GitHubButton.tsx b/src/components/AuthenticationFlow/GitHubButton.tsx index 7cf29065f..5b6da04e9 100644 --- a/src/components/AuthenticationFlow/GitHubButton.tsx +++ b/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.'); diff --git a/src/components/AuthenticationFlow/GoogleButton.tsx b/src/components/AuthenticationFlow/GoogleButton.tsx index 993def800..bff3b7c3b 100644 --- a/src/components/AuthenticationFlow/GoogleButton.tsx +++ b/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.');