Merge pull request #4402 from mudit06mah/deeplinkRoute

Frontend: Router: Unauthenticated users can now follow deeplinks.

Author: k8s-ci-robot

frontend/src/components/App/RouteSwitcher.tsx

@@ -162,7 +162,7 @@ function AuthRoute(props: AuthRouteProps) {
     computedMatch = {},
     ...other
   } = props;
-  const redirectRoute = getCluster() ? 'login' : 'chooser';
+
   useSidebarItem(sidebar, computedMatch);
   const cluster = useCluster();
   const query = useQuery({
@@ -172,6 +172,24 @@ function AuthRoute(props: AuthRouteProps) {
     retry: 0,
   });
 
+  const clusters = useClustersConf();
+  const currentCluster = getCluster();
+  const clusterConf = currentCluster && clusters ? clusters[currentCluster] : null;
+  const authError = query.error as any;
+  const isExplicitAuthError = [401, 403].includes(authError?.status);
+
+  let redirectRoute: string;
+
+  if (!currentCluster) {
+    redirectRoute = 'chooser';
+  } else if (clusterConf?.auth_type === 'oidc') {
+    redirectRoute = 'login';
+  } else if (query.isError && isExplicitAuthError) {
+    redirectRoute = 'token';
+  } else {
+    redirectRoute = 'login';
+  }
+
   function getRenderer({ location }: RouteProps) {
     if (!requiresAuth) {
       return children;

frontend/src/components/account/Auth.tsx

@@ -25,7 +25,7 @@ import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { generatePath, useHistory } from 'react-router-dom';
+import { generatePath, useHistory, useLocation } from 'react-router-dom';
 import { setToken } from '../../lib/auth';
 import { getCluster, getClusterPrefixedPath } from '../../lib/cluster';
 import { useClustersConf } from '../../lib/k8s';
@@ -37,6 +37,7 @@ import HeadlampLink from '../common/Link';
 
 export default function AuthToken() {
   const history = useHistory();
+  const location = useLocation<{ from?: Location }>();
   const clusterConf = useClustersConf();
   const [token, setToken] = React.useState('');
   const [showError, setShowError] = React.useState(false);
@@ -47,11 +48,15 @@ export default function AuthToken() {
     loginWithToken(token).then(code => {
       // If successful, redirect.
       if (code === 200) {
-        history.replace(
-          generatePath(getClusterPrefixedPath(), {
-            cluster: getCluster() as string,
-          })
-        );
+        if (location.state && location.state.from) {
+          history.replace(location.state.from);
+        } else {
+          history.replace(
+            generatePath(getClusterPrefixedPath(), {
+              cluster: getCluster() as string,
+            })
+          );
+        }
       } else {
         setToken('');
         setShowError(true);