Improve pre- and post-auth redirect flows (#180)

* fix(web): add /machinery/new-session/... route, start auth flow from there

* fix(api): change redirect to path-based format

* fix(api): remove extra / from login-callback redirect

* fix(web): /auth/login should skip flows if isAuthenticated is true

packages/api/handlers/login-callback.ts

@@ -106,9 +106,7 @@ export const LoginCallback = resolveFailures(
 
     await Sessions.put(sessionID.string, sessionData, 60 * 60 * 6);
 
-    return Bounce(
-      bounceBaseUrl + '/machinery/new-session?session_id=' + sessionID.string
-    );
+    return Bounce(bounceBaseUrl + 'machinery/new-session/' + sessionID.string);
   }
 );
 

packages/web/src/app-router/AppRouter.tsx

@@ -31,6 +31,10 @@ export const AppRouter = () => {
       <RouteWrapper component={PickerPage} path="/s/:serverID" />
 
       <RouteWrapper component={MachineryNewSession} path="/machinery/new-session" />
+      <RouteWrapper
+        component={MachineryNewSession}
+        path="/machinery/new-session/:sessionID"
+      />
       <RouteWrapper component={MachineryLogout} path="/machinery/logout" />
       <RouteWrapper component={MachineryBotJoin} path="/machinery/bot-join" />
       <RouteWrapper component={MachineryBotJoin} path="/machinery/bot-join/:serverID" />

packages/web/src/pages/auth/login.tsx

@@ -1,11 +1,14 @@
+import { redirectTo } from '@reach/router';
 import { AuthLogin } from '@roleypoly/design-system/templates/auth-login';
 import { GuildSlug } from '@roleypoly/types';
 import React from 'react';
 import { useApiContext } from '../../contexts/api/ApiContext';
+import { useSessionContext } from '../../contexts/session/SessionContext';
 import { Title } from '../../utils/metaTitle';
 
 const Login = () => {
   const { apiUrl, fetch } = useApiContext();
+  const { isAuthenticated } = useSessionContext();
   // If ?r is in query, then let's render the slug page
   // If not, redirect.
   const [guildSlug, setGuildSlug] = React.useState<GuildSlug | null>(null);
@@ -17,6 +20,9 @@ const Login = () => {
     const redirectServerID = url.searchParams.get('r');
     const redirectUrl = `${apiUrl}/login-bounce?cbh=${callbackHost.href}`;
     if (!redirectServerID) {
+      if (isAuthenticated) {
+        redirectTo('/servers');
+      }
       window.location.href = redirectUrl;
       return;
     }
@@ -33,7 +39,11 @@ const Login = () => {
     };
 
     fetchGuildSlug(redirectServerID);
-  }, [apiUrl, fetch]);
+
+    if (isAuthenticated) {
+      redirectTo(`/s/${redirectServerID}`);
+    }
+  }, [apiUrl, fetch, isAuthenticated]);
 
   if (guildSlug === null) {
     return <div>Loading...</div>;

packages/web/src/pages/landing.tsx

@@ -10,7 +10,7 @@ const Landing = () => {
   const appShellProps = useAppShellProps();
 
   if (isAuthenticated) {
-    return <Redirect to="/servers" />;
+    return <Redirect to="/servers" noThrow />;
   }
 
   return (

packages/web/src/pages/machinery/new-session.tsx

@@ -1,22 +1,32 @@
+import { Redirect } from '@reach/router';
 import * as React from 'react';
+import { useSessionContext } from '../../contexts/session/SessionContext';
 import { Title } from '../../utils/metaTitle';
 
-const NewSession = () => {
+const NewSession = (props: { sessionID: string }) => {
+  const session = useSessionContext();
+  const [postauthUrl, setPostauthUrl] = React.useState('/servers');
+
   React.useEffect(() => {
     const url = new URL(window.location.href);
-    const id = url.searchParams.get('session_id');
+    const id = props.sessionID || url.searchParams.get('session_id');
     if (id) {
       localStorage.setItem('rp_session_key', id);
+      session.setSession({ sessionID: id });
 
-      const redirectUrl = localStorage.getItem('rp_postauth_redirect');
-      window.location.href = redirectUrl || '/';
+      const storedPostauthUrl = localStorage.getItem('rp_postauth_redirect');
+      if (storedPostauthUrl) {
+        setPostauthUrl(storedPostauthUrl);
+        localStorage.removeItem('rp_postauth_redirect');
+      }
     }
-  });
+  }, [setPostauthUrl, props.sessionID, session]);
 
   return (
     <>
       <Title title="Logging you into Roleypoly..." />
-      <div>Redirecting you...</div>
+      <div>Logging you into Roleypoly...</div>
+      {session.isAuthenticated && <Redirect to={postauthUrl} noThrow replace />}
     </>
   );
 };