Update auth to use keycloak

Author: danielfdsilva

package-lock.json

@@ -10,9 +10,10 @@ APP_DESCRIPTION=Plugin based STAC editor
 REACT_APP_STAC_BROWSER=
 REACT_APP_STAC_API=
 
-# Auth variables
-REACT_APP_AUTH0_DOMAIN=
-REACT_APP_AUTH0_CLIENT_ID=
+## Keycloak auth variables
+REACT_APP_KEYCLOAK_URL=
+REACT_APP_KEYCLOAK_CLIENT_ID=
+REACT_APP_KEYCLOAK_REALM=
 
 ## Theming
 # REACT_APP_THEME_PRIMARY_COLOR='#6A5ACD'

packages/client/.env

@@ -21,6 +21,11 @@ PUBLIC_URL
 REACT_APP_STAC_BROWSER
 REACT_APP_STAC_API
 
+# Auth
+REACT_APP_KEYCLOAK_URL
+REACT_APP_KEYCLOAK_CLIENT_ID
+REACT_APP_KEYCLOAK_REALM
+
 # Theming
 REACT_APP_THEME_PRIMARY_COLOR
 REACT_APP_THEME_SECONDARY_COLOR
@@ -31,7 +36,5 @@ You must provide a value for the `REACT_APP_STAC_API` environment variable. This
 If the `REACT_APP_STAC_BROWSER` environment variable is not set, [Radiant Earth's STAC Browser](https://radiantearth.github.io/stac-browser/) will be used by default, which will connect to the STAC API specified in `REACT_APP_STAC_API`.
 
 **Auth**  
-The client uses Auth0 for authentication, which is disabled by default. To
-enable it you must provide values for the `REACT_APP_AUTH0_DOMAIN` and
-`REACT_APP_AUTH0_CLIENT_ID` environment variables. These can be obtained by
-creating an Auth0 account and setting up a new application.
+The client uses Keycloack for authentication, which is disabled by default. To
+enable it you must provide values for the `REACT_APP_KEYCLOAK_*` environment variables. These can be obtained through the Keycloak server.

packages/client/README.md

@@ -50,7 +50,6 @@
     "watcher": "^2.3.1"
   },
   "dependencies": {
-    "@auth0/auth0-react": "^2.3.0",
     "@chakra-ui/react": "^2.8.2",
     "@developmentseed/stac-react": "^0.1.0-alpha.10",
     "@devseed-ui/collecticons-chakra": "^3.0.3",
@@ -70,11 +69,13 @@
     "@turf/bbox": "^7.1.0",
     "@turf/bbox-polygon": "^7.1.0",
     "@types/jest": "^29.5.14",
+    "@types/keycloak-js": "^2.5.4",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "formik": "^2.4.6",
     "framer-motion": "^10.16.5",
+    "keycloak-js": "^26.1.4",
     "mapbox-gl-draw-rectangle-mode": "^1.0.4",
     "maplibre-gl": "^3.6.2",
     "polished": "^4.3.1",

packages/client/package.json

@@ -14,7 +14,6 @@ import { Route, Routes } from 'react-router-dom';
 import { CollecticonCog } from '@devseed-ui/collecticons-chakra';
 
 import { RequireAuth } from '$components/auth/RequireAuth';
-import { useAuth0IfEnabled } from '$components/auth/authIfEnabled';
 import MainNavigation from '$components/MainNavigation';
 import Home from '$pages/Home';
 import CollectionList from '$pages/CollectionList';
@@ -24,6 +23,8 @@ import NotFound from '$pages/NotFound';
 import CollectionDetail from '$pages/CollectionDetail';
 import Sandbox from '$pages/Sandbox';
 
+import { useKeycloak } from './auth/Context';
+
 const rotate = keyframes`
   from {
     transform: rotate(0deg);
@@ -43,7 +44,9 @@ const rotate2 = keyframes`
 `;
 
 export function App() {
-  const { isLoading } = useAuth0IfEnabled();
+  const { initStatus } = useKeycloak();
+
+  const isLoading = initStatus === 'loading';
 
   return (
     <>

packages/client/src/App.tsx

@@ -0,0 +1,118 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import Keycloak, { KeycloakInstance } from 'keycloak-js';
+
+const url = process.env.REACT_APP_KEYCLOAK_URL;
+const realm = process.env.REACT_APP_KEYCLOAK_REALM;
+const clientId = process.env.REACT_APP_KEYCLOAK_CLIENT_ID;
+
+const isAuthEnabled = !!(url && realm && clientId);
+
+const keycloak: KeycloakInstance | undefined = isAuthEnabled
+  ? new (Keycloak as any)({
+      url,
+      realm,
+      clientId
+    })
+  : undefined;
+
+export type KeycloakContextProps = {
+  initStatus: 'loading' | 'success' | 'error';
+  isLoading: boolean;
+  profile?: Keycloak.KeycloakProfile;
+} & (
+  | {
+      keycloak: KeycloakInstance;
+      isEnabled: true;
+    }
+  | {
+      keycloak: undefined;
+      isEnabled: false;
+    }
+);
+
+const KeycloakContext = createContext<KeycloakContextProps>({
+  initStatus: 'loading',
+  isEnabled: isAuthEnabled
+} as KeycloakContextProps);
+
+export const KeycloakProvider = (props: { children: React.ReactNode }) => {
+  const [initStatus, setInitStatus] =
+    useState<KeycloakContextProps['initStatus']>('loading');
+  const [profile, setProfile] = useState<
+    Keycloak.KeycloakProfile | undefined
+  >();
+
+  const wasInit = useRef(false);
+
+  useEffect(() => {
+    async function initialize() {
+      if (!keycloak) return;
+      // Keycloak can only be initialized once. This is a workaround to avoid
+      // multiple initialization attempts, specially by React double rendering.
+      if (wasInit.current) return;
+      wasInit.current = true;
+
+      try {
+        await keycloak.init({
+          // onLoad: 'login-required',
+          onLoad: 'check-sso',
+          checkLoginIframe: false
+        });
+        if (keycloak.authenticated) {
+          const profile =
+            await (keycloak.loadUserProfile() as unknown as Promise<Keycloak.KeycloakProfile>);
+          setProfile(profile);
+        }
+
+        setInitStatus('success');
+      } catch (err) {
+        setInitStatus('error');
+        // eslint-disable-next-line no-console
+        console.error('Failed to initialize keycloak adapter:', err);
+      }
+    }
+    initialize();
+  }, []);
+
+  const base = {
+    initStatus,
+    isLoading: isAuthEnabled && initStatus === 'loading',
+    profile
+  };
+
+  return (
+    <KeycloakContext.Provider
+      value={
+        isAuthEnabled
+          ? {
+              ...base,
+              keycloak: keycloak!,
+              isEnabled: true
+            }
+          : {
+              ...base,
+              keycloak: undefined,
+              isEnabled: false
+            }
+      }
+    >
+      {props.children}
+    </KeycloakContext.Provider>
+  );
+};
+
+export const useKeycloak = () => {
+  const ctx = useContext(KeycloakContext);
+
+  if (!ctx) {
+    throw new Error('useKeycloak must be used within a KeycloakProvider');
+  }
+
+  return ctx;
+};

packages/client/src/auth/Context.tsx

@@ -1,13 +1,20 @@
 import React from 'react';
-import { List, ListItem, Button, ButtonProps, Flex } from '@chakra-ui/react';
+import {
+  List,
+  ListItem,
+  Button,
+  ButtonProps,
+  Flex,
+  Divider
+} from '@chakra-ui/react';
 import {
   CollecticonFolder,
   CollecticonPlusSmall
 } from '@devseed-ui/collecticons-chakra';
 
 import SmartLink, { SmartLinkProps } from './SmartLink';
 import { UserInfo } from './auth/UserInfo';
-import { useAuth0 } from '@auth0/auth0-react';
+import { useKeycloak } from 'src/auth/Context';
 
 function NavItem(props: ButtonProps & SmartLinkProps) {
   return (
@@ -27,20 +34,26 @@ function NavItem(props: ButtonProps & SmartLinkProps) {
 }
 
 function MainNavigation() {
-  const { isAuthenticated } = useAuth0();
+  const { keycloak } = useKeycloak();
 
   return (
-    <Flex as='nav' aria-label='Main' gap={8}>
+    <Flex as='nav' aria-label='Main' gap={4} alignItems='center'>
       <List display='flex' gap={2}>
         <NavItem to='/collections/' leftIcon={<CollecticonFolder />}>
           Browse
         </NavItem>
-        {isAuthenticated && (
+        {keycloak?.authenticated && (
           <NavItem to='/collections/new' leftIcon={<CollecticonPlusSmall />}>
             Create
           </NavItem>
         )}
       </List>
+      <Divider
+        orientation='vertical'
+        borderLeftWidth='2px'
+        borderColor='base.200'
+        h='1rem'
+      />
       <UserInfo />
     </Flex>
   );

packages/client/src/components/MainNavigation.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
 import { Button, ButtonProps, forwardRef } from '@chakra-ui/react';
 import SmartLink, { SmartLinkProps } from '../SmartLink';
-import { useAuth0IfEnabled } from './authIfEnabled';
+import { useKeycloak } from 'src/auth/Context';
 
 export const ButtonWithAuth = forwardRef<
   SmartLinkProps & ButtonProps,
   typeof Button
 >((props, ref) => {
-  const auth = useAuth0IfEnabled();
+  const { isEnabled, keycloak } = useKeycloak();
 
-  if (!auth.isEnabled) {
+  if (!isEnabled) {
     return <Button ref={ref} as={SmartLink} {...props} />;
   }
 
-  return auth.isAuthenticated && <Button ref={ref} as={SmartLink} {...props} />;
+  return (
+    keycloak.authenticated && <Button ref={ref} as={SmartLink} {...props} />
+  );
 });