add login continue

src/components/App.tsx

@@ -1,8 +1,13 @@
-import { CSSProperties, lazy, Suspense } from 'react';
+import { CSSProperties, lazy, Suspense, useContext, useEffect } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import NotificationsProvider from '../state/Notifications/NotificationsProvider';
+import AuthenticationContext from './Authentication/AuthenticationContext';
 import Header from './Header/Header';
-import { useMe } from './hooks';
+import {
+	hasLoginContinueURL,
+	popLoginContinueURL,
+	setLoginContinueURL,
+} from './loginContinueUrl';
 import WheelShare from './WheelShare';
 import WheelShareLoggedOut from './WheelShareLoggedOut';
 
@@ -22,7 +27,19 @@ const style: CSSProperties = {
 };
 
 export default function App() {
-	const user = useMe();
+	const { user, loaded } = useContext(AuthenticationContext);
+
+	useEffect(() => {
+		if (!loaded) return;
+
+		if (!user) {
+			if (!window.location.pathname.startsWith('/auth/')) {
+				setLoginContinueURL(window.location.href);
+			}
+		} else if (hasLoginContinueURL()) {
+			window.location.href = popLoginContinueURL()!;
+		}
+	}, [loaded, user]);
 
 	return (
 		<div style={{ padding: '1rem', maxWidth: '100vw' }}>

src/components/Authentication/AuthenticationContext.ts

@@ -13,12 +13,15 @@ export type AuthenticationContextProps = {
 	 * Function that can be used to trigger an auth state refresh.
 	 */
 	refresh: () => void;
+
+	loaded: boolean;
 };
 
 const AuthenticationContext = createContext<AuthenticationContextProps>({
 	user: null,
 	refresh: () =>
 		console.warn('calling refresh on default AuthenticationContext'),
+	loaded: false,
 });
 
 export default AuthenticationContext;

src/components/Authentication/AuthenticationWrapper.tsx

@@ -7,32 +7,29 @@ export default function AuthenticationWrapper({
 }: {
 	children: React.ReactNode;
 }) {
-	// Prevent race conditions
 	const [user, setUser] = useState<User | null>(null);
+	const [loaded, setLoaded] = useState(false);
 
 	const refresh = useCallback(() => {
-		const none = () => setUser(null);
+		async function refresh_() {
-		const sessionToken = localStorage.getItem('session_token');
+			const sessionToken = localStorage.getItem('session_token');
 
-		if (sessionToken) {
+			if (sessionToken) {
-			getMe()
+				const user = await getMe();
-				.then((user) => {
+				if (!('status' in user && user.status === 'error')) {
-					if ('status' in user && user.status === 'error') {
+					setUser(user);
-						setUser(null);
+					return;
-					} else {
+				}
-						setUser(user);
+			}
-					}
+			setUser(null);
-				})
-				.catch(() => none());
-		} else {
-			none();
 		}
+		refresh_().finally(() => setLoaded(true));
 	}, []);
 
 	useEffect(refresh, [refresh]);
 
 	return (
-		<AuthenticationContext.Provider value={{ user, refresh }}>
+		<AuthenticationContext.Provider value={{ user, refresh, loaded }}>
 			{children}
 		</AuthenticationContext.Provider>
 	);

src/components/loginContinueUrl.ts

@@ -0,0 +1,17 @@
+const KEY = 'ws_login_continue_url';
+
+export function setLoginContinueURL(url: string) {
+	localStorage.setItem(KEY, url);
+}
+
+export function hasLoginContinueURL() {
+	return localStorage.getItem(KEY) !== null;
+}
+
+export function popLoginContinueURL() {
+	const value = localStorage.getItem(KEY);
+
+	localStorage.removeItem(KEY);
+
+	return value;
+}