fix: handle invalid url in oauth modal

Author: ZxBing0066

packages/insomnia/src/main/mcp/transport-streamable-http.ts

@@ -283,10 +283,6 @@ const wrappedFetch = async (
           fetchFn: authFetchFn,
         });
       }
-      // Close the oauth authorization modal after authorization is complete
-      BrowserWindow.getAllWindows().forEach(window => {
-        window.webContents.send('hide-oauth-authorization-modal');
-      });
       if (authResult !== 'AUTHORIZED') {
         throw new UnauthorizedError();
       }
@@ -295,6 +291,10 @@ const wrappedFetch = async (
       // Wrap and throw MCPAuthError for better identification, some of the errors thrown by sdk are generic Error which is hard to identify
       throw new MCPAuthError(e.message || 'Authentication failed', { cause: e });
     } finally {
+      // Close the oauth authorization modal after authorization is complete
+      BrowserWindow.getAllWindows().forEach(window => {
+        window.webContents.send('hide-oauth-authorization-modal');
+      });
       unsubscribe();
     }
     return await wrappedFetch(url, init, options, calledByAuth);

packages/insomnia/src/ui/components/modals/oauth-authorization-status-modal.tsx

@@ -15,6 +15,7 @@ export const OAuthAuthorizationStatusModal: FC = () => {
   const [authCodeUrlStr, setAuthCodeUrlStr] = useState<string | undefined>();
   const [submitting, setSubmitting] = useState<boolean>(false);
   const { submit: redirectToDefaultBrowserSubmit } = useDefaultBrowserRedirectActionFetcher();
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const unsubscribe = window.main.on('show-oauth-authorization-modal', (_, authCodeUrlStr: string) => {
@@ -65,6 +66,7 @@ export const OAuthAuthorizationStatusModal: FC = () => {
     } else if (status === 'getting_code') {
       modalRef.current?.show();
       setSubmitting(false);
+      setError(null);
     }
   }, [status]);
 
@@ -84,7 +86,7 @@ export const OAuthAuthorizationStatusModal: FC = () => {
         {status === 'getting_code' && (
           <>
             <p className="text-[rgba(var(--color-font-rgb),0.8))] text-start">
-              See your browser to finish authorization, if the browser didn’t open automatically, copy and paste this
+              See your browser to finish authorization, if the browser didn't open automatically, copy and paste this
               URL into your browser to authorize.
             </p>
             <div className="form-control form-control--outlined no-pad-top flex">
@@ -110,29 +112,36 @@ export const OAuthAuthorizationStatusModal: FC = () => {
             </p>
             <form
               onSubmit={e => {
-                e.preventDefault();
-                const form = e.currentTarget;
-                const data = new FormData(form);
+                try {
+                  e.preventDefault();
+                  const form = e.currentTarget;
+                  const data = new FormData(form);
 
-                const url = data.get('url');
-                invariant(typeof url === 'string', 'Expected code to be a string');
-                if (url.length === 0) {
-                  return;
-                }
-                setSubmitting(true);
-                const parsedUrl = new URL(url);
-                const params = Object.fromEntries(parsedUrl.searchParams);
-                const { encryptedUrl: encryptedRedirectUrl, encryptedKey, iv } = params;
-                if (encryptedRedirectUrl && encryptedKey && iv) {
+                  const url = data.get('url');
+                  invariant(typeof url === 'string', 'Expected code to be a string');
+                  if (url.length === 0) {
+                    return;
+                  }
+                  setError(null);
+                  setSubmitting(true);
+                  const parsedUrl = new URL(url);
+                  const params = Object.fromEntries(parsedUrl.searchParams);
+                  const { encryptedUrl: encryptedRedirectUrl, encryptedKey, iv } = params;
+                  if (encryptedRedirectUrl && encryptedKey && iv) {
+                    return redirectToDefaultBrowserSubmit({
+                      encryptedRedirectUrl,
+                      encryptedKey,
+                      iv,
+                    });
+                  }
                   return redirectToDefaultBrowserSubmit({
-                    encryptedRedirectUrl,
-                    encryptedKey,
-                    iv,
+                    redirectUrl: url,
                   });
+                } catch (error) {
+                  setError(error instanceof Error ? error.message : String(error));
+                  setSubmitting(false);
+                  return;
                 }
-                return redirectToDefaultBrowserSubmit({
-                  redirectUrl: url,
-                });
               }}
             >
               <div className="form-control form-control--outlined no-pad-top" style={{ display: 'flex' }}>
@@ -151,6 +160,7 @@ export const OAuthAuthorizationStatusModal: FC = () => {
                   Proceed
                 </button>
               </div>
+              {error && <p className="text-danger">Error: {error}</p>}
             </form>
           </>
         )}