refactor: use window.location.href for redirects

site/src/pages/continue-page.tsx

@@ -1,8 +1,9 @@
-import { Button, Paper, Text } from "@mantine/core";
+import { Button, Code, Paper, Text } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { Navigate } from "react-router";
 import { useUserContext } from "../context/user-context";
 import { Layout } from "../components/layouts/layout";
+import { ReactNode } from "react";
 
 export const ContinuePage = () => {
   const queryString = window.location.search;
@@ -12,11 +13,11 @@ export const ContinuePage = () => {
   const { isLoggedIn, disableContinue } = useUserContext();
 
   if (!isLoggedIn) {
-    return <Navigate to="/login" />;
+    return <Navigate to={`/login?redirect_uri=${redirectUri}`} />;
   }
 
-  if (disableContinue && redirectUri !== "null") {
-    window.location.replace(redirectUri!);
+  if (redirectUri === "null") {
+    return <Navigate to="/" />;
   }
 
   const redirect = () => {
@@ -26,31 +27,62 @@ export const ContinuePage = () => {
       color: "blue",
     });
     setTimeout(() => {
-      window.location.replace(redirectUri!);
+      window.location.href = redirectUri!;
     }, 500);
   };
 
+  const urlParsed = URL.parse(redirectUri!);
+
+  if (
+    window.location.protocol === "https:" &&
+    urlParsed!.protocol === "http:"
+  ) {
+    return (
+      <ContinuePageLayout>
+        <Text size="xl" fw={700}>
+          Insecure Redirect
+        </Text>
+        <Text>
+          Your are logged in but trying to redirect from <Code>https</Code> to{" "}
+          <Code>http</Code>, please click the button to redirect.
+        </Text>
+        <Button fullWidth mt="xl" onClick={redirect}>
+          Continue
+        </Button>
+      </ContinuePageLayout>
+    );
+  }
+
+  if (disableContinue) {
+    window.location.href = redirectUri!;
+    return (
+      <ContinuePageLayout>
+        <Text size="xl" fw={700}>
+          Redirecting
+        </Text>
+        <Text>You should be redirected to your app soon.</Text>
+      </ContinuePageLayout>
+    );
+  }
+
+  return (
+    <ContinuePageLayout>
+      <Text size="xl" fw={700}>
+        Continue
+      </Text>
+      <Text>Click the button to continue to your app.</Text>
+      <Button fullWidth mt="xl" onClick={redirect}>
+        Continue
+      </Button>
+    </ContinuePageLayout>
+  );
+};
+
+export const ContinuePageLayout = ({ children }: { children: ReactNode }) => {
   return (
     <Layout>
       <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
-        {redirectUri !== "null" ? (
-          <>
-            <Text size="xl" fw={700}>
-              Continue
-            </Text>
-            <Text>Click the button to continue to your app.</Text>
-            <Button fullWidth mt="xl" onClick={redirect}>
-              Continue
-            </Button>
-          </>
-        ) : (
-          <>
-            <Text size="xl" fw={700}>
-              Logged in
-            </Text>
-            <Text>You are now signed in and can use your apps.</Text>
-          </>
-        )}
+        {children}
       </Paper>
     </Layout>
   );

site/src/pages/login-page.tsx

@@ -65,8 +65,12 @@ export const LoginPage = () => {
         color: "green",
       });
       setTimeout(() => {
-        window.location.replace(`/continue?redirect_uri=${redirectUri}`);
-      });
+        if (redirectUri === "null") {
+          window.location.replace("/");
+        } else {
+          window.location.replace(`/continue?redirect_uri=${redirectUri}`);
+        }
+      }, 500);
     },
   });
 
@@ -84,7 +88,14 @@ export const LoginPage = () => {
       });
     },
     onSuccess: (data) => {
-      window.location.replace(data.data.url);
+      notifications.show({
+        title: "Redirecting",
+        message: "Redirecting to your OAuth provider",
+        color: "blue",
+      });
+      setTimeout(() => {
+        window.location.href = data.data.url;
+      }, 500);
     },
   });
 

site/src/pages/logout-page.tsx

@@ -32,7 +32,7 @@ export const LogoutPage = () => {
         color: "green",
       });
       setTimeout(() => {
-        window.location.reload();
+        window.location.replace("/login");
       }, 500);
     },
   });