feat: use oidc-mock in local running, insert nonce throughout

Author: edwardlonsdale

.env.example

@@ -5,6 +5,7 @@ PLAYWRIGHT_TIMEOUT=30000
 SERVICES_JSON_PATH=./services.json
 PORT=3000
 SESSION_SECRET=<any long random string>
-SSO_CLIENT_ID=<from Internal Access>
-SSO_CLIENT_SECRET=<from Internal Access>
+SSO_ISSUER=http://localhost:8090/default
+SSO_CLIENT_ID=test-client
+SSO_CLIENT_SECRET=test-secret
 APP_URL=http://localhost:3000

CLAUDE.md

@@ -37,8 +37,8 @@ The daily cron (2 AM London) enqueues one job per service. Jobs are processed se
 ## Running locally
 
 ```bash
-# Start Postgres
-docker compose up postgres -d
+# Start Postgres and OIDC mock
+docker compose up postgres oidc-mock -d
 
 # Run migrations and seed
 npm run db:migrate
@@ -56,8 +56,9 @@ Required `.env` (see `.env.example`):
 ```
 DATABASE_URL=postgres://scraper:scraper@localhost:5432/compliance_scraper
 SESSION_SECRET=<any long random string>
-SSO_CLIENT_ID=<from Internal Access>
-SSO_CLIENT_SECRET=<from Internal Access>
+SSO_ISSUER=http://localhost:8090/default
+SSO_CLIENT_ID=test-client
+SSO_CLIENT_SECRET=test-secret
 APP_URL=http://localhost:3000
 ```
 

README.md

@@ -56,12 +56,18 @@ pnpm run db:seed
 ## Running locally
 
 ```bash
+# Start Postgres and OIDC mock
+docker compose up postgres oidc-mock -d
+
+# Run migrations and seed (first time only)
+pnpm run db:migrate
+pnpm run db:seed
+
+# Start the app
 pnpm run dev
-pnpm run dev:watch
-pnpm run build && pnpm start
 ```
 
-Opens at [http://localhost:3000](http://localhost:3000)
+Opens at [http://localhost:3000](http://localhost:3000). Sign-in uses a local mock identity provider (auto-login, no credentials needed).
 
 ### Docker Compose
 

src/server/views/cookies-list.njk

@@ -16,7 +16,7 @@
     <div class="govuk-grid-column-one-quarter">
       <div class="govuk-form-group govuk-!-margin-bottom-2">
         <label class="govuk-label govuk-label--s" for="organisation">Organisation</label>
-        <select class="govuk-select govuk-!-width-full" id="organisation" name="organisation" onchange="this.form.submit()">
+        <select class="govuk-select govuk-!-width-full" id="organisation" name="organisation" data-auto-submit>
           <option value="">All organisations</option>
           {% for org in organisations %}
             <option value="{{ org }}" {% if currentFilters.organisation == org %}selected{% endif %}>{{ org }}</option>
@@ -25,7 +25,7 @@
       </div>
     </div>
     {% if currentFilters.organisation %}
-    <div class="govuk-grid-column-one-quarter" style="padding-top: 30px;">
+    <div class="govuk-grid-column-one-quarter govuk-!-padding-top-6">
       <a href="/cookies" class="govuk-link">Clear filters</a>
     </div>
     {% endif %}

src/server/views/home.njk

@@ -35,7 +35,7 @@
   </a>
 {% else %}
   <a href="/auth/login" role="button" draggable="false" class="govuk-button" data-module="govuk-button">
-    Sign in with Internal Access
+    Sign in
   </a>
 {% endif %}
 

src/server/views/layout.njk

@@ -172,5 +172,10 @@
       });
     });
   </script>
+  <script nonce="{{ cspNonce }}">
+    document.querySelectorAll('select[data-auto-submit]').forEach(function(el) {
+      el.addEventListener('change', function() { el.form.submit(); });
+    });
+  </script>
 </body>
 </html>

src/server/views/privacy-list.njk

@@ -15,7 +15,7 @@
     <div class="govuk-grid-column-one-quarter">
       <div class="govuk-form-group govuk-!-margin-bottom-2">
         <label class="govuk-label govuk-label--s" for="organisation">Organisation</label>
-        <select class="govuk-select govuk-!-width-full" id="organisation" name="organisation" onchange="this.form.submit()">
+        <select class="govuk-select govuk-!-width-full" id="organisation" name="organisation" data-auto-submit>
           <option value="">All organisations</option>
           {% for org in organisations %}
             <option value="{{ org }}" {% if currentFilters.organisation == org %}selected{% endif %}>{{ org }}</option>
@@ -24,7 +24,7 @@
       </div>
     </div>
     {% if currentFilters.organisation %}
-    <div class="govuk-grid-column-one-quarter" style="padding-top: 30px;">
+    <div class="govuk-grid-column-one-quarter govuk-!-padding-top-6">
       <a href="/privacy" class="govuk-link">Clear filters</a>
     </div>
     {% endif %}

src/server/views/results.njk

@@ -20,7 +20,7 @@
     <div class="govuk-grid-column-one-quarter">
       <div class="govuk-form-group govuk-!-margin-bottom-2">
         <label class="govuk-label govuk-label--s" for="status">Stated compliance</label>
-        <select class="govuk-select govuk-!-width-full" id="status" name="status" onchange="this.form.submit()">
+        <select class="govuk-select govuk-!-width-full" id="status" name="status" data-auto-submit>
           <option value="">All statuses</option>
           <option value="fully_compliant" {% if currentFilters.status == 'fully_compliant' %}selected{% endif %}>Fully compliant</option>
           <option value="partially_compliant" {% if currentFilters.status == 'partially_compliant' %}selected{% endif %}>Partially compliant</option>
@@ -32,7 +32,7 @@
     <div class="govuk-grid-column-one-quarter">
       <div class="govuk-form-group govuk-!-margin-bottom-2">
         <label class="govuk-label govuk-label--s" for="organisation">Organisation</label>
-        <select class="govuk-select govuk-!-width-full" id="organisation" name="organisation" onchange="this.form.submit()">
+        <select class="govuk-select govuk-!-width-full" id="organisation" name="organisation" data-auto-submit>
           <option value="">All organisations</option>
           {% for org in organisations %}
             <option value="{{ org }}" {% if currentFilters.organisation == org %}selected{% endif %}>{{ org }}</option>
@@ -41,7 +41,7 @@
       </div>
     </div>
     {% if currentFilters.status or currentFilters.organisation %}
-    <div class="govuk-grid-column-one-quarter" style="padding-top: 30px;">
+    <div class="govuk-grid-column-one-quarter govuk-!-padding-top-6">
       <a href="/accessibility" class="govuk-link">Clear filters</a>
     </div>
     {% endif %}