feat(#5): wire up auth0 on frontend

.github/workflows/ci.yml

@@ -23,6 +23,12 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Setup Dotenv
+        run: |
+          echo "${{ secrets.DOTENV_APP_WEB_DEV }}" > projects/app-web/.env.development.local
+          echo "${{ secrets.DOTENV_APP_WEB_E2E }}" > projects/app-web-e2e/.env
+          echo "${{ secrets.DOTENV_DB_POSTGRES }}" > projects/db-postgres/.env.production
+
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
@@ -61,6 +67,13 @@ jobs:
       - name: E2E Tests
         run: yarn nx affected -t e2e
 
+      - name: Upload Videos Of Failed E2E
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-results
+          path: projects/app-web-e2e/.test-results
+
       - name: Record Affected Projects
         id: record-affected-projects
         if: ${{ github.ref_name == 'main' }}
@@ -76,9 +89,7 @@ jobs:
 
       - name: Deploy Postgres Migrations
         if: ${{ github.ref_name == 'main' && contains(steps.record-affected-projects.outputs.affected-projects, 'db-postgres') }}
-        run: |
-          echo "${{secrets.DOTENV_DB_POSTGRES }}" > projects/db-postgres/.env.production
-          yarn postgres:migrations-run:prod
+        run: yarn postgres:migrations-run:prod
 
       - name: Deploy API Service
         if: ${{ github.ref_name == 'main' && contains(steps.record-affected-projects.outputs.affected-projects, 'service-api') }}

.gitignore

@@ -28,17 +28,21 @@ node_modules
 # misc
 /.sass-cache
 /connect.lock
-/coverage
 /libpeerconnection.log
 npm-debug.log
 yarn-error.log
 testem.log
 /typings
 *.timestamp*.mjs
 
+# Test Output
+/coverage
+**/.test-results
+
 # System Files
 .DS_Store
 Thumbs.db
+*Zone.Identifier
 
 # caches
 .cache
@@ -47,3 +51,5 @@ Thumbs.db
 # secrets
 projects/db-postgres/.env.production
 projects/service-*/.env.production
+projects/app-web-e2e/.env
+**/.env*.local

.husky/pre-commit

@@ -1 +1 @@
-yarn dlx lint-staged --concurrent false --relative
+yarn dlx lint-staged --concurrent false --relative --allow-empty

.yarn/patches/mock-jwks-npm-3.1.0-131e3bbc29.patch

@@ -0,0 +1,61 @@
+diff --git a/build/index.d.ts b/build/index.d.ts
+index 575dc0e00c51ac7dac66c4e4885c2414ee98fa91..50717f586aba777a4239b726a90347d9c3dcea45 100644
+--- a/build/index.d.ts
++++ b/build/index.d.ts
+@@ -1,5 +1,8 @@
+ import { JwtPayload } from 'jsonwebtoken';
++import { HttpHandler } from 'msw';
++
+ declare const createJWKSMock: (jwksBase: string, jwksPath?: string) => {
++    handler: HttpHandler
+     start: () => void;
+     stop: () => void;
+     kid: () => string;
+diff --git a/build/index.js b/build/index.js
+index 289a2dac6cd569eef5dbc9329914a7517b442829..bfe7abde0ad358d21b707cc2fa69f721b02b8955 100644
+--- a/build/index.js
++++ b/build/index.js
+@@ -1,13 +1,20 @@
+ import { createJWKS, createKeyPair, signJwt } from './tools.js';
+ import { setupServer } from 'msw/node';
+-import { rest } from 'msw';
++import { http, HttpResponse } from 'msw';
++
+ const createJWKSMock = (jwksBase, jwksPath = '/.well-known/jwks.json') => {
+     const keypair = createKeyPair();
+     const JWKS = createJWKS({
+         ...keypair,
+         jwksOrigin: jwksBase,
+     });
+-    const server = setupServer(rest.get(new URL(jwksPath, jwksBase).href, (_, res, ctx) => res(ctx.status(200), ctx.json(JWKS))));
++    
++    // we patch & expose the actual msw handler so we can plug it into our own server rather than
++    // creating a conflicting instance. we also bump the msw version to match our own to avoid any
++    // compatibility issues.
++    const handler = http.get(new URL(jwksPath, jwksBase).href, () => HttpResponse.json(JWKS));
++
++    const server = setupServer(handler);
+     const kid = () => JWKS.keys[0].kid;
+     const start = () => {
+         server.listen({ onUnhandledRequest: 'bypass' });
+@@ -17,6 +24,7 @@ const createJWKSMock = (jwksBase, jwksPath = '/.well-known/jwks.json') => {
+     };
+     const token = (token = {}) => signJwt(keypair.privateKey, token, kid());
+     return {
++        handler,
+         start,
+         stop,
+         kid,
+diff --git a/package.json b/package.json
+index e5a5c2fc6b6b5dfec0c88bbf2adf4a88ba33e18b..412355319913b9b7a3743974c47d29fb834c9a93 100644
+--- a/package.json
++++ b/package.json
+@@ -91,7 +91,7 @@
+   "dependencies": {
+     "base64-url": "^2.3.3",
+     "jsonwebtoken": "^9.0.0",
+-    "msw": "^1.2.2",
++    "msw": "2.2.14",
+     "node-forge": "^1.3.1",
+     "node-rsa": "^1.1.1"
+   },

codegen.ts

@@ -14,13 +14,12 @@ const config: CodegenConfig = {
       plugins: ['schema-ast'],
     },
   },
-  // TODO: enable when introducing graphql-scalars
-  // config: {
-  //   scalars: {
-  //     UUID: 'string',
-  //     DateTime: 'Date',
-  //   },
-  // },
+  config: {
+    scalars: {
+      Date: 'Date',
+      DateTime: 'Date',
+    },
+  },
 };
 
 export default config;

eslint.config.cjs

@@ -24,6 +24,13 @@ module.exports = tseslint.config(
       //
     },
     rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          ignoreRestSiblings: true,
+        },
+      ],
+
       'unicorn/no-null': 'off',
       'unicorn/prevent-abbreviations': 'off',
     },

lint-staged.config.js

@@ -8,5 +8,6 @@ export default {
     (files) => `yarn nx affected:lint --files=${files.join(',')}`,
     (files) => `yarn nx format:write --files=${files.join(',')}`,
   ],
+  'projects/lib-postgres-schema/**/*.ts': ['yarn postgres:migrations-generate'],
   '**/*.graphql': ['yarn nx format:write'],
 };

package.json

@@ -5,12 +5,13 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "clean": "rm -rf '.nx/' 'tmp/' '**/.cache' '**/build/' '**/node_modules/' '**/dist/' '**/*.timestamp*.mjs'",
     "build": "nx run-many -t build",
     "lint": "nx run-many -t lint",
     "test": "nx run-many -t test",
     "typecheck": "nx run-many -t typecheck",
     "e2e": "nx run-many -t e2e",
-    "codegen:graphql": "graphql-codegen",
+    "codegen:graphql": "TS_NODE_PROJECT=tsconfig.base.json graphql-codegen --require tsconfig-paths/register",
     "postgres:start": "docker-compose -f ./docker-compose.yml up -d",
     "postgres:migrations-generate": "nx migrations-generate db-postgres",
     "postgres:migrations-run:dev": "nx migrations-run-dev db-postgres",
@@ -19,7 +20,7 @@
     "build:app-web": "nx build-remix app-web",
     "build:service-api": "nx build service-api",
     "build:service-user": "nx build service-user",
-    "deploy:app-web": "nx deploy service-api",
+    "deploy:app-web": "nx deploy app-web",
     "deploy:service-api": "nx deploy service-api",
     "deploy:service-user": "nx deploy service-user",
     "dev:app-web": "nx serve app-web",
@@ -45,6 +46,7 @@
     "@graphql-codegen/schema-ast": "4.0.2",
     "@graphql-tools/executor-http": "1.0.9",
     "@graphql-typed-document-node/core": "3.2.0",
+    "@mswjs/data": "0.16.1",
     "@nx/devkit": "18.3.3",
     "@nx/esbuild": "18.3.3",
     "@nx/eslint": "18.3.3",
@@ -64,20 +66,23 @@
     "@swc/core": "1.4.13",
     "@swc/helpers": "0.5.8",
     "@testcontainers/postgresql": "10.9.0",
+    "@testing-library/dom": "10.0.0",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.3.0",
+    "@testing-library/user-event": "14.5.2",
     "@types/jsonwebtoken": "9.0.6",
     "@types/node": "20.12.7",
     "@types/react": "18.2.75",
     "@types/react-dom": "18.2.24",
     "@types/react-is": "18.2.4",
-    "@types/styled-components": "5.1.34",
     "@typescript-eslint/eslint-plugin": "7.6.0",
     "@typescript-eslint/parser": "7.6.0",
     "@typescript-eslint/utils": "7.7.1",
+    "@vanilla-extract/vite-plugin": "4.0.7",
     "@vitejs/plugin-react": "4.2.1",
-    "@vitest/coverage-v8": "1.5.1",
-    "@vitest/ui": "1.5.1",
+    "@vitest/coverage-v8": "1.5.2",
+    "@vitest/expect": "1.5.2",
+    "@vitest/ui": "1.5.2",
     "drizzle-kit": "0.20.17",
     "esbuild": "0.20.2",
     "eslint": "9.0.0",
@@ -88,34 +93,45 @@
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-unicorn": "52.0.0",
+    "graphql-transform-scalars": "1.2.1",
     "happy-dom": "14.7.1",
     "husky": "9.0.11",
     "jest-extended": "4.0.2",
+    "jwt-decode": "4.0.0",
     "lint-staged": "15.2.2",
-    "mock-jwks": "3.1.0",
+    "mock-jwks": "patch:mock-jwks@npm%3A3.1.0#~/.yarn/patches/mock-jwks-npm-3.1.0-131e3bbc29.patch",
     "msw": "2.2.14",
+    "node-mocks-http": "1.14.1",
     "nx": "18.3.3",
     "playwright": "1.43.0",
     "prettier": "3.2.5",
+    "remix-flat-routes": "0.6.4",
+    "tsconfig-paths": "4.2.0",
     "tslib": "2.6.2",
     "tsx": "4.7.3",
+    "type-fest": "4.17.0",
     "typescript": "5.4.5",
     "typescript-eslint": "7.6.0",
     "vite": "5.2.10",
-    "vitest": "1.5.1"
+    "vitest": "1.5.2"
   },
   "dependencies": {
     "@hono/node-server": "1.10.0",
+    "@paralleldrive/cuid2": "2.2.2",
     "@pothos/core": "3.41.1",
     "@remix-run/node": "2.9.1",
     "@remix-run/react": "2.9.1",
     "@remix-run/serve": "2.9.1",
+    "@remix-run/server-runtime": "2.9.1",
+    "@vanilla-extract/css": "1.14.2",
+    "@vanilla-extract/sprinkles": "1.6.1",
     "auth0": "4.3.1",
-    "cuid": "3.0.0",
     "drizzle-orm": "0.30.9",
     "envalid": "8.0.0",
+    "got": "14.2.1",
     "graphql": "16.8.1",
     "graphql-request": "6.1.0",
+    "graphql-scalars": "1.23.0",
     "graphql-yoga": "5.3.0",
     "hono": "4.2.4",
     "isbot": "4",
@@ -126,9 +142,12 @@
     "react-dom": "18.2.0",
     "react-is": "18.2.0",
     "react-router-dom": "6.22.3",
+    "remix-auth": "3.6.0",
+    "remix-auth-auth0": "1.10.0",
+    "remix-auth-oauth2": "1.11.2",
     "remix-hono": "0.0.16",
-    "styled-components": "6.1.8",
-    "tiny-invariant": "1.3.3"
+    "tiny-invariant": "1.3.3",
+    "uuid": "9.0.1"
   },
   "packageManager": "yarn@4.1.1",
   "dockerfile": {
@@ -137,5 +156,8 @@
   },
   "workspaces": [
     "projects/*"
-  ]
+  ],
+  "resolutions": {
+    "msw@npm:^1.2.2": "2.2.14"
+  }
 }

projects/app-web-e2e/playwright.config.ts

@@ -1,32 +1,36 @@
 import { fileURLToPath } from 'node:url';
+import path from 'node:path';
 import { defineConfig, devices } from '@playwright/test';
 import { nxE2EPreset } from '@nx/playwright/preset';
 import { workspaceRoot } from '@nx/devkit';
 
 // patch cjs
 const __filename = fileURLToPath(import.meta.url);
 
-// For CI, you may want to set BASE_URL to the deployed application.
 const baseURL = process.env['BASE_URL'] || 'http://localhost:4000';
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
+// having a million issues trying to use __dirname to establish a reliable path
+// so it's easier to do this to handle the case when this file gets parsed for
+// building our nx graph
+const projectRoot = process.cwd().includes('app-web-e2e')
+  ? process.cwd()
+  : `${process.cwd()}/projects/app-web-e2e`;
 
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
+const dotEnvFile = path.join(projectRoot, '.env');
+
+process.loadEnvFile(dotEnvFile);
 export default defineConfig({
   ...nxE2EPreset(__filename, { testDir: './src' }),
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  outputDir: '.test-results',
+  timeout: 60 * 1000,
+  expect: {
+    timeout: 10 * 1000,
+  },
   use: {
     baseURL,
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
   },
-  /* Run your local dev server before starting the tests */
   webServer: {
     command: 'yarn dev:app-web',
     url: 'http://localhost:4000',
@@ -45,30 +49,5 @@ export default defineConfig({
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
     },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
-    // Uncomment for mobile browsers support
-    /* {
-      name: 'Mobile Chrome',
-      use: { ...devices['Pixel 5'] },
-    },
-    {
-      name: 'Mobile Safari',
-      use: { ...devices['iPhone 12'] },
-    }, */
-
-    // Uncomment for branded browsers
-    /* {
-      name: 'Microsoft Edge',
-      use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    },
-    {
-      name: 'Google Chrome',
-      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    } */
   ],
 });