moved login page logic into the auth file to redirect correctly before auth redirects because you're unauthenticated

src/providers/auth.tsx

@@ -1,31 +1,89 @@
-import { useAuth0 } from "@auth0/auth0-react";
-import { PropsWithChildren, useEffect } from "react";
+import { RedirectLoginOptions, useAuth0 } from "@auth0/auth0-react";
+import queryString from "query-string";
+import { PropsWithChildren, useCallback, useEffect } from "react";
+import { useLocation } from "react-router-dom";
 
 interface Props extends PropsWithChildren<any>{
     setToken: React.Dispatch<React.SetStateAction<string | undefined>>
+    prevPath?: string
 }
 
 export default function AuthWrapper(props: Props) {
-    const { children, setToken } = props;
-    const { isLoading, loginWithRedirect, isAuthenticated, getAccessTokenSilently } = useAuth0();
-    
-    useEffect(() => {
-        if (!isAuthenticated && !isLoading) {
-            loginWithRedirect();
-        }
-    }, [isAuthenticated, loginWithRedirect, isLoading]);
+  const { children, setToken, prevPath } = props;
+  const { isLoading, loginWithRedirect, isAuthenticated, getAccessTokenSilently } = useAuth0();
 
-    useEffect(() => {
-        if (isAuthenticated) getAccessTokenSilently().then(t => {
-            if (t.length < 1) {
-                loginWithRedirect()
-            }
-            setToken(t)
-        }).catch(() => {
-            // No token, go back to login
-            loginWithRedirect()
-        })
-    }, [setToken, isAuthenticated])
 
-    return children;
+  useEffect(() => {
+    const url = new URL(window.location.href);
+
+    const isManualLoginPage = url.pathname === "/login";
+
+    if (isManualLoginPage) {
+      const options: RedirectLoginOptions = {
+        authorizationParams: {}  // Initialize here
+      };
+
+      let parsed = queryString.parse(url.search);
+      if (parsed.signup === "true") {
+        options.authorizationParams!.screen_hint = "signup"; 
+      }
+
+      if (parsed.email && parsed.email !== "") {
+        options.authorizationParams!.login_hint = parsed.email.toString(); // prefill email
+      }
+      
+      loginWithRedirect(options)
+      
+    } else if (!isAuthenticated && !isLoading) {
+      loginWithRedirect();
+    }
+  }, [isAuthenticated, loginWithRedirect, isLoading]);
+
+  useEffect(() => {
+    if (isAuthenticated) getAccessTokenSilently().then(t => {
+      if (t.length < 1) {
+        loginWithRedirect()
+      }
+      console.log("setting token :)")
+      setToken(t)
+    }).catch(() => {
+      // No token, go back to login
+      loginWithRedirect()
+    })
+  }, [setToken, isAuthenticated])
+
+  // const setRouteBeforeLogin = useCallback((): Promise<string> => {
+  //   return new Promise(function(resolve) {
+  //     localStorage.setItem("routeBeforeLogin", prevPath ? prevPath : "/");
+  //     return resolve("success");
+  //   });
+  // }, [prevPath]);
+
+  useEffect(() => {
+    const options: RedirectLoginOptions = {
+      authorizationParams: {}  // Initialize here
+    };
+    console.log(location)
+    if (location && location.search) {
+      let parsed = queryString.parse(location.search);
+
+      console.log(parsed.signup)
+      if (parsed.signup === "true") {
+        // if (options.authorizationParams) options.authorizationParams.screen_hint = "signup"; // 'signup' tells Auth0 to show the signup tab
+        options.authorizationParams!.screen_hint = "signup"; // 'signup' tells Auth0 to show the signup tab
+        console.log(options)
+      }
+
+      if (parsed.email && parsed.email !== "") {
+        // if (options.authorizationParams) options.authorizationParams.login_hint = parsed.email.toString(); // prefill email
+        options.authorizationParams!.login_hint = parsed.email.toString(); // prefill email
+      }
+    }
+
+    // setRouteBeforeLogin().finally(() => {
+    //   loginWithRedirect(options);
+    // });
+  }, [location, loginWithRedirect, /*setRouteBeforeLogin*/]);
+
+  return children;
 }