Merge branch 'dev' into feature/auth

[ci skip]

README.md

@@ -70,65 +70,14 @@ For configuration options, examples and more, [please check out the homepage doc
 
 ## Security Notice 🔒
 
-Please note that when using features such as widgets, Homepage can access personal information (for example from your home automation system) and Homepage currently does not (and is not planned to) include any authentication layer itself. If Homepage is reachable from any untrusted network, it **must** sit behind a reverse proxy (and/or VPN) that enforces authentication, TLS, and strictly validates Host headers. The built-in host check in Homepage is a best-effort guard and should not be treated as security when exposed publicly.
+Please note that when using features such as widgets, Homepage can access personal information (for example from your home automation system). To keep your information private, if Homepage is reachable from any untrusted network, it:
 
-## With Docker
+1. **must** sit behind a reverse proxy (and/or VPN) that enforces authentication, TLS, and strictly validates Host headers.
+2. An optional built-in OIDC login flow is available (opt-in) offering a simple “authenticated or not” guard.
 
-Using docker compose:
+## Installation
 
-```yaml
-services:
-  homepage:
-    image: ghcr.io/gethomepage/homepage:latest
-    container_name: homepage
-    environment:
-      HOMEPAGE_ALLOWED_HOSTS: gethomepage.dev # required, may need port. See gethomepage.dev/installation/#homepage_allowed_hosts
-      PUID: 1000 # optional, your user id
-      PGID: 1000 # optional, your group id
-    ports:
-      - 3000:3000
-    volumes:
-      - /path/to/config:/app/config # Make sure your local config directory exists
-      - /var/run/docker.sock:/var/run/docker.sock:ro # optional, for docker integrations
-    restart: unless-stopped
-```
-
-or docker run:
-
-```bash
-docker run --name homepage \
-  -e HOMEPAGE_ALLOWED_HOSTS=gethomepage.dev \
-  -e PUID=1000 \
-  -e PGID=1000 \
-  -p 3000:3000 \
-  -v /path/to/config:/app/config \
-  -v /var/run/docker.sock:/var/run/docker.sock:ro \
-  --restart unless-stopped \
-  ghcr.io/gethomepage/homepage:latest
-```
-
-## From Source
-
-First, clone the repository:
-
-```bash
-git clone https://github.com/gethomepage/homepage.git
-```
-
-Then install dependencies and build the production bundle:
-
-```bash
-pnpm install
-pnpm build
-```
-
-If this is your first time starting, copy the `src/skeleton` directory to `config/` to populate initial example config files.
-
-Finally, run the server in production mode:
-
-```bash
-pnpm start
-```
+See the [Installation](https://gethomepage.dev/installation/) section of the docs for instructions on installing Homepage via Docker, Kubernetes, Unraid, or from source.
 
 # Configuration
 

docs/installation/docker.md

@@ -15,8 +15,6 @@ services:
     volumes:
       - /path/to/config:/app/config # Make sure your local config directory exists
       - /var/run/docker.sock:/var/run/docker.sock:ro # (optional) For docker integrations
-    environment:
-      HOMEPAGE_ALLOWED_HOSTS: gethomepage.dev # required, may need port. See gethomepage.dev/installation/#homepage_allowed_hosts
 ```
 
 ### Running as non-root
@@ -38,7 +36,6 @@ services:
       - /path/to/config:/app/config # Make sure your local config directory exists
       - /var/run/docker.sock:/var/run/docker.sock:ro # (optional) For docker integrations, see alternative methods
     environment:
-      HOMEPAGE_ALLOWED_HOSTS: gethomepage.dev # required, may need port. See gethomepage.dev/installation/#homepage_allowed_hosts
       PUID: $PUID
       PGID: $PGID
 ```
@@ -46,7 +43,7 @@ services:
 ### With Docker Run
 
 ```bash
-docker run -p 3000:3000 -e HOMEPAGE_ALLOWED_HOSTS=gethomepage.dev -v /path/to/config:/app/config -v /var/run/docker.sock:/var/run/docker.sock ghcr.io/gethomepage/homepage:latest
+docker run -p 3000:3000 -v /path/to/config:/app/config -v /var/run/docker.sock:/var/run/docker.sock ghcr.io/gethomepage/homepage:latest
 ```
 
 ### Using Environment Secrets

docs/installation/index.md

@@ -27,14 +27,25 @@ You have a few options for deploying homepage, depending on your needs. We offer
 
 </div>
 
-### `HOMEPAGE_ALLOWED_HOSTS`
+### Security & Authentication
 
-As of v1.0 there is one required environment variable to access homepage via a URL other than `localhost`, <code>HOMEPAGE_ALLOWED_HOSTS</code>. The setting helps prevent certain kinds of attacks when retrieving data from the homepage API proxy.
+Public deployments of Homepage should be secured via a reverse proxy, VPN, or similar. As of version 2.0, Homepage supports a simple authorization gate with a password or OIDC. When enabled, Homepage will use password login by default unless OIDC variables are provided.
 
-The value is a comma-separated (no spaces) list of allowed hosts (sometimes with the port) that can host your homepage install. See the [docker](docker.md), [kubernetes](k8s.md) and [source](source.md) installation pages for more information about where / how to set the variable.
+Required environment variables for authentication:
 
-`localhost:3000` and `127.0.0.1:3000` are always included, but you can add a domain or IP address to this list to allow that host such as `HOMEPAGE_ALLOWED_HOSTS=gethomepage.dev,192.168.1.2:1234`, etc.
+- `HOMEPAGE_AUTH_ENABLED=true`
+- `HOMEPAGE_AUTH_SECRET` (random string for signing/encrypting cookies)
 
-If you are seeing errors about host validation, check the homepage logs and ensure that the host exactly as output in the logs is in the `HOMEPAGE_ALLOWED_HOSTS` list.
+For password-only login:
 
-This can be disabled by setting `HOMEPAGE_ALLOWED_HOSTS` to `*` but this is not recommended. Public deployments must rely on a reverse proxy (and/or VPN) that enforces authentication, TLS, and unexpected Host headers; the built-in host check is a best-effort guard for local setups and is not a substitute for edge protections.
+- `HOMEPAGE_AUTH_PASSWORD` (password-only login; required unless OIDC settings are provided)
+
+For OIDC login (overrides password login):
+
+- `HOMEPAGE_OIDC_ISSUER` (OIDC issuer URL, e.g., `https://auth.example.com/realms/homepage`)
+- `HOMEPAGE_OIDC_CLIENT_ID`
+- `HOMEPAGE_OIDC_CLIENT_SECRET`
+- `HOMEPAGE_EXTERNAL_URL` (external URL to your Homepage instance; used for callbacks)
+- Optional: `HOMEPAGE_OIDC_NAME` (display name), `HOMEPAGE_OIDC_SCOPE` (defaults to `openid email profile`)
+
+All app pages and `/api` routes will require a signed-in session. Static assets remain public. Homepage still does not implement per-user dashboards or roles; authentication is a simple gate only.

docs/installation/k8s.md

@@ -223,9 +223,6 @@ spec:
         - name: homepage
           image: "ghcr.io/gethomepage/homepage:latest"
           imagePullPolicy: Always
-          env:
-            - name: HOMEPAGE_ALLOWED_HOSTS
-              value: gethomepage.dev # required, may need port. See gethomepage.dev/installation/#homepage_allowed_hosts
           ports:
             - name: http
               containerPort: 3000

docs/installation/source.md

@@ -27,9 +27,7 @@ If this is your first time starting, copy the `src/skeleton` directory to `confi
 Finally, run the server:
 
 ```bash
-HOMEPAGE_ALLOWED_HOSTS=gethomepage.dev:1234 pnpm start
+pnpm start
 ```
 
 When updating homepage versions you will need to re-build the static files i.e. repeat the process above.
-
-See [HOMEPAGE_ALLOWED_HOSTS](index.md#homepage_allowed_hosts) for more information on this environment variable.

package.json

@@ -29,6 +29,7 @@
     "memory-cache": "^0.2.0",
     "minecraftstatuspinger": "^1.2.2",
     "next": "^15.5.11",
+    "next-auth": "^4.24.10",
     "next-i18next": "^12.1.0",
     "ping": "^0.4.4",
     "pretty-bytes": "^7.1.0",

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       next:
         specifier: ^15.5.11
         version: 15.5.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next-auth:
+        specifier: ^4.24.10
+        version: 4.24.13(next@15.5.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-i18next:
         specifier: ^12.1.0
         version: 12.1.0(next@15.5.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -803,6 +806,9 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
+  '@panva/hkdf@1.2.1':
+    resolution: {integrity: sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1683,6 +1689,10 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
   core-js@3.40.0:
     resolution: {integrity: sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==}
 
@@ -2551,6 +2561,9 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
+  jose@4.15.9:
+    resolution: {integrity: sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==}
+
   jose@5.10.0:
     resolution: {integrity: sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==}
 
@@ -2723,6 +2736,10 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
+  lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+
   luxon@3.6.1:
     resolution: {integrity: sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ==}
     engines: {node: '>=12'}
@@ -2831,6 +2848,20 @@ packages:
   net@1.0.2:
     resolution: {integrity: sha512-kbhcj2SVVR4caaVnGLJKmlk2+f+oLkjqdKeQlmUtz6nGzOpbcobwVIeSURNgraV/v3tlmGIX82OcPCl0K6RbHQ==}
 
+  next-auth@4.24.13:
+    resolution: {integrity: sha512-sgObCfcfL7BzIK76SS5TnQtc3yo2Oifp/yIpfv6fMfeBOiBJkDWF3A2y9+yqnmJ4JKc2C+nMjSjmgDeTwgN1rQ==}
+    peerDependencies:
+      '@auth/core': 0.34.3
+      next: ^12.2.5 || ^13 || ^14 || ^15 || ^16
+      nodemailer: ^7.0.7
+      react: ^17.0.2 || ^18 || ^19
+      react-dom: ^17.0.2 || ^18 || ^19
+    peerDependenciesMeta:
+      '@auth/core':
+        optional: true
+      nodemailer:
+        optional: true
+
   next-i18next@12.1.0:
     resolution: {integrity: sha512-rhos/PVULmZPdC0jpec2MDBQMXdGZ3+Mbh/tZfrDtjgnVN3ucdq7k8BlwsJNww6FnqC8AC31n6dSYuqVzYsGsw==}
     engines: {node: '>=12'}
@@ -2878,10 +2909,17 @@ packages:
   oauth4webapi@3.3.0:
     resolution: {integrity: sha512-ZlozhPlFfobzh3hB72gnBFLjXpugl/dljz1fJSRdqaV2r3D5dmi5lg2QWI0LmUYuazmE+b5exsloEv6toUtw9g==}
 
+  oauth@0.9.15:
+    resolution: {integrity: sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
+  object-hash@2.2.0:
+    resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
+    engines: {node: '>= 6'}
+
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -2910,12 +2948,19 @@ packages:
     resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
 
+  oidc-token-hash@5.2.0:
+    resolution: {integrity: sha512-6gj2m8cJZ+iSW8bm0FXdGF0YhIQbKrfP4yWTNzxc31U6MOjfEmB1rHvlYvxI1B7t7BCi1F2vYTT6YhtQRG4hxw==}
+    engines: {node: ^10.13.0 || >=12.0.0}
+
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
   one-time@1.0.0:
     resolution: {integrity: sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==}
 
+  openid-client@5.7.1:
+    resolution: {integrity: sha512-jDBPgSVfTnkIh71Hg9pRvtJc6wTwqjRkN88+gCFtYWrlP4Yx2Dsrow8uPi3qLr/aeymPF3o2+dS+wOpglK04ew==}
+
   openid-client@6.3.0:
     resolution: {integrity: sha512-68LMqb/Whtq214B9c9kCtuniCKQrEqWJRTEoOEZlv2QV5VgqhjySCpBe4RXeU+pj/VNOi7erP/ixxfHtqR7FOw==}
 
@@ -3007,6 +3052,14 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  preact-render-to-string@5.2.6:
+    resolution: {integrity: sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==}
+    peerDependencies:
+      preact: '>=10'
+
+  preact@10.28.2:
+    resolution: {integrity: sha512-lbteaWGzGHdlIuiJ0l2Jq454m6kcpI1zNje6d8MlGAFlYvP2GO4ibnat7P74Esfz4sPTdM6UxtTwh/d3pwM9JA==}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -3038,6 +3091,9 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
+  pretty-format@3.8.0:
+    resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
+
   prism-react-renderer@2.4.1:
     resolution: {integrity: sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==}
     peerDependencies:
@@ -3670,6 +3726,10 @@ packages:
     resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
     hasBin: true
 
+  uuid@8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    hasBin: true
+
   varint@6.0.0:
     resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
 
@@ -3868,6 +3928,9 @@ packages:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
 
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
   yallist@5.0.0:
     resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
     engines: {node: '>=18'}
@@ -4389,6 +4452,8 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
+  '@panva/hkdf@1.2.1': {}
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -5255,6 +5320,8 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  cookie@0.7.2: {}
+
   core-js@3.40.0: {}
 
   core-util-is@1.0.3: {}
@@ -6347,6 +6414,8 @@ snapshots:
 
   jiti@2.6.1: {}
 
+  jose@4.15.9: {}
+
   jose@5.10.0: {}
 
   js-tokens@10.0.0: {}
@@ -6508,6 +6577,10 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
+  lru-cache@6.0.0:
+    dependencies:
+      yallist: 4.0.0
+
   luxon@3.6.1: {}
 
   lz-string@1.5.0: {}
@@ -6587,6 +6660,21 @@ snapshots:
 
   net@1.0.2: {}
 
+  next-auth@4.24.13(next@15.5.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.28.6
+      '@panva/hkdf': 1.2.1
+      cookie: 0.7.2
+      jose: 4.15.9
+      next: 15.5.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      oauth: 0.9.15
+      openid-client: 5.7.1
+      preact: 10.28.2
+      preact-render-to-string: 5.2.6(preact@10.28.2)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      uuid: 8.3.2
+
   next-i18next@12.1.0(next@15.5.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.26.9
@@ -6635,8 +6723,12 @@ snapshots:
 
   oauth4webapi@3.3.0: {}
 
+  oauth@0.9.15: {}
+
   object-assign@4.1.1: {}
 
+  object-hash@2.2.0: {}
+
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
@@ -6676,6 +6768,8 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  oidc-token-hash@5.2.0: {}
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -6684,6 +6778,13 @@ snapshots:
     dependencies:
       fn.name: 1.1.0
 
+  openid-client@5.7.1:
+    dependencies:
+      jose: 4.15.9
+      lru-cache: 6.0.0
+      object-hash: 2.2.0
+      oidc-token-hash: 5.2.0
+
   openid-client@6.3.0:
     dependencies:
       jose: 5.10.0
@@ -6766,6 +6867,13 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  preact-render-to-string@5.2.6(preact@10.28.2):
+    dependencies:
+      preact: 10.28.2
+      pretty-format: 3.8.0
+
+  preact@10.28.2: {}
+
   prelude-ls@1.2.1: {}
 
   prettier-linter-helpers@1.0.0:
@@ -6787,6 +6895,8 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
+  pretty-format@3.8.0: {}
+
   prism-react-renderer@2.4.1(react@18.3.1):
     dependencies:
       '@types/prismjs': 1.26.5
@@ -7544,6 +7654,8 @@ snapshots:
 
   uuid@10.0.0: {}
 
+  uuid@8.3.2: {}
+
   varint@6.0.0: {}
 
   victory-vendor@37.3.6:
@@ -7780,6 +7892,8 @@ snapshots:
 
   y18n@5.0.8: {}
 
+  yallist@4.0.0: {}
+
   yallist@5.0.0: {}
 
   yargs-parser@21.1.1: {}

src/__tests__/pages/api/auth/[...nextauth].test.js

@@ -0,0 +1,124 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const { nextAuthMock } = vi.hoisted(() => ({
+  nextAuthMock: vi.fn((options) => ({ options })),
+}));
+
+vi.mock("next-auth", () => ({
+  default: nextAuthMock,
+}));
+
+describe("pages/api/auth/[...nextauth]", () => {
+  const originalEnv = process.env;
+
+  beforeEach(() => {
+    vi.resetModules();
+    nextAuthMock.mockClear();
+    process.env = { ...originalEnv };
+    delete process.env.NEXTAUTH_SECRET;
+    delete process.env.NEXTAUTH_URL;
+  });
+
+  it("configures no providers when auth is disabled", async () => {
+    const mod = await import("pages/api/auth/[...nextauth]");
+
+    expect(nextAuthMock).toHaveBeenCalledTimes(1);
+    expect(mod.default.options.providers).toEqual([]);
+    expect(mod.default.options.pages?.signIn).toBe("/auth/signin");
+  });
+
+  it("maps HOMEPAGE_AUTH_SECRET and HOMEPAGE_EXTERNAL_URL to NextAuth envs", async () => {
+    process.env.HOMEPAGE_AUTH_SECRET = "secret";
+    process.env.HOMEPAGE_EXTERNAL_URL = "https://homepage.example";
+
+    const mod = await import("pages/api/auth/[...nextauth]");
+
+    expect(process.env.NEXTAUTH_SECRET).toBe("secret");
+    expect(process.env.NEXTAUTH_URL).toBe("https://homepage.example");
+    expect(mod.default.options.secret).toBe("secret");
+  });
+
+  it("throws when auth is enabled but no provider settings are present", async () => {
+    process.env.HOMEPAGE_AUTH_ENABLED = "true";
+
+    await expect(import("pages/api/auth/[...nextauth]")).rejects.toThrow(
+      /Password auth is enabled but required settings are missing/i,
+    );
+  });
+
+  it("builds a password provider when auth is enabled without OIDC config", async () => {
+    process.env.HOMEPAGE_AUTH_ENABLED = "true";
+    process.env.HOMEPAGE_AUTH_PASSWORD = "secret";
+    process.env.HOMEPAGE_AUTH_SECRET = "auth-secret";
+
+    const mod = await import("pages/api/auth/[...nextauth]");
+    const [provider] = mod.default.options.providers;
+
+    expect(provider.id).toBe("credentials");
+    expect(provider.name).toBe("Credentials");
+    expect(provider.type).toBe("credentials");
+    expect(typeof provider.authorize).toBe("function");
+  });
+
+  it("builds an OIDC provider when enabled and maps profile fields", async () => {
+    process.env.HOMEPAGE_AUTH_ENABLED = "true";
+    process.env.HOMEPAGE_OIDC_ISSUER = "https://issuer.example/";
+    process.env.HOMEPAGE_OIDC_CLIENT_ID = "client-id";
+    process.env.HOMEPAGE_OIDC_CLIENT_SECRET = "client-secret";
+    process.env.HOMEPAGE_AUTH_SECRET = "auth-secret";
+    process.env.HOMEPAGE_EXTERNAL_URL = "https://homepage.example";
+    process.env.HOMEPAGE_OIDC_NAME = "My OIDC";
+    process.env.HOMEPAGE_OIDC_SCOPE = "openid email";
+
+    const mod = await import("pages/api/auth/[...nextauth]");
+    const [provider] = mod.default.options.providers;
+
+    expect(provider).toMatchObject({
+      id: "homepage-oidc",
+      name: "My OIDC",
+      type: "oauth",
+      idToken: true,
+      issuer: "https://issuer.example",
+      wellKnown: "https://issuer.example/.well-known/openid-configuration",
+      clientId: "client-id",
+      clientSecret: "client-secret",
+    });
+    expect(provider.authorization.params.scope).toBe("openid email");
+
+    expect(
+      provider.profile({
+        sub: "sub",
+        preferred_username: "user",
+        email: "user@example.com",
+        picture: "https://example.com/p.png",
+      }),
+    ).toEqual({
+      id: "sub",
+      name: "user",
+      email: "user@example.com",
+      image: "https://example.com/p.png",
+    });
+
+    expect(
+      provider.profile({
+        id: "id",
+        name: "name",
+      }),
+    ).toEqual({
+      id: "id",
+      name: "name",
+      email: null,
+      image: null,
+    });
+  });
+
+  it("throws when only partial OIDC settings are provided", async () => {
+    process.env.HOMEPAGE_AUTH_ENABLED = "true";
+    process.env.HOMEPAGE_OIDC_ISSUER = "https://issuer.example";
+    process.env.HOMEPAGE_AUTH_SECRET = "auth-secret";
+
+    await expect(import("pages/api/auth/[...nextauth]")).rejects.toThrow(
+      /OIDC auth is enabled but required settings are missing/i,
+    );
+  });
+});

src/__tests__/pages/auth/signin.test.jsx

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+const { getSettingsMock } = vi.hoisted(() => ({
+  getSettingsMock: vi.fn(),
+}));
+
+vi.mock("utils/config/config", () => ({
+  getSettings: getSettingsMock,
+}));
+
+vi.mock("next/router", () => ({
+  useRouter: () => ({
+    query: {},
+  }),
+}));
+
+import { getProviders } from "next-auth/react";
+import SignInPage, { getServerSideProps } from "pages/auth/signin";
+
+describe("pages/auth/signin", () => {
+  it("renders an error state when no providers are configured", async () => {
+    render(
+      <SignInPage
+        providers={{}}
+        settings={{
+          theme: "dark",
+          color: "slate",
+          title: "Homepage",
+        }}
+      />,
+    );
+
+    expect(screen.getByText("Authentication not configured")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(document.documentElement.classList.contains("dark")).toBe(true);
+      expect(document.documentElement.classList.contains("scheme-dark")).toBe(true);
+      expect(document.documentElement.classList.contains("theme-slate")).toBe(true);
+    });
+  });
+
+  it("renders provider buttons when providers are available", () => {
+    render(
+      <SignInPage
+        providers={{
+          oidc: { id: "oidc", name: "OIDC" },
+        }}
+        settings={{
+          theme: "light",
+          color: "emerald",
+          title: "My Dashboard",
+        }}
+      />,
+    );
+
+    expect(screen.getByText("Sign in")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /login via oidc/i })).toBeInTheDocument();
+  });
+
+  it("getServerSideProps returns providers and settings", async () => {
+    getProviders.mockResolvedValueOnce({ foo: { id: "foo", name: "Foo" } });
+    getSettingsMock.mockReturnValueOnce({ theme: "dark" });
+
+    const res = await getServerSideProps({});
+
+    expect(getProviders).toHaveBeenCalled();
+    expect(getSettingsMock).toHaveBeenCalled();
+    expect(res).toEqual({
+      props: {
+        providers: { foo: { id: "foo", name: "Foo" } },
+        settings: { theme: "dark" },
+      },
+    });
+  });
+});

src/middleware.js

@@ -1,23 +1,34 @@
+import { getToken } from "next-auth/jwt";
 import { NextResponse } from "next/server";
 
-export function middleware(req) {
-  // Check the Host header, if HOMEPAGE_ALLOWED_HOSTS is set
-  const host = req.headers.get("host");
-  const port = process.env.PORT || 3000;
-  let allowedHosts = [`localhost:${port}`, `127.0.0.1:${port}`, `[::1]:${port}`];
-  const allowAll = process.env.HOMEPAGE_ALLOWED_HOSTS === "*";
-  if (process.env.HOMEPAGE_ALLOWED_HOSTS) {
-    allowedHosts = allowedHosts.concat(process.env.HOMEPAGE_ALLOWED_HOSTS.split(","));
-  }
-  if (!allowAll && (!host || !allowedHosts.includes(host))) {
-    console.error(
-      `Host validation failed for: ${host}. Hint: Set the HOMEPAGE_ALLOWED_HOSTS environment variable to allow requests from this host / port.`,
+const authEnabled = Boolean(process.env.HOMEPAGE_AUTH_ENABLED);
+const authSecret = process.env.NEXTAUTH_SECRET || process.env.HOMEPAGE_AUTH_SECRET;
+let warnedAllowedHosts = false;
+
+export async function middleware(req) {
+  if (!warnedAllowedHosts && process.env.HOMEPAGE_ALLOWED_HOSTS) {
+    warnedAllowedHosts = true;
+    console.warn(
+      "HOMEPAGE_ALLOWED_HOSTS is deprecated. To secure a publicly accessible homepage, configure authentication instead.",
     );
-    return NextResponse.json({ error: "Host validation failed. See logs for more details." }, { status: 400 });
   }
+
+  if (authEnabled) {
+    const token = await getToken({ req, secret: authSecret });
+    if (!token) {
+      const signInUrl = new URL("/auth/signin", req.url);
+      signInUrl.searchParams.set("callbackUrl", "/");
+      return NextResponse.redirect(signInUrl);
+    }
+  }
+
   return NextResponse.next();
 }
 
 export const config = {
-  matcher: "/api/:path*",
+  // Protect all app and API routes; allow Next.js internals, public assets, auth pages, and NextAuth endpoints.
+  matcher: [
+    "/",
+    "/((?!_next/static|_next/image|favicon.ico|robots.txt|manifest.json|sitemap.xml|icons/|api/auth|auth/).*)",
+  ],
 };

src/middleware.test.js

@@ -1,70 +1,89 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-const { NextResponse } = vi.hoisted(() => ({
+const { NextResponse, getToken } = vi.hoisted(() => ({
   NextResponse: {
-    json: vi.fn((body, init) => ({ type: "json", body, init })),
     next: vi.fn(() => ({ type: "next" })),
+    redirect: vi.fn((url) => ({ type: "redirect", url })),
   },
+  getToken: vi.fn(),
 }));
 
 vi.mock("next/server", () => ({ NextResponse }));
+vi.mock("next-auth/jwt", () => ({ getToken }));
 
-import { middleware } from "./middleware";
+async function loadMiddleware() {
+  vi.resetModules();
+  const mod = await import("./middleware");
+  return mod.middleware;
+}
 
-function createReq(host) {
+function createReq(url = "http://localhost:3000/") {
   return {
+    url,
     headers: {
-      get: (key) => (key === "host" ? host : null),
+      get: () => null,
     },
   };
 }
 
 describe("middleware", () => {
   const originalEnv = process.env;
-  const originalConsoleError = console.error;
+  const originalConsoleWarn = console.warn;
 
   beforeEach(() => {
     vi.clearAllMocks();
     process.env = { ...originalEnv };
-    console.error = originalConsoleError;
+    console.warn = originalConsoleWarn;
   });
 
-  it("allows requests for default localhost hosts", () => {
-    process.env.PORT = "3000";
-    const res = middleware(createReq("localhost:3000"));
+  it("allows requests when auth is disabled", async () => {
+    const middleware = await loadMiddleware();
+    const res = await middleware(createReq());
 
     expect(NextResponse.next).toHaveBeenCalled();
     expect(res).toEqual({ type: "next" });
   });
 
-  it("blocks requests when host is not allowed", () => {
-    process.env.PORT = "3000";
-    const errSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+  it("warns once when HOMEPAGE_ALLOWED_HOSTS is set, but does not block", async () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    process.env.HOMEPAGE_ALLOWED_HOSTS = "example.com";
 
-    const res = middleware(createReq("evil.com"));
-
-    expect(errSpy).toHaveBeenCalled();
-    expect(NextResponse.json).toHaveBeenCalledWith(
-      { error: "Host validation failed. See logs for more details." },
-      { status: 400 },
-    );
-    expect(res.type).toBe("json");
-    expect(res.init.status).toBe(400);
-  });
-
-  it("allows requests when HOMEPAGE_ALLOWED_HOSTS is '*'", () => {
-    process.env.HOMEPAGE_ALLOWED_HOSTS = "*";
-    const res = middleware(createReq("anything.example"));
+    const middleware = await loadMiddleware();
+    const res1 = await middleware(createReq());
+    const res2 = await middleware(createReq());
 
+    expect(warnSpy).toHaveBeenCalledTimes(1);
     expect(NextResponse.next).toHaveBeenCalled();
-    expect(res).toEqual({ type: "next" });
+    expect(res1).toEqual({ type: "next" });
+    expect(res2).toEqual({ type: "next" });
   });
 
-  it("allows requests when host is included in HOMEPAGE_ALLOWED_HOSTS", () => {
-    process.env.PORT = "3000";
-    process.env.HOMEPAGE_ALLOWED_HOSTS = "example.com:3000,other:3000";
+  it("redirects to signin when auth is enabled and no token is present", async () => {
+    process.env.HOMEPAGE_AUTH_ENABLED = "true";
+    process.env.HOMEPAGE_AUTH_SECRET = "secret";
 
-    const res = middleware(createReq("example.com:3000"));
+    getToken.mockResolvedValueOnce(null);
+
+    const middleware = await loadMiddleware();
+    const res = await middleware(createReq("http://localhost:3000/some"));
+
+    expect(getToken).toHaveBeenCalledWith({
+      req: expect.objectContaining({ url: "http://localhost:3000/some" }),
+      secret: "secret",
+    });
+    expect(NextResponse.redirect).toHaveBeenCalled();
+    expect(res.type).toBe("redirect");
+    expect(String(res.url)).toContain("/auth/signin");
+  });
+
+  it("allows requests when auth is enabled and a token is present", async () => {
+    process.env.HOMEPAGE_AUTH_ENABLED = "true";
+    process.env.HOMEPAGE_AUTH_SECRET = "secret";
+
+    getToken.mockResolvedValueOnce({ sub: "user" });
+
+    const middleware = await loadMiddleware();
+    const res = await middleware(createReq("http://localhost:3000/"));
 
     expect(NextResponse.next).toHaveBeenCalled();
     expect(res).toEqual({ type: "next" });

src/pages/_app.jsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/jsx-props-no-spreading */
+import { SessionProvider } from "next-auth/react";
 import { appWithTranslation } from "next-i18next";
 import Head from "next/head";
 import "styles/globals.css";
@@ -69,6 +70,7 @@ const tailwindSafelist = [
 
 function MyApp({ Component, pageProps }) {
   return (
+    <SessionProvider session={pageProps.session}>
       <SWRConfig
         value={{
           fetcher: (resource, init) => fetch(resource, init).then((res) => res.json()),
@@ -91,6 +93,7 @@ function MyApp({ Component, pageProps }) {
           </ThemeProvider>
         </ColorProvider>
       </SWRConfig>
+    </SessionProvider>
   );
 }
 

src/pages/api/auth/[...nextauth].js

@@ -0,0 +1,114 @@
+import { timingSafeEqual } from "node:crypto";
+
+import NextAuth from "next-auth";
+import CredentialsProvider from "next-auth/providers/credentials";
+
+const authEnabled = Boolean(process.env.HOMEPAGE_AUTH_ENABLED);
+const issuer = process.env.HOMEPAGE_OIDC_ISSUER;
+const clientId = process.env.HOMEPAGE_OIDC_CLIENT_ID;
+const clientSecret = process.env.HOMEPAGE_OIDC_CLIENT_SECRET;
+const homepageAuthSecret = process.env.HOMEPAGE_AUTH_SECRET;
+const homepageExternalUrl = process.env.HOMEPAGE_EXTERNAL_URL;
+const homepageAuthPassword = process.env.HOMEPAGE_AUTH_PASSWORD;
+
+// Map HOMEPAGE_* envs to what NextAuth expects
+if (!process.env.NEXTAUTH_SECRET && homepageAuthSecret) {
+  process.env.NEXTAUTH_SECRET = homepageAuthSecret;
+}
+if (!process.env.NEXTAUTH_URL && homepageExternalUrl) {
+  process.env.NEXTAUTH_URL = homepageExternalUrl;
+}
+
+const defaultScope = process.env.HOMEPAGE_OIDC_SCOPE || "openid email profile";
+const cleanedIssuer = issuer ? issuer.replace(/\/+$/, "") : issuer;
+const hasOidcConfig = Boolean(issuer && clientId && clientSecret);
+const hasAnyOidcConfig = Boolean(issuer || clientId || clientSecret);
+
+if (authEnabled) {
+  if (hasOidcConfig) {
+    if (!process.env.NEXTAUTH_SECRET || !process.env.NEXTAUTH_URL) {
+      throw new Error("OIDC auth is enabled but required settings are missing.");
+    }
+  } else if (hasAnyOidcConfig) {
+    throw new Error("OIDC auth is enabled but required settings are missing.");
+  } else if (!homepageAuthPassword || !process.env.NEXTAUTH_SECRET) {
+    throw new Error("Password auth is enabled but required settings are missing.");
+  }
+}
+
+let providers = [];
+if (authEnabled) {
+  if (hasOidcConfig) {
+    providers = [
+      {
+        id: "homepage-oidc",
+        name: process.env.HOMEPAGE_OIDC_NAME || "Homepage OIDC",
+        type: "oauth",
+        idToken: true,
+        issuer: cleanedIssuer,
+        wellKnown: `${cleanedIssuer}/.well-known/openid-configuration`,
+        clientId,
+        clientSecret,
+        authorization: {
+          params: {
+            scope: defaultScope,
+          },
+        },
+        profile(profile) {
+          return {
+            id: profile.sub ?? profile.id ?? profile.user_id ?? profile.uid ?? profile.email,
+            name: profile.name ?? profile.preferred_username ?? profile.nickname ?? profile.email,
+            email: profile.email ?? null,
+            image: profile.picture ?? null,
+          };
+        },
+      },
+    ];
+  } else {
+    providers = [
+      CredentialsProvider({
+        name: "Password",
+        credentials: {
+          password: { label: "Password", type: "password" },
+        },
+        async authorize(credentials) {
+          const provided = credentials?.password ?? "";
+          const expected = homepageAuthPassword ?? "";
+          if (!expected || provided.length !== expected.length) {
+            return null;
+          }
+          const isMatch = timingSafeEqual(Buffer.from(provided), Buffer.from(expected));
+          if (!isMatch) {
+            return null;
+          }
+          return {
+            id: "homepage",
+            name: "Homepage",
+          };
+        },
+      }),
+    ];
+  }
+}
+
+export default NextAuth({
+  providers,
+  session: {
+    strategy: "jwt",
+  },
+  secret: process.env.NEXTAUTH_SECRET,
+  pages: {
+    signIn: "/auth/signin",
+  },
+  debug: true,
+  logger: {
+    error: (...args) => console.error("[nextauth][error]", ...args),
+    warn: (...args) => console.warn("[nextauth][warn]", ...args),
+    debug: (...args) => console.debug("[nextauth][debug]", ...args),
+  },
+  events: {
+    signIn: async (message) => console.debug("[nextauth][event][signIn]", message),
+    signOut: async (message) => console.debug("[nextauth][event][signOut]", message),
+    error: async (message) => console.error("[nextauth][event][error]", message),
+  },
+});

src/pages/auth/signin.jsx

@@ -0,0 +1,210 @@
+import classNames from "classnames";
+import { getProviders, signIn } from "next-auth/react";
+import { useRouter } from "next/router";
+import { useEffect, useMemo, useState } from "react";
+import { BiShieldQuarter } from "react-icons/bi";
+
+import { getSettings } from "utils/config/config";
+
+export default function SignIn({ providers, settings }) {
+  const router = useRouter();
+  const [password, setPassword] = useState("");
+  const theme = settings?.theme || "dark";
+  const color = settings?.color || "slate";
+  const title = settings?.title || "Homepage";
+  const callbackUrl = useMemo(() => {
+    const value = router.query?.callbackUrl;
+    return typeof value === "string" ? value : "/";
+  }, [router.query?.callbackUrl]);
+  const error = router.query?.error;
+
+  let backgroundImage = "";
+  let opacity = settings?.backgroundOpacity ?? 0;
+  let backgroundBlur = false;
+  let backgroundSaturate = false;
+  let backgroundBrightness = false;
+
+  if (settings?.background) {
+    const bg = settings.background;
+    if (typeof bg === "object") {
+      backgroundImage = bg.image || "";
+      if (bg.opacity !== undefined) {
+        opacity = 1 - bg.opacity / 100;
+      }
+      backgroundBlur = bg.blur !== undefined;
+      backgroundSaturate = bg.saturate !== undefined;
+      backgroundBrightness = bg.brightness !== undefined;
+    } else {
+      backgroundImage = bg;
+    }
+  }
+
+  useEffect(() => {
+    const html = document.documentElement;
+    const body = document.body;
+
+    html.classList.remove("dark", "scheme-dark", "scheme-light");
+    html.classList.toggle("dark", theme === "dark");
+    html.classList.add(theme === "dark" ? "scheme-dark" : "scheme-light");
+
+    const desiredThemeClass = `theme-${color}`;
+    const themeClassesToRemove = Array.from(html.classList).filter(
+      (cls) => cls.startsWith("theme-") && cls !== desiredThemeClass,
+    );
+    if (themeClassesToRemove.length) {
+      html.classList.remove(...themeClassesToRemove);
+    }
+    if (!html.classList.contains(desiredThemeClass)) {
+      html.classList.add(desiredThemeClass);
+    }
+
+    body.style.backgroundImage = "";
+    body.style.backgroundColor = "";
+    body.style.backgroundAttachment = "";
+  }, [color, theme]);
+
+  if (!providers || Object.keys(providers).length === 0) {
+    return (
+      <>
+        {backgroundImage && (
+          <div
+            id="background"
+            aria-hidden="true"
+            style={{
+              backgroundImage: `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${backgroundImage}')`,
+            }}
+          />
+        )}
+        <main
+          className={classNames(
+            "relative flex min-h-screen items-center justify-center px-6 py-12",
+            backgroundBlur &&
+              `backdrop-blur${settings?.background?.blur?.length ? `-${settings.background.blur}` : ""}`,
+            backgroundSaturate && `backdrop-saturate-${settings.background.saturate}`,
+            backgroundBrightness && `backdrop-brightness-${settings.background.brightness}`,
+          )}
+        >
+          <div className="relative w-full max-w-xl overflow-hidden rounded-3xl border border-white/40 bg-white/80 p-10 text-center shadow-2xl shadow-black/10 dark:border-white/10 dark:bg-slate-900/70">
+            <div
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-r from-theme-500/20 via-theme-500/5 to-transparent"
+            />
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-theme-500/15 text-theme-600 dark:text-theme-300">
+              <BiShieldQuarter className="h-6 w-6" />
+            </div>
+            <h1 className="mt-6 text-2xl font-semibold text-gray-900 dark:text-slate-100">
+              Authentication not configured
+            </h1>
+            <p className="mt-3 text-sm text-gray-600 dark:text-slate-400">OIDC is disabled or misconfigured.</p>
+          </div>
+        </main>
+      </>
+    );
+  }
+
+  const passwordProvider = providers
+    ? Object.values(providers).find((provider) => provider.type === "credentials")
+    : null;
+  const hasPasswordProvider = Boolean(passwordProvider);
+
+  return (
+    <>
+      {backgroundImage && (
+        <div
+          id="background"
+          aria-hidden="true"
+          style={{
+            backgroundImage: `linear-gradient(rgb(var(--bg-color) / ${opacity}), rgb(var(--bg-color) / ${opacity})), url('${backgroundImage}')`,
+          }}
+        />
+      )}
+      <main className="relative flex min-h-screen items-center justify-center px-6 py-12">
+        <div
+          className={classNames(
+            "relative w-full max-w-4xl overflow-hidden rounded-3xl border border-white/50 bg-white/80 shadow-2xl shadow-black/10 backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/70",
+            backgroundBlur &&
+              `backdrop-blur${settings?.background?.blur?.length ? `-${settings.background.blur}` : ""}`,
+            backgroundSaturate && `backdrop-saturate-${settings.background.saturate}`,
+            backgroundBrightness && `backdrop-brightness-${settings.background.brightness}`,
+          )}
+        >
+          <div className="pointer-events-none absolute -left-24 -top-20 h-64 w-64 rounded-full bg-theme-500/20 blur-3xl" />
+          <div className="pointer-events-none absolute -bottom-24 right-0 h-72 w-72 rounded-full bg-theme-500/10 blur-3xl" />
+          <div className="grid gap-10 px-8 py-12 md:grid-cols-[1.2fr_1fr] md:px-12">
+            <section className="flex flex-col justify-between">
+              <div>
+                <div className="inline-flex items-center gap-2 rounded-full border border-theme-500/30 bg-theme-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-theme-600 dark:text-theme-300">
+                  Login Required
+                </div>
+                <h1 className="mt-6 text-3xl font-semibold text-gray-900 dark:text-slate-100">{title}</h1>
+                <p className="mt-3 text-sm text-gray-600 dark:text-slate-300">Login to view your dashboard.</p>
+              </div>
+            </section>
+
+            <section className="flex flex-col justify-center gap-6">
+              <div className="rounded-2xl border border-white/60 bg-white/70 p-6 shadow-lg shadow-black/5 dark:border-white/10 dark:bg-slate-900/70">
+                <h2 className="text-lg font-semibold text-gray-900 dark:text-slate-100">Sign in</h2>
+                <div className="mt-6 space-y-3">
+                  {hasPasswordProvider && (
+                    <form
+                      className="space-y-3"
+                      onSubmit={async (event) => {
+                        event.preventDefault();
+                        await signIn(passwordProvider?.id ?? "credentials", {
+                          redirect: true,
+                          callbackUrl,
+                          password,
+                        });
+                      }}
+                    >
+                      <label className="block text-sm font-medium text-gray-700 dark:text-slate-300">Password</label>
+                      <input
+                        type="password"
+                        name="password"
+                        value={password}
+                        onChange={(event) => setPassword(event.target.value)}
+                        autoComplete="current-password"
+                        className="w-full rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-sm text-gray-900 shadow-sm outline-none ring-0 transition focus:border-theme-500 focus:ring-2 focus:ring-theme-500/30 dark:border-slate-700 dark:bg-slate-900/60 dark:text-slate-100"
+                        required
+                      />
+                      <button
+                        type="submit"
+                        className="group w-full rounded-xl bg-theme-600 px-4 py-3 text-sm font-semibold text-white shadow-lg shadow-theme-600/20 transition hover:-translate-y-0.5 hover:bg-theme-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-theme-500"
+                      >
+                        <span className="flex items-center justify-center gap-2">Sign in &rarr;</span>
+                      </button>
+                    </form>
+                  )}
+                  {!hasPasswordProvider &&
+                    Object.values(providers).map((provider) => (
+                      <button
+                        key={provider.id}
+                        type="button"
+                        onClick={() => signIn(provider.id, { callbackUrl })}
+                        className="group w-full rounded-xl bg-theme-600 px-4 py-3 text-sm font-semibold text-white shadow-lg shadow-theme-600/20 transition hover:-translate-y-0.5 hover:bg-theme-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-theme-500"
+                      >
+                        <span className="flex items-center justify-center gap-2">Login via {provider.name} &rarr;</span>
+                      </button>
+                    ))}
+                </div>
+                {hasPasswordProvider && error && (
+                  <p className="mt-4 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-800/60 dark:bg-red-950/40 dark:text-red-200">
+                    Invalid password. Please try again.
+                  </p>
+                )}
+              </div>
+            </section>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}
+
+export async function getServerSideProps(context) {
+  const providers = await getProviders();
+  const settings = getSettings();
+  return {
+    props: { providers, settings },
+  };
+}

vitest.setup.js

@@ -8,6 +8,12 @@ afterEach(() => {
   if (typeof document !== "undefined") cleanup();
 });
 
+// Avoid NextAuth client-side fetches during unit tests.
+vi.mock("next-auth/react", () => ({
+  SessionProvider: ({ children }) => children ?? null,
+  getProviders: vi.fn(async () => ({})),
+}));
+
 // implement a couple of common formatters mocked in next-i18next
 vi.mock("next-i18next", () => ({
   // Keep app/page components importable in unit tests.