Fixes an issue with the handling of multiple query parameters during token authentication workflows in the front end.

Author: Eshan Patel

gui/src/components/App/App.spec.js

@@ -1,8 +1,9 @@
-// Copyright (c) 2020-2023 The MathWorks, Inc.
+// Copyright 2020-2023 The MathWorks, Inc.
 
 import React from 'react';
 import { render, fireEvent } from '../../test/utils/react-test';
 import App from './index';
+import * as actionCreators from '../../actionCreators';
 
 describe('App Component', () => {
   let initialState;
@@ -249,4 +250,24 @@ describe('App Component', () => {
     // Check if href has been set to loadUrl by the useEffect  
     expect(window.location.href).toBe(url);
   });
-});
+
+  const tokenInQuery = '12345'
+  it.each([
+    [`?mwi_auth_token=${tokenInQuery}&test1=1&test2=2`, tokenInQuery],
+    [`?test1=1&mwi_auth_token=${tokenInQuery}&test2=2`, tokenInQuery],
+    [`?test1=1&test2=2&mwi_auth_token=${tokenInQuery}`, tokenInQuery],
+  ]) 
+    ("should pick the token correctly when the query parameters are '%s'", (queryParams, expectedToken) => {
+    const url = `http://localhost.com:5555`
+    const mockUpdateAuthStatus = jest.spyOn(actionCreators, 'updateAuthStatus');
+    delete window.location;
+    window.location = {
+      origin: '/',
+      href: url,
+      search: queryParams 
+    }; 
+    render(<App />, { initialState: initialState });
+    expect(mockUpdateAuthStatus).toHaveBeenCalledWith(expectedToken);
+    mockUpdateAuthStatus.mockRestore();
+  });
+}); 

gui/src/components/App/index.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2020-2022 The MathWorks, Inc.
+// Copyright 2020-2022 The MathWorks, Inc.
 
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
@@ -62,6 +62,11 @@ function App() {
         return url.split(window.location.origin)[1].split('index.html')[0]
     }, [])
 
+    const parseQueryParams = (url)  => {
+        const queryParams = new URLSearchParams(url.search);
+        return queryParams;
+    }
+
     const toggleOverlayVisible = useCallback(
         () => dispatch(setOverlayVisibility(!overlayVisible)),
         [overlayVisible, dispatch]
@@ -142,18 +147,14 @@ function App() {
     }, [loadUrl]);
 
     useEffect(() => {
-        const url = document.URL;
-      
-        if(url.includes("?mwi_auth_token=")){            
-            var token = url.split("?mwi_auth_token=")[1];      
-
-            if(token){
-                dispatch(updateAuthStatus(token))                
-            }
-            window.history.replaceState(null, '', `${baseUrl}index.html`);
-        } 
-    }
-    , [dispatch, baseUrl]);
+        const queryParams = parseQueryParams(window.location);
+        const token = queryParams.get("mwi_auth_token");      
+
+        if(token){
+            dispatch(updateAuthStatus(token));              
+        }
+        window.history.replaceState(null, '', `${baseUrl}index.html`); 
+    }, [dispatch, baseUrl]);
 
     // Display one of:
     // * Confirmation