Merge pull request #2207 from bakdata/feature/fix-initial-auth-token-…

…setting Set initial token already in AuthTokenProvider
ingef · Nov 15, 2021 · 6ee0b73 · 6ee0b73
2 parents df6c43d + 9b2d219
commit 6ee0b73
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 40 deletions.
diff --git a/frontend/src/js/app/AppRouter.tsx b/frontend/src/js/app/AppRouter.tsx
@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 import {
@@ -16,28 +17,34 @@ interface PropsT {
   rightTabs: TabT[];
 }
 
-const AppRouter = (props: PropsT) => {
+const ContextProviders: FC = ({ children }) => {
   const authTokenContextValue = useAuthTokenContextValue();
 
   return (
     <AuthTokenContextProvider value={authTokenContextValue}>
-      <KeycloakProvider>
-        <Router basename={basename}>
-          <Switch>
-            <Route path="/login" component={LoginPage} />
-            <Route
-              path="/*"
-              render={(routeProps) => (
-                <WithAuthToken {...routeProps}>
-                  <App {...props} />
-                </WithAuthToken>
-              )}
-            />
-          </Switch>
-        </Router>
-      </KeycloakProvider>
+      <KeycloakProvider>{children}</KeycloakProvider>
     </AuthTokenContextProvider>
   );
 };
 
+const AppRouter = (props: PropsT) => {
+  return (
+    <Router basename={basename}>
+      <ContextProviders>
+        <Switch>
+          <Route path="/login" component={LoginPage} />
+          <Route
+            path="/*"
+            render={(routeProps) => (
+              <WithAuthToken {...routeProps}>
+                <App {...props} />
+              </WithAuthToken>
+            )}
+          />
+        </Switch>
+      </ContextProviders>
+    </Router>
+  );
+};
+
 export default AppRouter;
diff --git a/frontend/src/js/authorization/AuthTokenProvider.tsx b/frontend/src/js/authorization/AuthTokenProvider.tsx
@@ -1,4 +1,6 @@
+import type { Location } from "history";
 import { createContext, useCallback, useState } from "react";
+import { useLocation } from "react-router";
 
 import { isIDPEnabled } from "../environment";
 
@@ -14,9 +16,27 @@ export const AuthTokenContext = createContext<AuthTokenContextValue>({
   setAuthToken: () => null,
 });
 
+const getInitialAuthToken = (location: Location): string => {
+  if (isIDPEnabled) {
+    return "";
+  }
+
+  // Store the token from the URL if it is present.
+  const { search } = location;
+  const params = new URLSearchParams(search);
+  const accessToken = params.get("access_token");
+  if (accessToken) {
+    storeAuthToken(accessToken);
+  }
+
+  return getStoredAuthToken() || "";
+};
+
 export const useAuthTokenContextValue = (): AuthTokenContextValue => {
+  const location = useLocation();
+
   const [authToken, internalSetAuthToken] = useState<string>(
-    isIDPEnabled ? "" : getStoredAuthToken() || "",
+    getInitialAuthToken(location),
   );
 
   const setAuthToken = useCallback((token: string) => {

diff --git a/frontend/src/js/authorization/WithAuthToken.tsx b/frontend/src/js/authorization/WithAuthToken.tsx
@@ -5,37 +5,20 @@ import { useHistory } from "react-router-dom";
 import { isLoginDisabled, isIDPEnabled } from "../environment";
 
 import { AuthTokenContext } from "./AuthTokenProvider";
-import { getStoredAuthToken } from "./helper";
 
-interface PropsT {
-  location: {
-    search: Object;
-  };
-}
-
-const WithAuthToken: FC<PropsT> = ({ location, children }) => {
-  const history = useHistory();
+const WithAuthToken: FC = ({ children }) => {
   const { initialized } = useKeycloak();
-  const { authToken, setAuthToken } = useContext(AuthTokenContext);
+  const history = useHistory();
+  const { authToken } = useContext(AuthTokenContext);
   const goToLogin = () => history.push("/login");
 
-  const { search } = location;
-  const params = new URLSearchParams(search);
-  const accessToken = params.get("access_token");
-
-  if (accessToken) setAuthToken(accessToken);
-
   if (isIDPEnabled && (!initialized || !authToken)) {
     return null;
   }
 
-  if (!isIDPEnabled && !isLoginDisabled) {
-    const authToken = getStoredAuthToken();
-
-    if (!authToken) {
-      goToLogin();
-      return null;
-    }
+  if (!isIDPEnabled && !isLoginDisabled && !authToken) {
+    goToLogin();
+    return null;
   }
 
   return <>{children}</>;