Update npm Packages

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-22.04
     strategy:
       matrix:
-        node: [16]
+        node: [18]
     steps:
       - uses: actions/checkout@v3
 
@@ -30,9 +30,6 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
-      - name: Check yarn lockfile
-        run: |
-          yarn dedupe --check
       - name: Install dependencies
         run: |
           yarn install --immutable

.lintstagedrc.mjs

@@ -11,7 +11,7 @@ export default {
   "*.{m,c,}{j,t}s?(x)": async (files) => {
     const filtered = await asyncFilter(
       files,
-      async (file) => !(await eslint.isPathIgnored(file))
+      async (file) => !(await eslint.isPathIgnored(file)),
     )
     if (filtered.length === 0) {
       return []
@@ -20,5 +20,4 @@ export default {
   },
   "*.ts?(x)": () => "yarn tsc --noEmit",
   "*.({j,t}s?(x)|md?(x)|json|y?(a)ml)": "yarn prettier --write",
-  "yarn.lock": () => "yarn dedupe",
 }

.yarn/sdks/eslint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint",
-  "version": "8.24.0-sdk",
+  "version": "8.50.0-sdk",
   "main": "./lib/api.js",
   "type": "commonjs"
 }

.yarn/sdks/prettier/index.js

@@ -11,10 +11,10 @@ const absRequire = createRequire(absPnpApiPath);
 
 if (existsSync(absPnpApiPath)) {
   if (!process.versions.pnp) {
-    // Setup the environment to be able to require prettier/index.js
+    // Setup the environment to be able to require prettier
     require(absPnpApiPath).setup();
   }
 }
 
-// Defer to the real prettier/index.js your application uses
-module.exports = absRequire(`prettier/index.js`);
+// Defer to the real prettier your application uses
+module.exports = absRequire(`prettier`);

.yarn/sdks/prettier/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prettier",
-  "version": "2.7.1-sdk",
+  "version": "3.0.3-sdk",
   "main": "./index.js",
   "type": "commonjs"
 }

.yarn/sdks/typescript/lib/tsserver.js

@@ -109,6 +109,8 @@ const moduleWrapper = tsserver => {
             str = `zip:${str}`;
           } break;
         }
+      } else {
+        str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`);
       }
     }
 

.yarn/sdks/typescript/lib/tsserverlibrary.js

@@ -109,6 +109,8 @@ const moduleWrapper = tsserver => {
             str = `zip:${str}`;
           } break;
         }
+      } else {
+        str = str.replace(/^\/?/, process.platform === `win32` ? `` : `/`);
       }
     }
 

.yarn/sdks/typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript",
-  "version": "4.8.3-sdk",
+  "version": "5.2.2-sdk",
   "main": "./lib/typescript.js",
   "type": "commonjs"
 }

.yarnrc.yml

@@ -3,11 +3,3 @@ packageExtensions:
   gatsby@*:
     dependencies:
       "@types/reach__router": "^1.3.10"
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: "@yarnpkg/plugin-typescript"
-
-yarnPath: .yarn/releases/yarn-3.2.4.cjs

Dockerfile

@@ -1,5 +1,5 @@
 # Build stage
-FROM node:16 AS build
+FROM node:18 AS build
 WORKDIR /build
 COPY package.json yarn.lock .yarnrc.yml ./
 COPY .yarn .yarn

README.md

@@ -6,7 +6,7 @@ A new website for the OCF. Written in React with [Gatsby](https://www.gatsbyjs.c
 
 ### Dependencies
 
-- Node.js 16+ (https://nodejs.org/en/)
+- Node.js 18+ (https://nodejs.org/en/)
 - If using an Apple Silicon Mac (M1, M2, etc.), `vips` is required (can be installed through [Homebrew](https://brew.sh/) `brew install libvips`)
 - If using Windows, WSL is required (https://learn.microsoft.com/en-us/windows/wsl/install)
 

gatsby-browser.tsx

@@ -1,6 +1,6 @@
 import { type GatsbyBrowser } from "gatsby"
-import { ReactKeycloakProvider } from "@react-keycloak/web"
-import keycloak from "~/utils/keycloak"
+import { AuthProvider } from "react-oidc-context"
+import keycloakConfig from "~/utils/keycloak"
 import { SWRConfig, SWRConfiguration } from "swr"
 import "~/styles/inter.css"
 
@@ -17,19 +17,14 @@ export const wrapRootElement: GatsbyBrowser["wrapRootElement"] = ({
     refreshInterval: 15 * 1000, // 15 seconds
   }
 
+  const config = {
+    ...keycloakConfig,
+    redirect_uri: window.location.origin,
+  } as typeof keycloakConfig
+
   return (
     <SWRConfig value={options}>
-      <ReactKeycloakProvider
-        authClient={keycloak}
-        initOptions={{
-          promiseType: "native",
-          onLoad: "check-sso",
-          silentCheckSsoRedirectUri:
-            window.location.origin + "/silent-check-sso.html",
-        }}
-      >
-        {element}
-      </ReactKeycloakProvider>
+      <AuthProvider {...config}>{element}</AuthProvider>
     </SWRConfig>
   )
 }

gatsby-config.ts

@@ -35,7 +35,7 @@ const config: GatsbyConfig = {
           "^/api": "",
         },
         changeOrigin: true,
-      })
+      }),
     )
   },
 }

gatsby-node.ts

@@ -9,6 +9,19 @@ export const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = ({
       alias: {
         "~": path.resolve(__dirname, "/src"),
       },
+      fallback: {
+        assert: false,
+        crypto: false,
+        http: false,
+        https: false,
+        os: false,
+        path: false,
+        querystring: false,
+        stream: false,
+        url: false,
+        util: false,
+        zlib: false,
+      },
     },
   })
 }

gatsby-ssr.tsx

@@ -1,11 +1,7 @@
 import type { GatsbyBrowser } from "gatsby"
-import { ReactKeycloakProvider } from "@react-keycloak/web"
+import { AuthProvider } from "react-oidc-context"
+import keycloakConfig from "~/utils/keycloak"
 
 export const wrapRootElement: GatsbyBrowser["wrapRootElement"] = ({
   element,
-}) => {
-  return (
-    // @ts-expect-error gatsby needs this https://github.com/react-keycloak/react-keycloak/issues/133
-    <ReactKeycloakProvider authClient={{}}>{element}</ReactKeycloakProvider>
-  )
-}
+}) => <AuthProvider {...keycloakConfig}>{element}</AuthProvider>

package.json

@@ -20,43 +20,47 @@
     "updateapi": "openapi-typescript https://api.ocf.berkeley.edu/openapi.json -o src/definitions/ocfapi.ts -c .prettierrc.json"
   },
   "dependencies": {
-    "@chakra-ui/gatsby-plugin": "^3.0.6",
-    "@chakra-ui/icons": "^2.0.11",
-    "@chakra-ui/react": "^2.3.7",
-    "@chakra-ui/system": "^2.3.1",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@react-keycloak/web": "^3.4.0",
-    "framer-motion": "^7.6.4",
-    "gatsby": "^4.24.7",
-    "keycloak-js": "^18.0.1",
+    "@chakra-ui/gatsby-plugin": "^3.1.3",
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.1",
+    "@chakra-ui/system": "^2.6.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "framer-motion": "^10.16.4",
+    "gatsby": "^5.12.5",
+    "gatsby-plugin-emotion": "^8.12.0",
+    "gatsby-source-filesystem": "^5.12.0",
+    "gatsby-transformer-remark": "^6.12.0",
+    "keycloak-js": "^22.0.3",
+    "oidc-client-ts": "^2.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "swr": "^1.3.0",
-    "type-fest": "^3.2.0"
+    "react-oidc-context": "^2.3.0",
+    "swr": "^2.2.4",
+    "type-fest": "^4.3.2"
   },
   "devDependencies": {
-    "@types/express": "^4.17.14",
+    "@types/express": "^4.17.18",
     "@types/node": "^18.11.9",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
-    "dotenv": "^16.0.3",
-    "eslint": "^8.27.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "http-proxy-middleware": "^2.0.6",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "openapi-typescript": "^5.4.1",
-    "prettier": "2.7.1",
-    "typescript": "4.8.4"
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
+    "openapi-typescript": "^6.7.0",
+    "prettier": "3.0.3",
+    "typescript": "5.2.2"
   },
-  "packageManager": "yarn@3.2.4"
+  "packageManager": "yarn@3.6.3"
 }

src/components/FullWidthBox.tsx

@@ -15,7 +15,7 @@ const FullWidthBox = forwardRef<BoxProps, "div">(
         </Box>
       </Box>
     )
-  }
+  },
 )
 
 export default FullWidthBox

src/components/Logo.css

@@ -5,23 +5,26 @@
   fill-opacity: 0;
   stroke-dasharray: 1294 1296;
   stroke-dashoffset: 1295;
-  animation: drawStroke 1000ms ease 0ms forwards,
+  animation:
+    drawStroke 1000ms ease 0ms forwards,
     fadeStroke 250ms linear 1500ms forwards,
     fillPath 250ms linear 1500ms forwards;
 }
 .c {
   fill-opacity: 0;
   stroke-dasharray: 1053 1055;
   stroke-dashoffset: 1054;
-  animation: drawStroke 1000ms ease 250ms forwards,
+  animation:
+    drawStroke 1000ms ease 250ms forwards,
     fadeStroke 250ms linear 1500ms forwards,
     fillPath 250ms linear 1500ms forwards;
 }
 .f {
   fill-opacity: 0;
   stroke-dasharray: 949 951;
   stroke-dashoffset: 950;
-  animation: drawStroke 1000ms ease 500ms forwards,
+  animation:
+    drawStroke 1000ms ease 500ms forwards,
     fadeStroke 250ms linear 1500ms forwards,
     fillPath 250ms linear 1500ms forwards;
 }

src/components/Navbar.tsx

@@ -4,7 +4,7 @@ import NavbarButton from "~/components/NavbarButton"
 import NavbarDropdown from "~/components/NavbarDropdown"
 import NavbarDropdownLink from "~/components/NavbarDropdownLink"
 import { useEffect, useState, type RefObject } from "react"
-import useAuth from "~/hooks/useAuth"
+import useKeycloakAuth from "~/hooks/useKeycloakAuth"
 import penguin from "~/images/penguin.svg"
 
 const Navbar = ({
@@ -25,7 +25,7 @@ const Navbar = ({
       ([entry]) => setScrolling(!entry.isIntersecting),
       {
         threshold: [intersectionThreshold],
-      }
+      },
     )
 
     intersection.observe(intersectionElement.current)
@@ -37,7 +37,7 @@ const Navbar = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const { user, keycloak } = useAuth()
+  const { user, auth } = useKeycloakAuth()
 
   return (
     <Box
@@ -129,13 +129,13 @@ const Navbar = ({
           >
             Contact Us
           </NavbarButton>
-          {keycloak.authenticated ? (
+          {auth.isAuthenticated ? (
             <NavbarDropdown title={user?.username ?? ""} width={150}>
               <NavbarDropdownLink disabled>{user?.name}</NavbarDropdownLink>
               <NavbarDropdownLink href="/account">Account</NavbarDropdownLink>
               <NavbarDropdownLink
                 onClick={() => {
-                  keycloak.logout().catch(console.error)
+                  auth.signoutSilent().catch(console.error)
                 }}
               >
                 Log Out
@@ -153,7 +153,7 @@ const Navbar = ({
               h={8}
               px={4}
               onClick={() => {
-                keycloak.login().catch(console.error)
+                auth.signinRedirect().catch(console.error)
               }}
             >
               Log In

src/components/NavbarButton.tsx

@@ -29,7 +29,7 @@ const NavbarButton = forwardRef<NavbarButtonProps & ButtonProps, "button">(
         {...rest}
       />
     )
-  }
+  },
 )
 
 export default NavbarButton