simulate login with IMPRESS_LOG_IN_AS flag

package.json

@@ -45,7 +45,7 @@
     "xmlrpc": "^1.3.2"
   },
   "scripts": {
-    "start": "yarn build-cached-data && react-scripts start",
+    "start": "yarn build-cached-data && REACT_APP_IMPRESS_LOG_IN_AS=$IMPRESS_LOG_IN_AS react-scripts start",
     "build": "yarn build-cached-data && react-scripts build",
     "vercel-build": "yum install libuuid-devel libmount-devel && cp /lib64/{libuuid,libmount,libblkid}.so.1 node_modules/canvas/build/Release/",
     "test": "react-scripts test --env=jsdom",

src/app/GlobalHeader.js

@@ -111,14 +111,14 @@ function HomeLink(props) {
 }
 
 function UserNavBarSection() {
-  const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0();
-  const { id, username } = useCurrentUser();
+  const { loginWithRedirect, logout } = useAuth0();
+  const { isLoading, isLoggedIn, id, username } = useCurrentUser();
 
   if (isLoading) {
     return null;
   }
 
-  if (isAuthenticated) {
+  if (isLoggedIn) {
     return (
       <HStack align="center" spacing="2">
         {username && (

src/app/components/useCurrentUser.js

@@ -3,8 +3,29 @@ import { useAuth0 } from "@auth0/auth0-react";
 function useCurrentUser() {
   const { isLoading, isAuthenticated, user } = useAuth0();
 
+  // In development, you can start the server with
+  // `IMPRESS_LOG_IN_AS=12345 vc dev` to simulate logging in as user 12345.
+  //
+  // This flag shouldn't be present in prod anyway, but the dev check is an
+  // extra safety precaution!
+  //
+  // NOTE: In package.json, we forward the flag to REACT_APP_IMPRESS_LOG_IN_AS,
+  //       because create-react-app only forwards flags with that prefix.
+  if (
+    process.env["NODE_ENV"] === "development" &&
+    process.env["REACT_APP_IMPRESS_LOG_IN_AS"]
+  ) {
+    const id = process.env["REACT_APP_IMPRESS_LOG_IN_AS"];
+    return {
+      isLoading: false,
+      isLoggedIn: true,
+      id,
+      username: `<Simulated User ${id}>`,
+    };
+  }
+
   if (isLoading || !isAuthenticated) {
-    return { id: null, username: null, isLoggedIn: false };
+    return { isLoading, isLoggedIn: false, id: null, username: null };
   }
 
   // NOTE: Users created correctly should have these attributes... but I'm
@@ -13,7 +34,7 @@ function useCurrentUser() {
   const id = user.sub?.match(/^auth0\|impress-([0-9]+)$/)?.[1];
   const username = user["https://oauth.impress-2020.openneo.net/username"];
 
-  return { id, username, isLoggedIn: true };
+  return { isLoading, isLoggedIn: true, id, username };
 }
 
 export default useCurrentUser;

src/app/components/useRequireLogin.js

@@ -1,6 +1,8 @@
 import React from "react";
 import { useAuth0 } from "@auth0/auth0-react";
 
+import useCurrentUser from "./useCurrentUser";
+
 /**
  * useRequireLogin redirects to a login page, if the user is not already logged
  * in.
@@ -9,9 +11,10 @@ import { useAuth0 } from "@auth0/auth0-react";
  * redirecting, or false if the user is logged in and we can proceed.
  */
 function useRequireLogin() {
-  const { isLoading, isAuthenticated, loginWithRedirect } = useAuth0();
+  const { isLoading, isLoggedIn } = useCurrentUser();
+  const { loginWithRedirect } = useAuth0();
 
-  const isRedirecting = !isLoading && !isAuthenticated;
+  const isRedirecting = !isLoading && !isLoggedIn;
 
   React.useEffect(() => {
     if (isRedirecting) {

src/server/auth.js

@@ -18,6 +18,18 @@ async function getJwtKey(header, callback) {
 }
 
 async function getUserIdFromToken(token) {
+  // In development, you can start the server with
+  // `IMPRESS_LOG_IN_AS=12345 vc dev` to simulate logging in as user 12345.
+  //
+  // This flag shouldn't be present in prod anyway, but the dev check is an
+  // extra safety precaution!
+  if (
+    process.env["NODE_ENV"] === "development" &&
+    process.env["IMPRESS_LOG_IN_AS"]
+  ) {
+    return process.env["IMPRESS_LOG_IN_AS"];
+  }
+
   if (!token) {
     return null;
   }