refactor: handle url queries null values better

site/src/pages/continue-page.tsx

@@ -8,7 +8,7 @@ import { ReactNode } from "react";
 export const ContinuePage = () => {
   const queryString = window.location.search;
   const params = new URLSearchParams(queryString);
-  const redirectUri = params.get("redirect_uri");
+  const redirectUri = params.get("redirect_uri") ?? "";
 
   const { isLoggedIn, disableContinue } = useUserContext();
 
@@ -16,7 +16,7 @@ export const ContinuePage = () => {
     return <Navigate to={`/login?redirect_uri=${redirectUri}`} />;
   }
 
-  if (redirectUri === "null") {
+  if (redirectUri === "null" || redirectUri === "") {
     return <Navigate to="/" />;
   }
 
@@ -27,15 +27,29 @@ export const ContinuePage = () => {
       color: "blue",
     });
     setTimeout(() => {
-      window.location.href = redirectUri!;
+      window.location.href = redirectUri;
     }, 500);
   };
 
-  const urlParsed = URL.parse(redirectUri!);
+  const urlParsed = URL.parse(redirectUri);
+
+  if (urlParsed === null) {
+    return (
+      <ContinuePageLayout>
+        <Text size="xl" fw={700}>
+          Invalid Redirect
+        </Text>
+        <Text>
+          The redirect URL is invalid, please contact the app owner to fix the
+          issue.
+        </Text>
+      </ContinuePageLayout>
+    );
+  }
 
   if (
     window.location.protocol === "https:" &&
-    urlParsed!.protocol === "http:"
+    urlParsed.protocol === "http:"
   ) {
     return (
       <ContinuePageLayout>
@@ -54,7 +68,7 @@ export const ContinuePage = () => {
   }
 
   if (disableContinue) {
-    window.location.href = redirectUri!;
+    window.location.href = redirectUri;
     return (
       <ContinuePageLayout>
         <Text size="xl" fw={700}>

site/src/pages/login-page.tsx

@@ -24,9 +24,10 @@ import { TailscaleIcon } from "../icons/tailscale";
 export const LoginPage = () => {
   const queryString = window.location.search;
   const params = new URLSearchParams(queryString);
-  const redirectUri = params.get("redirect_uri");
+  const redirectUri = params.get("redirect_uri") ?? "";
 
   const { isLoggedIn, configuredProviders } = useUserContext();
+
   const oauthProviders = configuredProviders.filter(
     (value) => value !== "username",
   );
@@ -69,7 +70,7 @@ export const LoginPage = () => {
         color: "green",
       });
       setTimeout(() => {
-        if (redirectUri === "null") {
+        if (redirectUri === "null" || redirectUri === "") {
           window.location.replace("/");
         } else {
           window.location.replace(`/continue?redirect_uri=${redirectUri}`);

site/src/pages/unauthorized-page.tsx

@@ -5,10 +5,10 @@ import { Navigate } from "react-router";
 export const UnauthorizedPage = () => {
   const queryString = window.location.search;
   const params = new URLSearchParams(queryString);
-  const username = params.get("username");
+  const username = params.get("username") ?? "";
-  const resource = params.get("resource");
+  const resource = params.get("resource") ?? "";
 
-  if (username === "null") {
+  if (username === "null" || username === "") {
     return <Navigate to="/" />;
   }
 
@@ -20,7 +20,7 @@ export const UnauthorizedPage = () => {
         </Text>
         <Text>
           The user with username <Code>{username}</Code> is not authorized to{" "}
-          {resource !== "null" ? (
+          {resource !== "null" && resource !== "" ? (
             <span>
               access the <Code>{resource}</Code> resource.
             </span>