Merge pull request #48 from authts/renames

renames and refactors

Author: zach-betz-hln

api/src/envUtils.ts

@@ -0,0 +1,7 @@
+export const requireEnvVar = (name: string): string => {
+  const value = process.env[name];
+  if (!value) {
+    throw new Error(`Env var ${name} is required`);
+  }
+  return value;
+};

api/src/index.ts

@@ -1,5 +1,6 @@
 import express from 'express';
 import morgan from 'morgan';
+import { requireEnvVar } from './envUtils.js';
 import { verifyJwtMiddleware } from './jwtUtils.js';
 import type { AugmentedRequest } from './types.js';
 
@@ -9,19 +10,17 @@ type CustomError = {
 
 const app = express();
 
-// biome-ignore lint/style/noNonNullAssertion: We expect this env var to always be populated
-const port = Number(process.env.API_PORT!);
+const port = Number(requireEnvVar('API_PORT'));
 
 app.use(morgan('tiny'));
 
 app.get('/auth-well-known-config', async (_req, res) => {
   try {
-    // biome-ignore lint/style/noNonNullAssertion: We expect this env var to always be populated
-    const response = await fetch(process.env.API_AUTH_WELL_KNOWN_CONFIG_URL!, {
+    const response = await fetch(requireEnvVar('API_AUTH_WELL_KNOWN_CONFIG_URL'), {
       headers: { accept: 'application/json' },
     });
     if (!response.ok) {
-      return res.status(500).json({ error: `Unexpected response status: ${response.status}` } satisfies CustomError);
+      throw new Error(`Unexpected response status: ${response.status}`);
     }
     const body = await response.json();
     return res.json(body);
@@ -33,7 +32,7 @@ app.get('/auth-well-known-config', async (_req, res) => {
 
 app.get('/payload', verifyJwtMiddleware, (req, res) => {
   const data = (req as AugmentedRequest).payload;
-  res.json(data);
+  return res.json(data);
 });
 
 const server = app.listen(port, () => {

api/src/jwtUtils.ts

@@ -1,9 +1,9 @@
 import type { NextFunction, Request, Response } from 'express';
 import { type JWTVerifyGetKey, createRemoteJWKSet, jwtVerify } from 'jose';
+import { requireEnvVar } from './envUtils.js';
 import type { AugmentedRequest } from './types.js';
 
-// biome-ignore lint/style/noNonNullAssertion: We expect this env var to always be populated
-const jsonWebKeySetUrl = process.env.API_AUTH_JSON_WEB_KEY_SET_URL!;
+const jsonWebKeySetUrl = requireEnvVar('API_AUTH_JSON_WEB_KEY_SET_URL');
 
 // This function is cached so that the json web key set is not looked up on every request
 let getJsonWebKeySet: JWTVerifyGetKey | null = null;

package-lock.json

@@ -2,7 +2,8 @@
   "version": "2.0.0",
   "scripts": {
     "check": "biome check --write .",
-    "toc": "markdown-toc -i README.md"
+    "toc": "markdown-toc -i README.md",
+    "docker-compose-all": "cp .env.sample .env && docker compose build && docker compose up"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",

package.json

@@ -3,7 +3,7 @@ import { type FC, type ReactNode, useEffect, useState } from 'react';
 import { hasAuthParams, useAuth } from 'react-oidc-context';
 import { Alert } from './Alert.tsx';
 
-const queryFn = async () => {
+const getAuthHealth = async () => {
   const response = await fetch('/api/auth-well-known-config');
   if (!response.ok) {
     throw new Error('Please confirm your auth server is up');
@@ -18,9 +18,9 @@ interface ProtectedAppProps {
 export const ProtectedApp: FC<ProtectedAppProps> = (props) => {
   const { children } = props;
 
-  const { isPending: metadataIsPending, error: metadataError } = useQuery({
-    queryKey: ['getMetadata'],
-    queryFn,
+  const { isPending: getAuthHealthIsPending, error: getAuthHealthError } = useQuery({
+    queryKey: ['getAuthHealth'],
+    queryFn: getAuthHealth,
     retry: false,
   });
 
@@ -33,37 +33,40 @@ export const ProtectedApp: FC<ProtectedAppProps> = (props) => {
    * See {@link https://github.com/authts/react-oidc-context?tab=readme-ov-file#automatic-sign-in}
    */
   useEffect(() => {
-    if (metadataIsPending || metadataError) {
+    if (getAuthHealthIsPending || getAuthHealthError) {
       return;
     }
     if (!(hasAuthParams() || auth.isAuthenticated || auth.activeNavigator || auth.isLoading || hasTriedSignin)) {
       void auth.signinRedirect();
       setHasTriedSignin(true);
     }
-  }, [auth, hasTriedSignin, metadataIsPending, metadataError]);
+  }, [auth, hasTriedSignin, getAuthHealthIsPending, getAuthHealthError]);
 
-  const anyLoading = auth.isLoading || metadataIsPending;
-  const anyErrorMessage = auth.error?.message || metadataError?.message;
+  const anyLoading = getAuthHealthIsPending || auth.isLoading;
+  const anyErrorMessage = getAuthHealthError?.message || auth.error?.message;
 
-  return (
-    <>
-      {anyErrorMessage ? (
-        <>
-          <h1>We've hit a snag</h1>
-          <Alert variant="error">{anyErrorMessage}</Alert>
-        </>
-      ) : anyLoading ? (
-        <>
-          <h1>Loading...</h1>
-        </>
-      ) : auth.isAuthenticated ? (
-        children
-      ) : (
-        <>
-          <h1>We've hit a snag</h1>
-          <Alert variant="error">Unable to sign in</Alert>
-        </>
-      )}
-    </>
-  );
+  if (anyLoading) {
+    return (
+      <>
+        <h1>Loading...</h1>
+      </>
+    );
+  }
+  if (anyErrorMessage) {
+    return (
+      <>
+        <h1>We've hit a snag</h1>
+        <Alert variant="error">{anyErrorMessage}</Alert>
+      </>
+    );
+  }
+  if (!auth.isAuthenticated) {
+    return (
+      <>
+        <h1>We've hit a snag</h1>
+        <Alert variant="error">Unable to sign in</Alert>
+      </>
+    );
+  }
+  return <>{children}</>;
 };

react/src/components/ProtectedApp.tsx

@@ -1,6 +1,6 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
-import reactDom from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import { AuthProvider } from 'react-oidc-context';
 import { BrowserRouter } from 'react-router-dom';
 import { App } from './components/App.tsx';
@@ -9,7 +9,7 @@ import { ProtectedApp } from './components/ProtectedApp.tsx';
 import { onSigninCallback, queryClient, userManager } from './config.ts';
 
 // biome-ignore lint/style/noNonNullAssertion: We expect this element to always exist
-reactDom.createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter basename="/">
       <AuthProvider userManager={userManager} onSigninCallback={onSigninCallback}>