Switch from react-auth0-components to auth0/auth0-react (#3425)

The former has been unmaintained for 5 years. I was looking at why the
login button wasn't working on first load and fell into a rabbit hole...

Regarding the update, this is fairly "straightforward". We now use the
context provided with the auth0-react library instead of reinventing the
wheel and having our own. The auth0 library also sets up its own
callback things so we don't need to set that up manually anymore either.

The main pain point was figuring out how to know within the axios
interceptors whether we were logged in or not as calling
`getAccessTokenSilently` will try to log you in if you're not (do not
ask me why... I already didn't have hair anymore before but it's way
worse now). Turned out that we could use `getIdTokenClaims` for this. I
would've loved to set/unset the interceptor based on the `isAuthenticated`
boolean we can get from auth0 but the interceptor also sets the base URL
so we can't do that or it breaks the heartbeat request.

Author: Eijebong

ui/package.json

@@ -17,6 +17,7 @@
   "comment2": "IMPORTANT! react-virtualized is held at 9.21.1 due to https://github.com/bvaughn/react-virtualized/issues/1226 breaking scrolling to anchors on ListRules",
   "comment3": "see also https://github.com/bvaughn/react-virtualized/issues/1179#issuecomment-572854217",
   "dependencies": {
+    "@auth0/auth0-react": "^2.3.0",
     "@date-io/date-fns": "^1.3.13",
     "@hot-loader/react-dom": "^16.4.0",
     "@material-ui/core": "^4.11.2",
@@ -40,7 +41,6 @@
     "qs": "^6.10.1",
     "ramda": "^0.27.1",
     "react": "^16.13.1",
-    "react-auth0-components": "^1.0.4",
     "react-codemirror2": "^7.2.1",
     "react-diff-view": "^2.4.7",
     "react-dom": "^16.13.1",

ui/src/App.jsx

@@ -1,119 +1,34 @@
 import { hot } from 'react-hot-loader/root';
-import React, { Fragment, useEffect, useState } from 'react';
-import { Authorize } from 'react-auth0-components';
+import React, { Fragment } from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/styles';
-import axios from 'axios';
-import { AuthContext } from './utils/AuthContext';
-import { BASE_URL, USER_SESSION } from './utils/constants';
+import { Auth0Provider } from '@auth0/auth0-react';
 import theme from './theme';
 import Main from './Main';
 
-axios.interceptors.request.use(config => {
-  const result = config;
-
-  if (!config.url.startsWith('http')) {
-    let accessToken = null;
-
-    result.baseURL = BASE_URL;
-
-    try {
-      ({ accessToken } = JSON.parse(
-        localStorage.getItem(USER_SESSION)
-      ).authResult);
-    } catch {
-      accessToken = null;
-    }
-
-    if (accessToken) {
-      result.headers.Authorization = `Bearer ${accessToken}`;
-    }
-  }
-
-  return result;
-});
-axios.interceptors.response.use(
-  response => response,
-  error => {
-    const errorMsg = error.response
-      ? error.response.data.exception || error.response.data.detail || null
-      : error.message;
-
-    // If we found a more detailed error message
-    // raise an Error with that instead.
-    if (errorMsg !== null) {
-      throw new Error(errorMsg);
-    }
-
-    throw error;
-  }
-);
-
 const App = () => {
-  const userSession = localStorage.getItem(USER_SESSION);
-  const [authorize, setAuthorize] = useState(Boolean(userSession));
-  const [authContext, setAuthContext] = useState({
-    authorize: () => setAuthorize(true),
-    unauthorize: () => {
-      setAuthorize(false);
-      setAuthContext({
-        ...authContext,
-        user: null,
-      });
-    },
-    user: null,
-  });
-  // Wait until authorization is done before rendering
-  // to make sure users who are logged in are able to access protected views
-  const [ready, setReady] = useState(false);
-
-  // When the user is not logged in, handleAuthorize and handleError will never
-  // be triggered since the `authorize` prop is set to `false`.
-  useEffect(() => {
-    if (!userSession) {
-      setReady(true);
-    }
-  }, [userSession]);
-
-  const handleAuthorize = user => {
-    setAuthContext({
-      ...authContext,
-      user,
-    });
-    setReady(true);
-  };
-
-  const handleError = () => {
-    setAuthContext({
-      ...authContext,
-      user: null,
-    });
-    setReady(true);
-  };
-
-  const render = () => <Main />;
-
   return (
     <Fragment>
       <CssBaseline />
-      <AuthContext.Provider value={authContext}>
+      <Auth0Provider
+        domain={process.env.AUTH0_DOMAIN}
+        clientId={process.env.AUTH0_CLIENT_ID}
+        redirectUri={process.env.AUTH0_REDIRECT_URI}
+        audience={process.env.AUTH0_AUDIENCE}
+        scope={process.env.AUTH0_SCOPE}
+        authorizationParams={{
+          audience: process.env.AUTH0_AUDIENCE,
+          scope: process.env.AUTH0_SCOPE,
+        }}
+        leeway={30}
+        useRefreshTokens
+        useRefreshTokensFallback
+        cacheLocation="localstorage"
+        responseType={process.env.AUTH0_RESPONSE_TYPE}>
         <ThemeProvider theme={theme}>
-          <Authorize
-            authorize={authorize}
-            onAuthorize={handleAuthorize}
-            onError={handleError}
-            popup
-            domain={process.env.AUTH0_DOMAIN}
-            clientID={process.env.AUTH0_CLIENT_ID}
-            audience={process.env.AUTH0_AUDIENCE}
-            redirectUri={process.env.AUTH0_REDIRECT_URI}
-            responseType={process.env.AUTH0_RESPONSE_TYPE}
-            scope={process.env.AUTH0_SCOPE}
-            render={ready ? render : null}
-            leeway={30}
-          />
+          <Main />
         </ThemeProvider>
-      </AuthContext.Provider>
+      </Auth0Provider>
     </Fragment>
   );
 };

ui/src/Main.jsx

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { BrowserRouter, Switch } from 'react-router-dom';
 import { makeStyles } from '@material-ui/styles';
 import axios from 'axios';
+import { useAuth0 } from '@auth0/auth0-react';
+import { BASE_URL } from './utils/constants';
 import Dashboard from './components/Dashboard';
 import ErrorPanel from './components/ErrorPanel';
 import RouteWithProps from './components/RouteWithProps';
@@ -31,7 +33,57 @@ const useStyles = makeStyles({
   },
 });
 
+function setupAxiosInterceptors(getAccessTokenSilently, getIdTokenClaims) {
+  axios.interceptors.request.use(async config => {
+    const result = config;
+
+    if (!config.url.startsWith('http')) {
+      result.baseURL = BASE_URL;
+
+      const claims = await getIdTokenClaims();
+
+      if (claims) {
+        const accessToken = await getAccessTokenSilently();
+
+        result.headers.Authorization = `Bearer ${accessToken}`;
+      }
+    }
+
+    return result;
+  });
+
+  axios.interceptors.response.use(
+    response => response,
+    error => {
+      const errorMsg = error.response
+        ? error.response.data.exception || error.response.data.detail || null
+        : error.message;
+
+      // If we found a more detailed error message
+      // raise an Error with that instead.
+      if (errorMsg !== null) {
+        throw new Error(errorMsg);
+      }
+
+      throw error;
+    }
+  );
+}
+
 function Main() {
+  const { isLoading, getAccessTokenSilently, getIdTokenClaims } = useAuth0();
+  const [isReady, setReady] = useState(false);
+
+  useEffect(() => {
+    setupAxiosInterceptors(getAccessTokenSilently, getIdTokenClaims);
+  }, [getAccessTokenSilently, isLoading]);
+
+  useEffect(() => {
+    if (!isReady && !isLoading) {
+      setReady(true);
+    }
+  }, [isLoading]);
+
   useStyles();
   const [backendError, setBackendError] = useState('');
 
@@ -46,6 +98,10 @@ function Main() {
     );
   }, []);
 
+  if (!isReady) {
+    return <div>Loading...</div>;
+  }
+
   return backendError ? (
     <BrowserRouter>
       <Dashboard title="Error" disabled>

ui/src/components/Dashboard/SettingsMenu.jsx

@@ -1,11 +1,11 @@
+import { withAuth0 } from '@auth0/auth0-react';
 import React, { useState, Fragment } from 'react';
 import { makeStyles } from '@material-ui/styles';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import IconButton from '@material-ui/core/IconButton';
 import SettingsOutlineIcon from 'mdi-react/SettingsOutlineIcon';
 import Link from '../../utils/Link';
-import { withUser } from '../../utils/AuthContext';
 import menuItems from './menuItems';
 
 const useStyles = makeStyles(theme => ({
@@ -26,7 +26,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function SettingsMenu({ user, disabled }) {
+function SettingsMenu({ auth0, disabled }) {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState(null);
   const handleMenuOpen = e => setAnchorEl(e.currentTarget);
@@ -35,7 +35,7 @@ function SettingsMenu({ user, disabled }) {
   return (
     <Fragment>
       <IconButton
-        disabled={!user || disabled}
+        disabled={!auth0.user || disabled}
         className={classes.settings}
         aria-haspopup="true"
         aria-controls="user-menu"
@@ -44,7 +44,7 @@ function SettingsMenu({ user, disabled }) {
         <SettingsOutlineIcon
           size={24}
           className={
-            user && !disabled
+            auth0.user && !disabled
               ? classes.settingsIcon
               : classes.settingsIconDisabled
           }
@@ -75,4 +75,4 @@ function SettingsMenu({ user, disabled }) {
   );
 }
 
-export default withUser(SettingsMenu);
+export default withAuth0(SettingsMenu);

ui/src/components/Dashboard/UserMenu.jsx

@@ -1,3 +1,4 @@
+import { withAuth0 } from '@auth0/auth0-react';
 import React, { useState, Fragment } from 'react';
 import { makeStyles } from '@material-ui/styles';
 import Avatar from '@material-ui/core/Avatar';
@@ -8,8 +9,6 @@ import LogoutVariantIcon from 'mdi-react/LogoutVariantIcon';
 import ContentCopyIcon from 'mdi-react/ContentCopyIcon';
 import copy from 'clipboard-copy';
 import Button from '../Button';
-import { USER_SESSION } from '../../utils/constants';
-import { withUser } from '../../utils/AuthContext';
 
 const useStyles = makeStyles(theme => ({
   avatar: {
@@ -20,43 +19,45 @@ const useStyles = makeStyles(theme => ({
 }));
 
 function UserMenu(props) {
-  const { user, onAuthorize, onUnauthorize } = props;
+  const { auth0 } = props;
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState(null);
   const handleMenuOpen = e => setAnchorEl(e.currentTarget);
   const handleMenuClose = () => setAnchorEl(null);
   const handleLogoutClick = () => {
     handleMenuClose();
-    onUnauthorize();
+    auth0.logout({
+      openUrl: false,
+    });
   };
 
-  const handleCopyAccessToken = () => {
-    const { accessToken } = JSON.parse(
-      localStorage.getItem(USER_SESSION)
-    ).authResult;
+  const handleCopyAccessToken = async () => {
+    const accessToken = await auth0.getAccessTokenSilently();
 
     copy(accessToken);
     handleMenuClose();
   };
 
+  const handleLogin = auth0.loginWithPopup;
+
   return (
     <Fragment>
-      {user ? (
+      {auth0.user ? (
         <IconButton
           className={classes.avatar}
           aria-haspopup="true"
           aria-controls="user-menu"
           aria-label="user menu"
           onClick={handleMenuOpen}>
-          {user.picture ? (
-            <Avatar alt={user.nickname} src={user.picture} />
+          {auth0.user.picture ? (
+            <Avatar alt={auth0.user.nickname} src={auth0.user.picture} />
           ) : (
-            <Avatar alt={user.name}>{user.name[0]}</Avatar>
+            <Avatar alt={auth0.user.name}>{auth0.user.name[0]}</Avatar>
           )}
         </IconButton>
       ) : (
         <Button
-          onClick={onAuthorize}
+          onClick={handleLogin}
           size="small"
           variant="contained"
           color="secondary">
@@ -83,4 +84,4 @@ function UserMenu(props) {
   );
 }
 
-export default withUser(UserMenu);
+export default withAuth0(UserMenu);