V2: Login Feature (#4701)

This PR migrates the login features from V1 into V2. --- - Login via username/password - SSO login (Google & GitHub) -- Fixed issue where users authenticating via SSO (OAuth2/SAML2) were identified by configurable username attributes (email, preferred_username, etc.), causing: - Duplicate accounts when username attributes changed - Authentication failures when claim/NameID configuration changed - Data redundancy from same user having multiple accounts - Added `sso_provider_id` column to store provider's unique identifier (OIDC sub claim / SAML2 NameID) - Added `sso_provider` column to store provider name (e.g., "google", "github", "saml2") - User.java:65-69 Backend Changes: - Updated UserRepository with findBySsoProviderAndSsoProviderId() method (UserRepository.java:25) - Modified UserService.processSSOPostLogin() to implement lookup priority: a. Find by (`ssoProvider`, `ssoProviderId`) first b. Fallback to username for backward compatibility c. Automatically migrate existing users by adding provider IDs (UserService.java:64-107) - Updated saveUserCore() to accept and store SSO provider details (UserService.java:506-566) OAuth2 Integration: - CustomOAuth2UserService: Extracts OIDC sub claim and registration ID (CustomOAuth2UserService.java:49-59) - CustomOAuth2AuthenticationSuccessHandler: Passes provider info to processSSOPostLogin() (CustomOAuth2AuthenticationSuccessHandler.java:95-108) SAML2 Integration: - CustomSaml2AuthenticationSuccessHandler: Extracts NameID from SAML2 assertion (CustomSaml2AuthenticationSuccessHandler.java:120-133) --- - Configurable Rate Limiting Changes: - Added RateLimit configuration class to ApplicationProperties.Security (ApplicationProperties.java:314-317) - Made reset schedule configurable: security.rate-limit.reset-schedule (default: "0 0 0 * * MON") - Made max requests configurable: security.rate-limit.max-requests (default: 1000) - Updated RateLimitResetScheduler to use @Scheduled(cron = "${security.rate-limit.reset-schedule:0 0 0 * * MON}") (RateLimitResetScheduler.java:16) - Updated SecurityConfiguration.rateLimitingFilter() to use configured value (SecurityConfiguration.java:377) --- - Enable access without security features Backend: - Added /api/v1/config to permitAll endpoints (SecurityConfiguration.java:261) - Config endpoint already returns enableLogin status (ConfigController.java:60) Frontend: - AuthProvider now checks enableLogin before attempting JWT validation (UseSession.tsx:98-112) - If enableLogin=false, skips authentication entirely and sets session=null - Landing component bypasses auth check when enableLogin=false (Landing.tsx:42-46) - Added createAnonymousUser() and createAnonymousSession() utilities (springAuthClient.ts:440-464) Closes #3046 --- ## Checklist ### General - [x] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [x] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [x] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [x] I have performed a self-review of my own code - [x] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [x] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. --------- Signed-off-by: dependabot[bot] <[email protected]> Signed-off-by: stirlingbot[bot] <stirlingbot[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ludy <[email protected]> Co-authored-by: EthanHealy01 <[email protected]> Co-authored-by: Ethan <[email protected]> Co-authored-by: Anthony Stirling <[email protected]> Co-authored-by: stirlingbot[bot] <195170888+stirlingbot[bot]@users.noreply.github.com>
2026-07-16 11:23:10 +02:00 · 2025-10-24 10:49:52 +01:00
parent c9eee00d66
commit 848ff9688b
65 changed files with 3991 additions and 288 deletions
@@ -436,6 +436,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=18"
      },
@@ -482,6 +483,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=18"
      }
@@ -505,6 +507,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/core/-/core-1.3.14.tgz",
      "integrity": "sha512-lE/vfhA53CxamaCfGWEibrEPr+JeZT42QCF+cOELUwv4+Zt6b+IE6+4wsznx/8wjjJYwllXJ3GJ/un1UzTqARw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/engines": "1.3.14",
        "@embedpdf/models": "1.3.14"
@@ -585,6 +588,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-history/-/plugin-history-1.3.14.tgz",
      "integrity": "sha512-77hnNLp0W0FHw8lT7SeqzCgp8bOClfeOAPZdcInu/jPDhVASUGYbtE/0fkLhiaqPH7kyMirNCLif4sF6n4b5vg==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.3.14"
      },
@@ -601,6 +605,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-interaction-manager/-/plugin-interaction-manager-1.3.14.tgz",
      "integrity": "sha512-nR0ZxNoTQtGqOHhweFh6QJ+nUJ4S4Ag1wWur6vAUAi8U95HUOfZhOEa0polZo0zR9WmmblGqRWjFM+mVSOoi1w==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.3.14"
      },
@@ -617,6 +622,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-loader/-/plugin-loader-1.3.14.tgz",
      "integrity": "sha512-KoJX1MacEWE2DrO1OeZeG/Ehz76//u+ida/xb4r9BfwqAp5TfYlksq09cOvcF8LMW5FY4pbAL+AHKI1Hjz+HNA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.3.14"
      },
@@ -651,6 +657,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-render/-/plugin-render-1.3.14.tgz",
      "integrity": "sha512-IPj7GCQXJBsY++JaU+z7y+FwX5NaDBj4YYV6hsHNtSGf42Y1AdlwJzDYetivG2bA84xmk7KgD1X2Y3eIFBhjwA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.3.14"
      },
@@ -683,6 +690,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-scroll/-/plugin-scroll-1.3.14.tgz",
      "integrity": "sha512-fQbt7OlRMLQJMuZj/Bzh0qpRxMw1ld5Qe/OTw8N54b/plljnFA52joE7cITl3H03huWWyHS3NKOScbw7f34dog==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.3.14"
      },
@@ -717,6 +725,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-selection/-/plugin-selection-1.3.14.tgz",
      "integrity": "sha512-EXENuaAsse3rT6cjA1nYzyrNvoy62ojJl28wblCng6zcs3HSlGPemIQZAvaYKPUxoY608M+6nKlcMQ5neRnk/A==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.3.14"
      },
@@ -788,6 +797,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-viewport/-/plugin-viewport-1.3.14.tgz",
      "integrity": "sha512-mfJ7EbbU68eKk6oFvQ4ozGJNpxUxWbjQ5Gm3uuB+Gj5/tWgBocBOX36k/9LgivEEeX7g2S0tOgyErljApmH8Vg==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.3.14"
      },
@@ -941,6 +951,7 @@
      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.18.3",
        "@emotion/babel-plugin": "^11.13.5",
@@ -984,6 +995,7 @@
      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.18.3",
        "@emotion/babel-plugin": "^11.13.5",
@@ -2017,6 +2029,7 @@
      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.1.tgz",
      "integrity": "sha512-OYfxn9cTv+K6RZ8+Ozn/HDQXkB8Fmn+KJJt5lxyFDP9F09EHnC59Ldadv1LyUZVBGtNqz4sn6b3vBShbxwAmYw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@floating-ui/react": "^0.27.16",
        "clsx": "^2.1.1",
@@ -2067,6 +2080,7 @@
      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.1.tgz",
      "integrity": "sha512-lQutBS+Q0iz/cNFvdrsYassPWo3RtWcmDGJeOtKfHigLzFOhxUuLOkQgepDbMf3WcVMB/tist6Px1PQOv57JTw==",
      "license": "MIT",
+      "peer": true,
      "peerDependencies": {
        "react": "^18.x || ^19.x"
      }
@@ -2134,6 +2148,7 @@
      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.2.tgz",
      "integrity": "sha512-qXvbnawQhqUVfH1LMgMaiytP+ZpGoYhnGl7yYq2x57GYzcFL/iPzSZ3L30tlbwEjSVKNYcbiKO8tANR1tadjUg==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.28.3",
        "@mui/core-downloads-tracker": "^7.3.2",
@@ -2326,6 +2341,203 @@
        }
      }
    },
+    "node_modules/@napi-rs/canvas": {
+      "version": "0.1.80",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.80.tgz",
+      "integrity": "sha512-DxuT1ClnIPts1kQx8FBmkk4BQDTfI5kIzywAaMjQSXfNnra5UFU9PwurXrl+Je3bJ6BGsp/zmshVVFbCmyI+ww==",
+      "license": "MIT",
+      "optional": true,
+      "workspaces": [
+        "e2e/*"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "0.1.80",
+        "@napi-rs/canvas-darwin-arm64": "0.1.80",
+        "@napi-rs/canvas-darwin-x64": "0.1.80",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.80",
+        "@napi-rs/canvas-linux-arm64-gnu": "0.1.80",
+        "@napi-rs/canvas-linux-arm64-musl": "0.1.80",
+        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.80",
+        "@napi-rs/canvas-linux-x64-gnu": "0.1.80",
+        "@napi-rs/canvas-linux-x64-musl": "0.1.80",
+        "@napi-rs/canvas-win32-x64-msvc": "0.1.80"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "0.1.80",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.80.tgz",
+      "integrity": "sha512-sk7xhN/MoXeuExlggf91pNziBxLPVUqF2CAVnB57KLG/pz7+U5TKG8eXdc3pm0d7Od0WreB6ZKLj37sX9muGOQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "0.1.80",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.80.tgz",
+      "integrity": "sha512-O64APRTXRUiAz0P8gErkfEr3lipLJgM6pjATwavZ22ebhjYl/SUbpgM0xcWPQBNMP1n29afAC/Us5PX1vg+JNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "0.1.80",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.80.tgz",
+      "integrity": "sha512-FqqSU7qFce0Cp3pwnTjVkKjjOtxMqRe6lmINxpIZYaZNnVI0H5FtsaraZJ36SiTHNjZlUB69/HhxNDT1Aaa9vA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "0.1.80",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.80.tgz",
+      "integrity": "sha512-eyWz0ddBDQc7/JbAtY4OtZ5SpK8tR4JsCYEZjCE3dI8pqoWUC8oMwYSBGCYfsx2w47cQgQCgMVRVTFiiO38hHQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "0.1.80",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.80.tgz",
+      "integrity": "sha512-qwA63t8A86bnxhuA/GwOkK3jvb+XTQaTiVML0vAWoHyoZYTjNs7BzoOONDgTnNtr8/yHrq64XXzUoLqDzU+Uuw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "0.1.80",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.80.tgz",
+      "integrity": "sha512-1XbCOz/ymhj24lFaIXtWnwv/6eFHXDrjP0jYkc6iHQ9q8oXKzUX1Lc6bu+wuGiLhGh2GS/2JlfORC5ZcXimRcg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "0.1.80",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.80.tgz",
+      "integrity": "sha512-XTzR125w5ZMs0lJcxRlS1K3P5RaZ9RmUsPtd1uGt+EfDyYMu4c6SEROYsxyatbbu/2+lPe7MPHOO/0a0x7L/gw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "0.1.80",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.80.tgz",
+      "integrity": "sha512-BeXAmhKg1kX3UCrJsYbdQd3hIMDH/K6HnP/pG2LuITaXhXBiNdh//TVVVVCBbJzVQaV5gK/4ZOCMrQW9mvuTqA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "0.1.80",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.80.tgz",
+      "integrity": "sha512-x0XvZWdHbkgdgucJsRxprX/4o4sEed7qo9rCQA9ugiS9qE2QvP0RIiEugtZhfLH3cyI+jIRFJHV4Fuz+1BHHMg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "0.1.80",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.80.tgz",
+      "integrity": "sha512-Z8jPsM6df5V8B1HrCHB05+bDiCxjE9QA//3YrkKIdVDEwn5RKaqOxCJDRJkl48cJbylcrJbW4HxZbTte8juuPg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3379,6 +3591,7 @@
      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.10.4",
        "@babel/runtime": "^7.12.5",
@@ -3702,6 +3915,7 @@
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.13.tgz",
      "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "csstype": "^3.0.2"
      }
@@ -3712,6 +3926,7 @@
      "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "peerDependencies": {
        "@types/react": "^19.0.0"
      }
@@ -3772,6 +3987,7 @@
      "integrity": "sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.44.1",
        "@typescript-eslint/types": "8.44.1",
@@ -3971,6 +4187,275 @@
        "url": "https://opencollective.com/eslint"
      }
    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+      "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+      "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+      "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+      "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+      "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+      "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+      "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+      "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+      "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+      "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+      "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+      "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+      "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
+      "integrity": "sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz",
+      "integrity": "sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+      "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+      "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+      "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+      "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
    "node_modules/@vitejs/plugin-react-swc": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-4.1.0.tgz",
@@ -4216,7 +4701,6 @@
      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.21.tgz",
      "integrity": "sha512-3ah7sa+Cwr9iiYEERt9JfZKPw4A2UlbY8RbbnH2mGCE8NwHkhmlZt2VsH0oDA3P08X3jJd29ohBDtX+TbD9AsA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/shared": "3.5.21"
      }
@@ -4226,7 +4710,6 @@
      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.21.tgz",
      "integrity": "sha512-+DplQlRS4MXfIf9gfD1BOJpk5RSyGgGXD/R+cumhe8jdjUcq/qlxDawQlSI8hCKupBlvM+3eS1se5xW+SuNAwA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/reactivity": "3.5.21",
        "@vue/shared": "3.5.21"
@@ -4237,7 +4720,6 @@
      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.21.tgz",
      "integrity": "sha512-3M2DZsOFwM5qI15wrMmNF5RJe1+ARijt2HM3TbzBbPSuBHOQpoidE+Pa+XEaVN+czbHf81ETRoG1ltztP2em8w==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/reactivity": "3.5.21",
        "@vue/runtime-core": "3.5.21",
@@ -4250,7 +4732,6 @@
      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.21.tgz",
      "integrity": "sha512-qr8AqgD3DJPJcGvLcJKQo2tAc8OnXRcfxhOJCPF+fcfn5bBGz7VCcO7t+qETOPxpWK1mgysXvVT/j+xWaHeMWA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/compiler-ssr": "3.5.21",
        "@vue/shared": "3.5.21"
@@ -4278,6 +4759,7 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -4952,6 +5434,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.8.3",
        "caniuse-lite": "^1.0.30001741",
@@ -5955,7 +6438,8 @@
      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1508733.tgz",
      "integrity": "sha512-QJ1R5gtck6nDcdM+nlsaJXcelPEI7ZxSMw1ujHpO1c4+9l+Nue5qlebi9xO1Z2MGr92bFOQTW7/rrheh5hHxDg==",
      "dev": true,
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
    },
    "node_modules/dezalgo": {
      "version": "1.0.4",
@@ -6350,6 +6834,7 @@
      "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -6521,6 +7006,7 @@
      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@rtsao/scc": "^1.1.0",
        "array-includes": "^3.1.9",
@@ -7794,6 +8280,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.27.6"
      },
@@ -8590,6 +9077,7 @@
      "integrity": "sha512-lIHeR1qlIRrIN5VMccd8tI2Sgw6ieYXSVktcSHaNe3Z5nE/tcPQYQWOq00wxMvYOsz+73eAkNenVvmPC6bba9A==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@asamuzakjp/dom-selector": "^6.5.4",
        "cssstyle": "^5.3.0",
@@ -10378,6 +10866,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -10669,6 +11158,7 @@
      "resolved": "https://registry.npmjs.org/preact/-/preact-10.27.2.tgz",
      "integrity": "sha512-5SYSgFKSyhCbk6SrXyMpqjb5+MQBgfvEKE/OC+PujcY34sOpqtr+0AZQtPYx5IA6VxynQ7rUPCtKzyovpj9Bpg==",
      "license": "MIT",
+      "peer": true,
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/preact"
@@ -11041,6 +11531,7 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
      "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -11050,6 +11541,7 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
      "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "scheduler": "^0.26.0"
      },
@@ -12687,6 +13179,7 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -12969,6 +13462,7 @@
      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
      "devOptional": true,
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -13051,6 +13545,7 @@
      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "napi-postinstall": "^0.3.0"
      },
@@ -13270,6 +13765,7 @@
      "integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "esbuild": "^0.25.0",
        "fdir": "^6.5.0",
@@ -13401,6 +13897,7 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -13414,6 +13911,7 @@
      "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@types/chai": "^5.2.2",
        "@vitest/expect": "3.2.4",
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23" fill="none">
+  <path d="M0 0h10.5v10.5H0V0z" fill="#F25022"/>
+  <path d="M12.5 0H23v10.5H12.5V0z" fill="#7FBA00"/>
+  <path d="M0 12.5h10.5V23H0V12.5z" fill="#00A4EF"/>
+  <path d="M12.5 12.5H23V23H12.5V12.5z" fill="#FFB900"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5 3.3125C16.5712 3.3125 14.6613 3.6924 12.8793 4.43052C11.0974 5.16864 9.47823 6.25051 8.11437 7.61437C5.35993 10.3688 3.8125 14.1046 3.8125 18C3.8125 24.4919 8.02781 29.9997 13.8588 31.9531C14.5931 32.0706 14.8281 31.6153 14.8281 31.2187V28.7366C10.7597 29.6178 9.89312 26.7684 9.89312 26.7684C9.2175 25.0647 8.26281 24.6094 8.26281 24.6094C6.92625 23.6987 8.36562 23.7281 8.36562 23.7281C9.83437 23.8309 10.6128 25.2409 10.6128 25.2409C11.8906 27.4734 14.0497 26.8125 14.8869 26.46C15.0191 25.5053 15.4009 24.8591 15.8122 24.4919C12.5516 24.1247 9.12937 22.8616 9.12937 17.2656C9.12937 15.6353 9.6875 14.3281 10.6422 13.2853C10.4953 12.9181 9.98125 11.3906 10.7891 9.40781C10.7891 9.40781 12.0228 9.01125 14.8281 10.9059C15.9884 10.5828 17.2516 10.4212 18.5 10.4212C19.7484 10.4212 21.0116 10.5828 22.1719 10.9059C24.9772 9.01125 26.2109 9.40781 26.2109 9.40781C27.0188 11.3906 26.5047 12.9181 26.3578 13.2853C27.3125 14.3281 27.8706 15.6353 27.8706 17.2656C27.8706 22.8762 24.4338 24.11 21.1584 24.4772C21.6872 24.9325 22.1719 25.8284 22.1719 27.1944V31.2187C22.1719 31.6153 22.4069 32.0853 23.1559 31.9531C28.9869 29.985 33.1875 24.4919 33.1875 18C33.1875 16.0712 32.8076 14.1613 32.0695 12.3793C31.3314 10.5974 30.2495 8.97823 28.8856 7.61437C27.5218 6.25051 25.9026 5.16864 24.1207 4.43052C22.3387 3.6924 20.4288 3.3125 18.5 3.3125Z" fill="black"/>
+</svg>
@@ -0,0 +1,14 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2781_85129)">
+<path d="M8.36055 0.789432C5.96258 1.62131 3.89457 3.20024 2.46029 5.29431C1.026 7.38838 0.301037 9.8872 0.391883 12.4237C0.482728 14.9603 1.38459 17.4008 2.96501 19.3869C4.54543 21.373 6.72109 22.8 9.17243 23.4582C11.1598 23.971 13.2419 23.9935 15.2399 23.5238C17.0499 23.1172 18.7233 22.2476 20.0962 21.0001C21.5251 19.662 22.5622 17.9597 23.0962 16.0763C23.6765 14.0282 23.7798 11.8743 23.3981 9.78006H12.2381V14.4094H18.7012C18.572 15.1478 18.2952 15.8525 17.8873 16.4814C17.4795 17.1102 16.9489 17.6504 16.3274 18.0694C15.5382 18.5915 14.6485 18.9428 13.7156 19.1007C12.7798 19.2747 11.82 19.2747 10.8843 19.1007C9.93591 18.9046 9.03874 18.5132 8.24993 17.9513C6.98271 17.0543 6.0312 15.7799 5.53118 14.3101C5.02271 12.8127 5.02271 11.1893 5.53118 9.69193C5.8871 8.64234 6.47549 7.68669 7.25243 6.89631C8.14154 5.97521 9.26718 5.3168 10.5058 4.99332C11.7445 4.66985 13.0484 4.6938 14.2743 5.06256C15.232 5.35654 16.1078 5.87019 16.8318 6.56256C17.5606 5.83756 18.2881 5.11068 19.0143 4.38193C19.3893 3.99006 19.7981 3.61693 20.1674 3.21568C19.0622 2.1872 17.765 1.38691 16.3499 0.860682C13.7731 -0.0749615 10.9536 -0.100106 8.36055 0.789432Z" fill="white"/>
+<path d="M8.3607 0.789367C10.9536 -0.100776 13.7731 -0.0762934 16.3501 0.858742C17.7654 1.38855 19.062 2.19269 20.1657 3.22499C19.7907 3.62624 19.3951 4.00124 19.0126 4.39124C18.2851 5.11749 17.5582 5.84124 16.832 6.56249C16.1079 5.87012 15.2321 5.35648 14.2745 5.06249C13.0489 4.69244 11.7451 4.66711 10.5061 4.98926C9.26712 5.31141 8.14079 5.96861 7.2507 6.88874C6.47377 7.67912 5.88538 8.63477 5.52945 9.68437L1.64258 6.67499C3.03384 3.91604 5.44273 1.80566 8.3607 0.789367Z" fill="#E33629"/>
+<path d="M0.611401 9.65654C0.820316 8.62116 1.16716 7.61847 1.64265 6.67529L5.52953 9.69217C5.02105 11.1896 5.02105 12.8129 5.52953 14.3103C4.23453 15.3103 2.9389 16.3153 1.64265 17.3253C0.452308 14.9559 0.0892746 12.2562 0.611401 9.65654Z" fill="#F8BD00"/>
+<path d="M12.2381 9.77783H23.3981C23.7799 11.8721 23.6766 14.026 23.0963 16.0741C22.5623 17.9575 21.5252 19.6597 20.0963 20.9978C18.8419 20.0191 17.5819 19.0478 16.3275 18.0691C16.9494 17.6496 17.4802 17.1089 17.8881 16.4793C18.296 15.8498 18.5726 15.1444 18.7013 14.4053H12.2381C12.2363 12.8641 12.2381 11.321 12.2381 9.77783Z" fill="#587DBD"/>
+<path d="M1.64062 17.3251C2.93687 16.3251 4.2325 15.3201 5.5275 14.3101C6.02851 15.7804 6.98138 17.0549 8.25 17.9513C9.04126 18.5106 9.94037 18.8988 10.89 19.0913C11.8257 19.2653 12.7855 19.2653 13.7212 19.0913C14.6542 18.9334 15.5439 18.5821 16.3331 18.0601C17.5875 19.0388 18.8475 20.0101 20.1019 20.9888C18.7292 22.237 17.0558 23.1073 15.2456 23.5144C13.2476 23.9841 11.1655 23.9616 9.17812 23.4488C7.60632 23.0291 6.13814 22.2893 4.86562 21.2757C3.51874 20.2063 2.41867 18.8588 1.64062 17.3251Z" fill="#319F43"/>
+</g>
+<defs>
+<clipPath id="clip0_2781_85129">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23" fill="none">
+  <path d="M0 0h10.5v10.5H0V0z" fill="#F25022"/>
+  <path d="M12.5 0H23v10.5H12.5V0z" fill="#7FBA00"/>
+  <path d="M0 12.5h10.5V23H0V12.5z" fill="#00A4EF"/>
+  <path d="M12.5 12.5H23V23H12.5V12.5z" fill="#FFB900"/>
+</svg>
@@ -3038,6 +3038,11 @@
    "enterEmail": "Enter your email",
    "enterPassword": "Enter your password",
    "loggingIn": "Logging In...",
+    "username": "Username",
+    "enterUsername": "Enter username",
+    "useEmailInstead": "Login with email",
+    "forgotPassword": "Forgot your password?",
+    "logIn": "Log In",
    "signingIn": "Signing in...",
    "login": "Login",
    "or": "Or",
@@ -3076,6 +3081,10 @@
    "passwordsDoNotMatch": "Passwords do not match",
    "passwordTooShort": "Password must be at least 6 characters long",
    "invalidEmail": "Please enter a valid email address",
+    "nameRequired": "Name is required",
+    "emailRequired": "Email is required",
+    "passwordRequired": "Password is required",
+    "confirmPasswordRequired": "Confirm password is required",
    "checkEmailConfirmation": "Check your email for a confirmation link to complete your registration.",
    "accountCreatedSuccessfully": "Account created successfully! You can now sign in.",
    "unexpectedError": "Unexpected error: {{message}}"
@@ -3974,6 +3983,34 @@
  "undoStorageError": "Undo completed but some files could not be saved to storage",
  "undoSuccess": "Operation undone successfully",
  "unsupported": "Unsupported",
+  "signup": {
+    "title": "Create an account",
+    "subtitle": "Join Stirling PDF to get started",
+    "name": "Name",
+    "email": "Email",
+    "password": "Password",
+    "confirmPassword": "Confirm password",
+    "enterName": "Enter your name",
+    "enterEmail": "Enter your email",
+    "enterPassword": "Enter your password",
+    "confirmPasswordPlaceholder": "Confirm password",
+    "or": "or",
+    "creatingAccount": "Creating Account...",
+    "signUp": "Sign Up",
+    "alreadyHaveAccount": "Already have an account? Sign in",
+    "pleaseFillAllFields": "Please fill in all fields",
+    "passwordsDoNotMatch": "Passwords do not match",
+    "passwordTooShort": "Password must be at least 6 characters long",
+    "invalidEmail": "Please enter a valid email address",
+    "checkEmailConfirmation": "Check your email for a confirmation link to complete your registration.",
+    "accountCreatedSuccessfully": "Account created successfully! You can now sign in.",
+    "unexpectedError": "Unexpected error: {{message}}",
+    "useEmailInstead": "Use Email Instead",
+    "nameRequired": "Name is required",
+    "emailRequired": "Email is required",
+    "passwordRequired": "Password is required",
+    "confirmPasswordRequired": "Please confirm your password"
+  },
  "onboarding": {
    "welcomeModal": {
      "title": "Welcome to Stirling PDF!",
@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import { Routes, Route } from "react-router-dom";
 import { RainbowThemeProvider } from "./components/shared/RainbowThemeProvider";
 import { FileContextProvider } from "./contexts/FileContext";
 import { NavigationProvider } from "./contexts/NavigationContext";
@@ -11,9 +12,15 @@ import { PreferencesProvider } from "./contexts/PreferencesContext";
 import { OnboardingProvider } from "./contexts/OnboardingContext";
 import { TourOrchestrationProvider } from "./contexts/TourOrchestrationContext";
 import ErrorBoundary from "./components/shared/ErrorBoundary";
-import HomePage from "./pages/HomePage";
 import OnboardingTour from "./components/onboarding/OnboardingTour";

+// Import auth components
+import { AuthProvider } from "./auth/UseSession";
+import Landing from "./routes/Landing";
+import Login from "./routes/Login";
+import Signup from "./routes/Signup";
+import AuthCallback from "./routes/AuthCallback";
+
 // Import global styles
 import "./styles/tailwind.css";
 import "./styles/cookieconsent.css";
@@ -44,35 +51,50 @@ const LoadingFallback = () => (
 export default function App() {
  return (
    <Suspense fallback={<LoadingFallback />}>
-      <PreferencesProvider>
+    <PreferencesProvider>
        <RainbowThemeProvider>
          <ErrorBoundary>
-            <OnboardingProvider>
-              <FileContextProvider enableUrlSync={true} enablePersistence={true}>
-                <ToolRegistryProvider>
-                  <NavigationProvider>
-                    <FilesModalProvider>
-                      <ToolWorkflowProvider>
-                        <HotkeyProvider>
-                          <SidebarProvider>
-                            <ViewerProvider>
-                              <SignatureProvider>
-                                <RightRailProvider>
-                                  <TourOrchestrationProvider>
-                                    <HomePage />
-                                    <OnboardingTour />
-                                  </TourOrchestrationProvider>
-                                </RightRailProvider>
-                              </SignatureProvider>
-                            </ViewerProvider>
-                          </SidebarProvider>
-                        </HotkeyProvider>
-                      </ToolWorkflowProvider>
-                    </FilesModalProvider>
-                  </NavigationProvider>
-                </ToolRegistryProvider>
-              </FileContextProvider>
-            </OnboardingProvider>
+            <AuthProvider>
+              <Routes>
+                {/* Auth routes - no FileContext or other providers needed */}
+                <Route path="/login" element={<Login />} />
+                <Route path="/signup" element={<Signup />} />
+                <Route path="/auth/callback" element={<AuthCallback />} />
+
+                {/* Main app routes - wrapped with all providers */}
+                <Route
+                  path="/*"
+                  element={
+                    <OnboardingProvider>
+                      <FileContextProvider enableUrlSync={true} enablePersistence={true}>
+                        <ToolRegistryProvider>
+                          <NavigationProvider>
+                            <FilesModalProvider>
+                              <ToolWorkflowProvider>
+                                <HotkeyProvider>
+                                  <SidebarProvider>
+                                    <ViewerProvider>
+                                      <SignatureProvider>
+                                        <RightRailProvider>
+                                          <TourOrchestrationProvider>
+                                            <Landing />
+                                            <OnboardingTour />
+                                          </TourOrchestrationProvider>
+                                        </RightRailProvider>
+                                        </SignatureProvider>
+                                      </ViewerProvider>
+                                    </SidebarProvider>
+                                  </HotkeyProvider>
+                                </ToolWorkflowProvider>
+                              </FilesModalProvider>
+                            </NavigationProvider>
+                          </ToolRegistryProvider>
+                        </FileContextProvider>
+                      </OnboardingProvider>
+                  }
+                />
+              </Routes>
+            </AuthProvider>
          </ErrorBoundary>
        </RainbowThemeProvider>
      </PreferencesProvider>
@@ -0,0 +1,233 @@
+import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from 'react';
+import { springAuth } from './springAuthClient';
+import type { Session, User, AuthError } from './springAuthClient';
+
+/**
+ * Auth Context Type
+ * Simplified version without SaaS-specific features (credits, subscriptions)
+ */
+interface AuthContextType {
+  session: Session | null;
+  user: User | null;
+  loading: boolean;
+  error: AuthError | null;
+  signOut: () => Promise<void>;
+  refreshSession: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType>({
+  session: null,
+  user: null,
+  loading: true,
+  error: null,
+  signOut: async () => {},
+  refreshSession: async () => {},
+});
+
+/**
+ * Auth Provider Component
+ *
+ * Manages authentication state and provides it to the entire app.
+ * Integrates with Spring Security + JWT backend.
+ */
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<AuthError | null>(null);
+
+  /**
+   * Refresh current session
+   */
+  const refreshSession = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      console.debug('[Auth] Refreshing session...');
+
+      const { data, error } = await springAuth.refreshSession();
+
+      if (error) {
+        console.error('[Auth] Session refresh error:', error);
+        setError(error);
+        setSession(null);
+      } else {
+        console.debug('[Auth] Session refreshed successfully');
+        setSession(data.session);
+      }
+    } catch (err) {
+      console.error('[Auth] Unexpected error during session refresh:', err);
+      setError(err as AuthError);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Sign out user
+   */
+  const signOut = useCallback(async () => {
+    try {
+      setError(null);
+      console.debug('[Auth] Signing out...');
+
+      const { error } = await springAuth.signOut();
+
+      if (error) {
+        console.error('[Auth] Sign out error:', error);
+        setError(error);
+      } else {
+        console.debug('[Auth] Signed out successfully');
+        setSession(null);
+      }
+    } catch (err) {
+      console.error('[Auth] Unexpected error during sign out:', err);
+      setError(err as AuthError);
+    }
+  }, []);
+
+  /**
+   * Initialize auth on mount
+   */
+  useEffect(() => {
+    let mounted = true;
+
+    const initializeAuth = async () => {
+      try {
+        console.debug('[Auth] Initializing auth...');
+
+        // First check if login is enabled
+        const configResponse = await fetch('/api/v1/config/app-config');
+        if (configResponse.ok) {
+          const config = await configResponse.json();
+
+          // If login is disabled, skip authentication entirely
+          if (config.enableLogin === false) {
+            console.debug('[Auth] Login disabled - skipping authentication');
+            if (mounted) {
+              setSession(null);
+              setLoading(false);
+            }
+            return;
+          }
+        }
+
+        // Login is enabled, proceed with normal auth check
+        const { data, error } = await springAuth.getSession();
+
+        if (!mounted) return;
+
+        if (error) {
+          console.error('[Auth] Initial session error:', error);
+          setError(error);
+        } else {
+          console.debug('[Auth] Initial session loaded:', {
+            hasSession: !!data.session,
+            userId: data.session?.user?.id,
+            email: data.session?.user?.email,
+          });
+          setSession(data.session);
+        }
+      } catch (err) {
+        console.error('[Auth] Unexpected error during auth initialization:', err);
+        if (mounted) {
+          setError(err as AuthError);
+        }
+      } finally {
+        if (mounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    initializeAuth();
+
+    // Subscribe to auth state changes
+    const { data: { subscription } } = springAuth.onAuthStateChange(
+      async (event, newSession) => {
+        if (!mounted) return;
+
+        console.debug('[Auth] Auth state change:', {
+          event,
+          hasSession: !!newSession,
+          userId: newSession?.user?.id,
+          email: newSession?.user?.email,
+          timestamp: new Date().toISOString(),
+        });
+
+        // Schedule state update
+        setTimeout(() => {
+          if (mounted) {
+            setSession(newSession);
+            setError(null);
+
+            // Handle specific events
+            if (event === 'SIGNED_OUT') {
+              console.debug('[Auth] User signed out, clearing session');
+            } else if (event === 'SIGNED_IN') {
+              console.debug('[Auth] User signed in successfully');
+            } else if (event === 'TOKEN_REFRESHED') {
+              console.debug('[Auth] Token refreshed');
+            } else if (event === 'USER_UPDATED') {
+              console.debug('[Auth] User updated');
+            }
+          }
+        }, 0);
+      }
+    );
+
+    return () => {
+      mounted = false;
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  const value: AuthContextType = {
+    session,
+    user: session?.user ?? null,
+    loading,
+    error,
+    signOut,
+    refreshSession,
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+/**
+ * Hook to access auth context
+ * Must be used within AuthProvider
+ */
+export function useAuth() {
+  const context = useContext(AuthContext);
+
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+
+  return context;
+}
+
+/**
+ * Debug hook to expose auth state for debugging
+ * Can be used in development to monitor auth state
+ */
+export function useAuthDebug() {
+  const auth = useAuth();
+
+  useEffect(() => {
+    console.debug('[Auth Debug] Current auth state:', {
+      hasSession: !!auth.session,
+      hasUser: !!auth.user,
+      loading: auth.loading,
+      hasError: !!auth.error,
+      userId: auth.user?.id,
+      email: auth.user?.email,
+    });
+  }, [auth.session, auth.user, auth.loading, auth.error]);
+
+  return auth;
+}
@@ -0,0 +1,447 @@
+/**
+ * Spring Auth Client
+ *
+ * This client integrates with the Spring Security + JWT backend.
+ * - Uses localStorage for JWT storage (sent via Authorization header)
+ * - JWT validation handled server-side
+ * - No email confirmation flow (auto-confirmed on registration)
+ */
+
+// Auth types
+export interface User {
+  id: string;
+  email: string;
+  username: string;
+  role: string;
+  enabled?: boolean;
+  is_anonymous?: boolean;
+  app_metadata?: Record<string, any>;
+}
+
+export interface Session {
+  user: User;
+  access_token: string;
+  expires_in: number;
+  expires_at?: number;
+}
+
+export interface AuthError {
+  message: string;
+  status?: number;
+}
+
+export interface AuthResponse {
+  user: User | null;
+  session: Session | null;
+  error: AuthError | null;
+}
+
+export type AuthChangeEvent =
+  | 'SIGNED_IN'
+  | 'SIGNED_OUT'
+  | 'TOKEN_REFRESHED'
+  | 'USER_UPDATED';
+
+type AuthChangeCallback = (event: AuthChangeEvent, session: Session | null) => void;
+
+class SpringAuthClient {
+  private listeners: AuthChangeCallback[] = [];
+  private sessionCheckInterval: NodeJS.Timeout | null = null;
+  private readonly SESSION_CHECK_INTERVAL = 60000; // 1 minute
+  private readonly TOKEN_REFRESH_THRESHOLD = 300000; // 5 minutes before expiry
+
+  constructor() {
+    // Start periodic session validation
+    this.startSessionMonitoring();
+  }
+
+  /**
+   * Helper to get CSRF token from cookie
+   */
+  private getCsrfToken(): string | null {
+    const cookies = document.cookie.split(';');
+    for (const cookie of cookies) {
+      const [name, value] = cookie.trim().split('=');
+      if (name === 'XSRF-TOKEN') {
+        return value;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Get current session
+   * JWT is stored in localStorage and sent via Authorization header
+   */
+  async getSession(): Promise<{ data: { session: Session | null }; error: AuthError | null }> {
+    try {
+      // Get JWT from localStorage
+      const token = localStorage.getItem('stirling_jwt');
+
+      if (!token) {
+        console.debug('[SpringAuth] getSession: No JWT in localStorage');
+        return { data: { session: null }, error: null };
+      }
+
+      // Verify with backend
+      const response = await fetch('/api/v1/auth/me', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        // Token invalid or expired - clear it
+        localStorage.removeItem('stirling_jwt');
+        console.debug('[SpringAuth] getSession: Not authenticated (status:', response.status, ')');
+        return { data: { session: null }, error: null };
+      }
+
+      const data = await response.json();
+
+      // Create session object
+      const session: Session = {
+        user: data.user,
+        access_token: token,
+        expires_in: 3600,
+        expires_at: Date.now() + 3600 * 1000,
+      };
+
+      console.debug('[SpringAuth] getSession: Session retrieved successfully');
+      return { data: { session }, error: null };
+    } catch (error) {
+      console.error('[SpringAuth] getSession error:', error);
+      // Clear potentially invalid token
+      localStorage.removeItem('stirling_jwt');
+      return {
+        data: { session: null },
+        error: { message: error instanceof Error ? error.message : 'Unknown error' },
+      };
+    }
+  }
+
+  /**
+   * Sign in with email and password
+   */
+  async signInWithPassword(credentials: {
+    email: string;
+    password: string;
+  }): Promise<AuthResponse> {
+    try {
+      const response = await fetch('/api/v1/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include', // Include cookies for CSRF
+        body: JSON.stringify({
+          username: credentials.email,
+          password: credentials.password
+        }),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        return { user: null, session: null, error: { message: error.error || 'Login failed' } };
+      }
+
+      const data = await response.json();
+      const token = data.session.access_token;
+
+      // Store JWT in localStorage
+      localStorage.setItem('stirling_jwt', token);
+      console.log('[SpringAuth] JWT stored in localStorage');
+
+      const session: Session = {
+        user: data.user,
+        access_token: token,
+        expires_in: data.session.expires_in,
+        expires_at: Date.now() + data.session.expires_in * 1000,
+      };
+
+      // Notify listeners
+      this.notifyListeners('SIGNED_IN', session);
+
+      return { user: data.user, session, error: null };
+    } catch (error) {
+      console.error('[SpringAuth] signInWithPassword error:', error);
+      return {
+        user: null,
+        session: null,
+        error: { message: error instanceof Error ? error.message : 'Login failed' },
+      };
+    }
+  }
+
+  /**
+   * Sign up new user
+   */
+  async signUp(credentials: {
+    email: string;
+    password: string;
+    options?: { data?: { full_name?: string }; emailRedirectTo?: string };
+  }): Promise<AuthResponse> {
+    try {
+      const response = await fetch('/api/v1/user/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          username: credentials.email,
+          password: credentials.password,
+        }),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        return { user: null, session: null, error: { message: error.error || 'Registration failed' } };
+      }
+
+      const data = await response.json();
+
+      // Note: Spring backend auto-confirms users (no email verification)
+      // Return user but no session (user needs to login)
+      return { user: data.user, session: null, error: null };
+    } catch (error) {
+      console.error('[SpringAuth] signUp error:', error);
+      return {
+        user: null,
+        session: null,
+        error: { message: error instanceof Error ? error.message : 'Registration failed' },
+      };
+    }
+  }
+
+  /**
+   * Sign in with OAuth provider (GitHub, Google, etc.)
+   * This redirects to the Spring OAuth2 authorization endpoint
+   */
+  async signInWithOAuth(params: {
+    provider: 'github' | 'google' | 'apple' | 'azure';
+    options?: { redirectTo?: string; queryParams?: Record<string, any> };
+  }): Promise<{ error: AuthError | null }> {
+    try {
+      // Redirect to Spring OAuth2 endpoint (Vite will proxy to backend)
+      const redirectUrl = `/oauth2/authorization/${params.provider}`;
+      console.log('[SpringAuth] Redirecting to OAuth:', redirectUrl);
+      // Use window.location.assign for full page navigation
+      window.location.assign(redirectUrl);
+      return { error: null };
+    } catch (error) {
+      return {
+        error: { message: error instanceof Error ? error.message : 'OAuth redirect failed' },
+      };
+    }
+  }
+
+  /**
+   * Sign out
+   */
+  async signOut(): Promise<{ error: AuthError | null }> {
+    try {
+      // Clear JWT from localStorage immediately
+      localStorage.removeItem('stirling_jwt');
+      console.log('[SpringAuth] JWT removed from localStorage');
+
+      const csrfToken = this.getCsrfToken();
+      const headers: HeadersInit = {};
+
+      if (csrfToken) {
+        headers['X-XSRF-TOKEN'] = csrfToken;
+      }
+
+      // Notify backend (optional - mainly for session cleanup)
+      await fetch('/api/v1/auth/logout', {
+        method: 'POST',
+        credentials: 'include',
+        headers,
+      });
+
+      // Notify listeners
+      this.notifyListeners('SIGNED_OUT', null);
+
+      return { error: null };
+    } catch (error) {
+      console.error('[SpringAuth] signOut error:', error);
+      // Still remove token even if backend call fails
+      localStorage.removeItem('stirling_jwt');
+      return {
+        error: { message: error instanceof Error ? error.message : 'Sign out failed' },
+      };
+    }
+  }
+
+  /**
+   * Refresh session token
+   */
+  async refreshSession(): Promise<{ data: { session: Session | null }; error: AuthError | null }> {
+    try {
+      const currentToken = localStorage.getItem('stirling_jwt');
+
+      if (!currentToken) {
+        return { data: { session: null }, error: { message: 'No token to refresh' } };
+      }
+
+      const response = await fetch('/api/v1/auth/refresh', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${currentToken}`,
+        },
+      });
+
+      if (!response.ok) {
+        localStorage.removeItem('stirling_jwt');
+        return { data: { session: null }, error: { message: 'Token refresh failed' } };
+      }
+
+      const refreshData = await response.json();
+      const newToken = refreshData.access_token;
+
+      // Store new token
+      localStorage.setItem('stirling_jwt', newToken);
+
+      // Get updated user info
+      const userResponse = await fetch('/api/v1/auth/me', {
+        headers: {
+          'Authorization': `Bearer ${newToken}`,
+        },
+      });
+
+      if (!userResponse.ok) {
+        localStorage.removeItem('stirling_jwt');
+        return { data: { session: null }, error: { message: 'Failed to get user info' } };
+      }
+
+      const userData = await userResponse.json();
+      const session: Session = {
+        user: userData.user,
+        access_token: newToken,
+        expires_in: 3600,
+        expires_at: Date.now() + 3600 * 1000,
+      };
+
+      // Notify listeners
+      this.notifyListeners('TOKEN_REFRESHED', session);
+
+      return { data: { session }, error: null };
+    } catch (error) {
+      console.error('[SpringAuth] refreshSession error:', error);
+      localStorage.removeItem('stirling_jwt');
+      return {
+        data: { session: null },
+        error: { message: error instanceof Error ? error.message : 'Refresh failed' },
+      };
+    }
+  }
+
+  /**
+   * Listen to auth state changes
+   */
+  onAuthStateChange(callback: AuthChangeCallback): { data: { subscription: { unsubscribe: () => void } } } {
+    this.listeners.push(callback);
+
+    return {
+      data: {
+        subscription: {
+          unsubscribe: () => {
+            this.listeners = this.listeners.filter((cb) => cb !== callback);
+          },
+        },
+      },
+    };
+  }
+
+  // Private helper methods
+
+  private notifyListeners(event: AuthChangeEvent, session: Session | null) {
+    // Use setTimeout to avoid calling callbacks synchronously
+    setTimeout(() => {
+      this.listeners.forEach((callback) => {
+        try {
+          callback(event, session);
+        } catch (error) {
+          console.error('[SpringAuth] Error in auth state change listener:', error);
+        }
+      });
+    }, 0);
+  }
+
+  private startSessionMonitoring() {
+    // Periodically check session validity
+    // Since we use HttpOnly cookies, we just need to check with the server
+    this.sessionCheckInterval = setInterval(async () => {
+      try {
+        // Try to get current session
+        const { data } = await this.getSession();
+
+        // If we have a session, proactively refresh if needed
+        // (The server will handle token expiry, but we can be proactive)
+        if (data.session) {
+          const timeUntilExpiry = (data.session.expires_at || 0) - Date.now();
+
+          // Refresh if token expires soon
+          if (timeUntilExpiry > 0 && timeUntilExpiry < this.TOKEN_REFRESH_THRESHOLD) {
+            console.log('[SpringAuth] Proactively refreshing token');
+            await this.refreshSession();
+          }
+        }
+      } catch (error) {
+        console.error('[SpringAuth] Session monitoring error:', error);
+      }
+    }, this.SESSION_CHECK_INTERVAL);
+  }
+
+  public destroy() {
+    if (this.sessionCheckInterval) {
+      clearInterval(this.sessionCheckInterval);
+    }
+  }
+}
+
+export const springAuth = new SpringAuthClient();
+
+/**
+ * Get current user
+ */
+export const getCurrentUser = async () => {
+  const { data } = await springAuth.getSession();
+  return data.session?.user || null;
+};
+
+/**
+ * Check if user is anonymous
+ */
+export const isUserAnonymous = (user: User | null) => {
+  return user?.is_anonymous === true;
+};
+
+/**
+ * Create an anonymous user object for use when login is disabled
+ * This provides a consistent User interface throughout the app
+ */
+export const createAnonymousUser = (): User => {
+  return {
+    id: 'anonymous',
+    email: 'anonymous@local',
+    username: 'Anonymous User',
+    role: 'USER',
+    enabled: true,
+    is_anonymous: true,
+    app_metadata: {
+      provider: 'anonymous',
+    },
+  };
+};
+
+/**
+ * Create an anonymous session for use when login is disabled
+ */
+export const createAnonymousSession = (): Session => {
+  return {
+    user: createAnonymousUser(),
+    access_token: '',
+    expires_in: Number.MAX_SAFE_INTEGER,
+    expires_at: Number.MAX_SAFE_INTEGER,
+  };
+};
+
+// Export auth client as default for convenience
+export default springAuth;
@@ -0,0 +1,36 @@
+import './dividerWithText/DividerWithText.css'
+
+interface TextDividerProps {
+  text?: string
+  className?: string
+  style?: React.CSSProperties
+  variant?: 'default' | 'subcategory'
+  respondsToDarkMode?: boolean
+  opacity?: number
+}
+
+export default function DividerWithText({ text, className = '', style, variant = 'default', respondsToDarkMode = true, opacity }: TextDividerProps) {
+  const variantClass = variant === 'subcategory' ? 'subcategory' : ''
+  const themeClass = respondsToDarkMode ? '' : 'force-light'
+  const styleWithOpacity = opacity !== undefined ? { ...(style || {}), ['--text-divider-opacity' as any]: opacity } : style
+
+  if (text) {
+    return (
+      <div
+        className={`text-divider ${variantClass} ${themeClass} ${className}`}
+        style={styleWithOpacity}
+      >
+        <div className="text-divider__rule" />
+        <span className="text-divider__label">{text}</span>
+        <div className="text-divider__rule" />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={`h-px my-2.5 ${themeClass} ${className}`}
+      style={styleWithOpacity}
+    />
+  )
+}
@@ -0,0 +1,159 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { BASE_PATH } from '../../constants/app';
+
+type ImageSlide = { src: string; alt?: string; cornerModelUrl?: string; title?: string; subtitle?: string; followMouseTilt?: boolean; tiltMaxDeg?: number }
+
+export default function LoginRightCarousel({
+  imageSlides = [],
+  showBackground = true,
+  initialSeconds = 5,
+  slideSeconds = 8,
+}: {
+  imageSlides?: ImageSlide[]
+  showBackground?: boolean
+  initialSeconds?: number
+  slideSeconds?: number
+}) {
+  const totalSlides = imageSlides.length
+  const [index, setIndex] = useState(0)
+  const mouse = useRef({ x: 0, y: 0 })
+
+  const durationsMs = useMemo(() => {
+    if (imageSlides.length === 0) return []
+    return imageSlides.map((_, i) => (i === 0 ? (initialSeconds ?? slideSeconds) : slideSeconds) * 1000)
+  }, [imageSlides, initialSeconds, slideSeconds])
+
+  useEffect(() => {
+    if (totalSlides <= 1) return
+    const timeout = setTimeout(() => {
+      setIndex((i) => (i + 1) % totalSlides)
+    }, durationsMs[index] ?? slideSeconds * 1000)
+    return () => clearTimeout(timeout)
+  }, [index, totalSlides, durationsMs, slideSeconds])
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      mouse.current.x = (e.clientX / window.innerWidth) * 2 - 1
+      mouse.current.y = (e.clientY / window.innerHeight) * 2 - 1
+    }
+    window.addEventListener('mousemove', onMove)
+    return () => window.removeEventListener('mousemove', onMove)
+  }, [])
+
+  function TiltImage({ src, alt, enabled, maxDeg = 6 }: { src: string; alt?: string; enabled: boolean; maxDeg?: number }) {
+    const imgRef = useRef<HTMLImageElement | null>(null)
+
+    useEffect(() => {
+      const el = imgRef.current
+      if (!el) return
+
+      let raf = 0
+      const tick = () => {
+        if (enabled) {
+          const rotY = (mouse.current.x || 0) * maxDeg
+          const rotX = -(mouse.current.y || 0) * maxDeg
+          el.style.transform = `translateY(-2rem) rotateX(${rotX.toFixed(2)}deg) rotateY(${rotY.toFixed(2)}deg)`
+        } else {
+          el.style.transform = 'translateY(-2rem)'
+        }
+        raf = requestAnimationFrame(tick)
+      }
+      raf = requestAnimationFrame(tick)
+      return () => cancelAnimationFrame(raf)
+    }, [enabled, maxDeg])
+
+    return (
+      <img
+        ref={imgRef}
+        src={src}
+        alt={alt ?? 'Carousel slide'}
+        style={{
+          maxWidth: '86%',
+          maxHeight: '78%',
+          objectFit: 'contain',
+          borderRadius: '18px',
+          background: 'transparent',
+          transform: 'translateY(-2rem)',
+          transition: 'transform 80ms ease-out',
+          willChange: 'transform',
+          transformOrigin: '50% 50%',
+        }}
+      />
+    )
+  }
+
+  return (
+    <div style={{ position: 'relative', overflow: 'hidden', width: '100%', height: '100%' }}>
+      {showBackground && (
+        <img
+          src={`${BASE_PATH}/Login/LoginBackgroundPanel.png`}
+          alt="Background panel"
+          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
+        />
+      )}
+
+      {/* Image slides */}
+      {imageSlides.map((s, idx) => (
+        <div
+          key={s.src}
+          style={{
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transition: 'opacity 600ms ease',
+            opacity: index === idx ? 1 : 0,
+            perspective: '900px',
+          }}
+        >
+          {(s.title || s.subtitle) && (
+            <div style={{ position: 'absolute', bottom: 24 + 32, left: 0, right: 0, textAlign: 'center', padding: '0 2rem', width: '100%' }}>
+              {s.title && (
+                <div style={{ fontSize: 20, fontWeight: 800, color: '#ffffff', textShadow: '0 2px 6px rgba(0,0,0,0.25)', marginBottom: 6 }}>{s.title}</div>
+              )}
+              {s.subtitle && (
+                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.92)', textShadow: '0 1px 4px rgba(0,0,0,0.25)' }}>{s.subtitle}</div>
+              )}
+            </div>
+          )}
+          <TiltImage src={s.src} alt={s.alt} enabled={index === idx && !!s.followMouseTilt} maxDeg={s.tiltMaxDeg ?? 6} />
+
+        </div>
+      ))}
+
+      {/* Dot navigation */}
+      <div
+        style={{
+          position: 'absolute',
+          bottom: 16,
+          left: 0,
+          right: 0,
+          display: 'flex',
+          justifyContent: 'center',
+          gap: 10,
+          zIndex: 2,
+        }}
+      >
+        {Array.from({ length: totalSlides }).map((_, i) => (
+          <button
+            key={i}
+            aria-label={`Go to slide ${i + 1}`}
+            onClick={() => setIndex(i)}
+            style={{
+              width: '10px',
+              height: '12px',
+              borderRadius: '50%',
+              border: 'none',
+              cursor: 'pointer',
+              backgroundColor: i === index ? '#ffffff' : 'rgba(255,255,255,0.5)',
+              boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
+              display: 'block',
+              flexShrink: 0,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -1,9 +1,13 @@
 import React from 'react';
-import { Stack, Text, Code, Group, Badge, Alert, Loader } from '@mantine/core';
+import { Stack, Text, Code, Group, Badge, Alert, Loader, Button } from '@mantine/core';
 import { useAppConfig } from '../../../../hooks/useAppConfig';
+import { useAuth } from '../../../../auth/UseSession';
+import { useNavigate } from 'react-router-dom';

 const Overview: React.FC = () => {
  const { config, loading, error } = useAppConfig();
+  const { signOut, user } = useAuth();
+  const navigate = useNavigate();

  const renderConfigSection = (title: string, data: any) => {
    if (!data || typeof data !== 'object') return null;
@@ -54,6 +58,15 @@ const Overview: React.FC = () => {
    SSOAutoLogin: config.SSOAutoLogin,
  } : null;

+  const handleLogout = async () => {
+    try {
+      await signOut();
+      navigate('/login');
+    } catch (error) {
+      console.error('Logout error:', error);
+    }
+  };
+
  if (loading) {
    return (
      <Stack align="center" py="md">
@@ -74,10 +87,24 @@ const Overview: React.FC = () => {
  return (
    <Stack gap="lg">
      <div>
-        <Text fw={600} size="lg">Application Configuration</Text>
-        <Text size="sm" c="dimmed">
-          Current application settings and configuration details.
-        </Text>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
+          <div>
+            <Text fw={600} size="lg">Application Configuration</Text>
+            <Text size="sm" c="dimmed">
+              Current application settings and configuration details.
+            </Text>
+            {user?.email && (
+              <Text size="xs" c="dimmed" mt="0.25rem">
+                Signed in as: {user.email}
+              </Text>
+            )}
+          </div>
+          {user && (
+            <Button color="red" variant="filled" onClick={handleLogout}>
+              Log out
+            </Button>
+          )}
+        </div>
      </div>

      {config && (
@@ -0,0 +1,52 @@
+
+.text-divider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem; /* 12px */
+  margin-top: 0.375rem; /* 6px */
+  margin-bottom: 0.5rem; /* 8px */
+}
+
+.text-divider .text-divider__rule {
+  height: 0.0625rem; /* 1px */
+  flex: 1 1 0%;
+  background-color: rgb(var(--text-divider-rule-rgb, var(--gray-200)) / var(--text-divider-opacity, 1));
+}
+
+.text-divider .text-divider__label {
+  color: rgb(var(--text-divider-label-rgb, var(--gray-400)) / var(--text-divider-opacity, 1));
+  font-size: 0.75rem; /* 12px */
+  white-space: nowrap;
+}
+
+.text-divider.subcategory {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.text-divider.subcategory .text-divider__rule {
+  background-color: var(--tool-subcategory-rule-color);
+}
+
+.text-divider.subcategory .text-divider__label {
+  color: var(--tool-subcategory-text-color);
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+/* Force light theme colors regardless of dark mode */
+.text-divider.force-light .text-divider__rule {
+  background-color: rgb(var(--text-divider-rule-rgb-light, var(--gray-200)) / var(--text-divider-opacity, 1));
+}
+
+.text-divider.force-light .text-divider__label {
+  color: rgb(var(--text-divider-label-rgb-light, var(--gray-400)) / var(--text-divider-opacity, 1));
+}
+
+.text-divider.subcategory.force-light .text-divider__rule {
+  background-color: var(--tool-subcategory-rule-color-light);
+}
+
+.text-divider.subcategory.force-light .text-divider__label {
+  color: var(--tool-subcategory-text-color-light);
+}
@@ -0,0 +1,43 @@
+import { BASE_PATH } from '../../constants/app';
+
+export type LoginCarouselSlide = {
+  src: string
+  alt?: string
+  title?: string
+  subtitle?: string
+  cornerModelUrl?: string
+  followMouseTilt?: boolean
+  tiltMaxDeg?: number
+}
+
+export const loginSlides: LoginCarouselSlide[] = [
+  {
+    src: `${BASE_PATH}/Login/Firstpage.png`,
+    alt: 'Stirling PDF overview',
+    title: 'Your one-stop-shop for all your PDF needs.',
+    subtitle:
+      'A privacy-first cloud suite for PDFs that lets you convert, sign, redact, and manage documents, along with 50+ other powerful tools.',
+    followMouseTilt: true,
+    tiltMaxDeg: 5,
+  },
+  {
+    src: `${BASE_PATH}/Login/AddToPDF.png`,
+    alt: 'Edit PDFs',
+    title: 'Edit PDFs to display/secure the information you want',
+    subtitle:
+      'With over a dozen tools to help you redact, sign, read and manipulate PDFs, you will be sure to find what you are looking for.',
+    followMouseTilt: true,
+    tiltMaxDeg: 5,
+  },
+  {
+    src: `${BASE_PATH}/Login/SecurePDF.png`,
+    alt: 'Secure PDFs',
+    title: 'Protect sensitive information in your PDFs',
+    subtitle:
+      'Add passwords, redact content, and manage certificates with ease.',
+    followMouseTilt: true,
+    tiltMaxDeg: 5,
+  },
+]
+
+export default loginSlides
@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
 import { usePreferences } from './PreferencesContext';
 import { useMediaQuery } from '@mantine/hooks';
+import { useAuth } from '../auth/UseSession';

 interface OnboardingContextValue {
  isOpen: boolean;
@@ -18,6 +19,7 @@ const OnboardingContext = createContext<OnboardingContextValue | undefined>(unde

 export const OnboardingProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { preferences, updatePreference } = usePreferences();
+  const { session, loading } = useAuth();
  const [isOpen, setIsOpen] = useState(false);
  const [currentStep, setCurrentStep] = useState(0);
  const [showWelcomeModal, setShowWelcomeModal] = useState(false);
@@ -26,11 +28,16 @@ export const OnboardingProvider: React.FC<{ children: React.ReactNode }> = ({ ch
  // Auto-show welcome modal for first-time users after preferences load
  // Only show after user has seen the tool panel mode prompt
  // Also, don't show tour on mobile devices because it feels clunky
+  // IMPORTANT: Only show welcome modal if user is authenticated or login is disabled
  useEffect(() => {
-    if (!preferences.hasCompletedOnboarding && preferences.toolPanelModePromptSeen && !isMobile) {
-      setShowWelcomeModal(true);
+    if (!loading && !preferences.hasCompletedOnboarding && preferences.toolPanelModePromptSeen && !isMobile) {
+      // Only show welcome modal if user is authenticated (session exists)
+      // This prevents the modal from showing on login screens when security is enabled
+      if (session) {
+        setShowWelcomeModal(true);
+      }
    }
-  }, [preferences.hasCompletedOnboarding, preferences.toolPanelModePromptSeen, isMobile]);
+  }, [preferences.hasCompletedOnboarding, preferences.toolPanelModePromptSeen, isMobile, session, loading]);

  const startTour = useCallback(() => {
    setCurrentStep(0);
@@ -1,5 +1,11 @@
 import { useState, useEffect } from 'react';

+// Helper to get JWT from localStorage for Authorization header
+function getAuthHeaders(): HeadersInit {
+  const token = localStorage.getItem('stirling_jwt');
+  return token ? { 'Authorization': `Bearer ${token}` } : {};
+}
+
 export interface AppConfig {
  baseUrl?: string;
  contextPath?: string;
@@ -46,7 +52,9 @@ export function useAppConfig(): UseAppConfigReturn {
      setLoading(true);
      setError(null);
      
-      const response = await fetch('/api/v1/config/app-config');
+      const response = await fetch('/api/v1/config/app-config', {
+        headers: getAuthHeaders(),
+      });
      
      if (!response.ok) {
        throw new Error(`Failed to fetch config: ${response.status} ${response.statusText}`);
@@ -1,5 +1,11 @@
 import { useState, useEffect } from 'react';

+// Helper to get JWT from localStorage for Authorization header
+function getAuthHeaders(): HeadersInit {
+  const token = localStorage.getItem('stirling_jwt');
+  return token ? { 'Authorization': `Bearer ${token}` } : {};
+}
+
 /**
 * Hook to check if a specific endpoint is enabled
 */
@@ -24,7 +30,9 @@ export function useEndpointEnabled(endpoint: string): {
      setLoading(true);
      setError(null);

-      const response = await fetch(`/api/v1/config/endpoint-enabled?endpoint=${encodeURIComponent(endpoint)}`);
+      const response = await fetch(`/api/v1/config/endpoint-enabled?endpoint=${encodeURIComponent(endpoint)}`, {
+        headers: getAuthHeaders(),
+      });

      if (!response.ok) {
        throw new Error(`Failed to check endpoint: ${response.status} ${response.statusText}`);
@@ -80,7 +88,9 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
      // Use batch API for efficiency
      const endpointsParam = endpoints.join(',');

-      const response = await fetch(`/api/v1/config/endpoints-enabled?endpoints=${encodeURIComponent(endpointsParam)}`);
+      const response = await fetch(`/api/v1/config/endpoints-enabled?endpoints=${encodeURIComponent(endpointsParam)}`, {
+        headers: getAuthHeaders(),
+      });

      if (!response.ok) {
        throw new Error(`Failed to check endpoints: ${response.status} ${response.statusText}`);
@@ -0,0 +1,73 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../auth/UseSession'
+
+/**
+ * OAuth Callback Handler
+ *
+ * This component is rendered after OAuth providers (GitHub, Google, etc.) redirect back.
+ * The JWT is passed in the URL fragment (#access_token=...) by the Spring backend.
+ * We extract it, store in localStorage, and redirect to the home page.
+ */
+export default function AuthCallback() {
+  const navigate = useNavigate()
+  const { refreshSession } = useAuth()
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      try {
+        console.log('[AuthCallback] Handling OAuth callback...')
+
+        // Extract JWT from URL fragment (#access_token=...)
+        const hash = window.location.hash.substring(1) // Remove '#'
+        const params = new URLSearchParams(hash)
+        const token = params.get('access_token')
+
+        if (!token) {
+          console.error('[AuthCallback] No access_token in URL fragment')
+          navigate('/login', {
+            replace: true,
+            state: { error: 'OAuth login failed - no token received.' }
+          })
+          return
+        }
+
+        // Store JWT in localStorage
+        localStorage.setItem('stirling_jwt', token)
+        console.log('[AuthCallback] JWT stored in localStorage')
+
+        // Refresh session to load user info into state
+        await refreshSession()
+
+        console.log('[AuthCallback] Session refreshed, redirecting to home')
+
+        // Clear the hash from URL and redirect to home page
+        navigate('/', { replace: true })
+      } catch (error) {
+        console.error('[AuthCallback] Error:', error)
+        navigate('/login', {
+          replace: true,
+          state: { error: 'OAuth login failed. Please try again.' }
+        })
+      }
+    }
+
+    handleCallback()
+  }, [navigate, refreshSession])
+
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100vh'
+    }}>
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-3"></div>
+        <div className="text-gray-600">
+          Completing authentication...
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,62 @@
+import { Navigate, useLocation } from 'react-router-dom'
+import { useAuth } from '../auth/UseSession'
+import { useAppConfig } from '../hooks/useAppConfig'
+import HomePage from '../pages/HomePage'
+import Login from './Login'
+
+/**
+ * Landing component - Smart router based on authentication status
+ *
+ * If login is disabled: Show HomePage directly (anonymous mode)
+ * If user is authenticated: Show HomePage
+ * If user is not authenticated: Show Login or redirect to /login
+ */
+export default function Landing() {
+  const { session, loading: authLoading } = useAuth()
+  const { config, loading: configLoading } = useAppConfig()
+  const location = useLocation()
+
+  const loading = authLoading || configLoading
+
+  console.log('[Landing] State:', {
+    pathname: location.pathname,
+    loading,
+    hasSession: !!session,
+    loginEnabled: config?.enableLogin,
+  })
+
+  // Show loading while checking auth and config
+  if (loading) {
+    return (
+      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-3"></div>
+          <div className="text-gray-600">
+            Loading...
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // If login is disabled, show app directly (anonymous mode)
+  if (config?.enableLogin === false) {
+    console.debug('[Landing] Login disabled - showing app in anonymous mode')
+    return <HomePage />
+  }
+
+  // If we have a session, show the main app
+  if (session) {
+    return <HomePage />
+  }
+
+  // If we're at home route ("/"), show login directly (marketing/landing page)
+  // Otherwise navigate to login (fixes URL mismatch for tool routes)
+  const isHome = location.pathname === '/' || location.pathname === ''
+  if (isHome) {
+    return <Login />
+  }
+
+  // For non-home routes without auth, navigate to login (preserves from location)
+  return <Navigate to="/login" replace state={{ from: location }} />
+}
@@ -0,0 +1,189 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { springAuth } from '../auth/springAuthClient'
+import { useAuth } from '../auth/UseSession'
+import { useTranslation } from 'react-i18next'
+import { useDocumentMeta } from '../hooks/useDocumentMeta'
+import AuthLayout from './authShared/AuthLayout'
+
+// Import login components
+import LoginHeader from './login/LoginHeader'
+import ErrorMessage from './login/ErrorMessage'
+import EmailPasswordForm from './login/EmailPasswordForm'
+import OAuthButtons from './login/OAuthButtons'
+import DividerWithText from '../components/shared/DividerWithText'
+import LoggedInState from './login/LoggedInState'
+import { BASE_PATH } from '../constants/app'
+
+export default function Login() {
+  const navigate = useNavigate()
+  const { session, loading } = useAuth()
+  const { t } = useTranslation()
+  const [isSigningIn, setIsSigningIn] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [showEmailForm, setShowEmailForm] = useState(false)
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+  // Prefill email from query param (e.g. after password reset)
+  useEffect(() => {
+    try {
+      const url = new URL(window.location.href)
+      const emailFromQuery = url.searchParams.get('email')
+      if (emailFromQuery) {
+        setEmail(emailFromQuery)
+      }
+    } catch (_) {
+      // ignore
+    }
+  }, [])
+
+  const baseUrl = window.location.origin + BASE_PATH;
+
+  // Set document meta
+  useDocumentMeta({
+    title: `${t('login.title', 'Sign in')} - Stirling PDF`,
+    description: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    ogTitle: `${t('login.title', 'Sign in')} - Stirling PDF`,
+    ogDescription: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    ogImage: `${baseUrl}/og_images/home.png`,
+    ogUrl: `${window.location.origin}${window.location.pathname}`
+  })
+
+  // Show logged in state if authenticated
+  if (session && !loading) {
+    return <LoggedInState />
+  }
+
+  const signInWithProvider = async (provider: 'github' | 'google' | 'apple' | 'azure') => {
+    try {
+      setIsSigningIn(true)
+      setError(null)
+
+      console.log(`[Login] Signing in with ${provider}`)
+
+      // Redirect to Spring OAuth2 endpoint
+      const { error } = await springAuth.signInWithOAuth({
+        provider,
+        options: { redirectTo: `${BASE_PATH}/auth/callback` }
+      })
+
+      if (error) {
+        console.error(`[Login] ${provider} error:`, error)
+        setError(t('login.failedToSignIn', { provider, message: error.message }) || `Failed to sign in with ${provider}`)
+      }
+    } catch (err) {
+      console.error(`[Login] Unexpected error:`, err)
+      setError(t('login.unexpectedError', { message: err instanceof Error ? err.message : 'Unknown error' }) || 'An unexpected error occurred')
+    } finally {
+      setIsSigningIn(false)
+    }
+  }
+
+  const signInWithEmail = async () => {
+    if (!email || !password) {
+      setError(t('login.pleaseEnterBoth') || 'Please enter both email and password')
+      return
+    }
+
+    try {
+      setIsSigningIn(true)
+      setError(null)
+
+      console.log('[Login] Signing in with email:', email)
+
+      const { user, session, error } = await springAuth.signInWithPassword({
+        email: email.trim(),
+        password: password
+      })
+
+      if (error) {
+        console.error('[Login] Email sign in error:', error)
+        setError(error.message)
+      } else if (user && session) {
+        console.log('[Login] Email sign in successful')
+        // Auth state will update automatically and Landing will redirect to home
+        // No need to navigate manually here
+      }
+    } catch (err) {
+      console.error('[Login] Unexpected error:', err)
+      setError(t('login.unexpectedError', { message: err instanceof Error ? err.message : 'Unknown error' }) || 'An unexpected error occurred')
+    } finally {
+      setIsSigningIn(false)
+    }
+  }
+
+  const handleForgotPassword = () => {
+    navigate('/auth/reset')
+  }
+
+  return (
+    <AuthLayout>
+      <LoginHeader title={t('login.login') || 'Sign in'} />
+
+      <ErrorMessage error={error} />
+
+      {/* OAuth first */}
+      <OAuthButtons
+        onProviderClick={signInWithProvider}
+        isSubmitting={isSigningIn}
+        layout="vertical"
+      />
+
+      {/* Divider between OAuth and Email */}
+      <DividerWithText text={t('signup.or', 'or')} respondsToDarkMode={false} opacity={0.4} />
+
+      {/* Sign in with email button (primary color to match signup CTA) */}
+      <div className="auth-section">
+        <button
+          type="button"
+          onClick={() => setShowEmailForm(true)}
+          disabled={isSigningIn}
+          className="w-full px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold mb-2 cursor-pointer border-0 disabled:opacity-50 disabled:cursor-not-allowed auth-cta-button"
+        >
+          {t('login.useEmailInstead', 'Login with email')}
+        </button>
+      </div>
+
+      {showEmailForm && (
+        <div style={{ marginTop: '1rem' }}>
+          <EmailPasswordForm
+            email={email}
+            password={password}
+            setEmail={setEmail}
+            setPassword={setPassword}
+            onSubmit={signInWithEmail}
+            isSubmitting={isSigningIn}
+            submitButtonText={isSigningIn ? (t('login.loggingIn') || 'Signing in...') : (t('login.login') || 'Sign in')}
+          />
+        </div>
+      )}
+
+      {showEmailForm && (
+        <div className="auth-section-sm">
+          <button
+            type="button"
+            onClick={handleForgotPassword}
+            className="auth-link-black"
+          >
+            {t('login.forgotPassword', 'Forgot your password?')}
+          </button>
+        </div>
+      )}
+
+      {/* Divider then signup link */}
+      <DividerWithText text={t('signup.or', 'or')} respondsToDarkMode={false} opacity={0.4} />
+
+      <div style={{ textAlign: 'center', margin: '0.5rem 0 0.25rem' }}>
+        <button
+          type="button"
+          onClick={() => navigate('/signup')}
+          className="auth-link-black"
+        >
+          {t('signup.signUp', 'Sign up')}
+        </button>
+      </div>
+
+    </AuthLayout>
+  )
+}
@@ -0,0 +1,105 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { useDocumentMeta } from '../hooks/useDocumentMeta'
+import AuthLayout from './authShared/AuthLayout'
+import './authShared/auth.css'
+import { BASE_PATH } from '../constants/app'
+
+// Import signup components
+import LoginHeader from './login/LoginHeader'
+import ErrorMessage from './login/ErrorMessage'
+import DividerWithText from '../components/shared/DividerWithText'
+import SignupForm from './signup/SignupForm'
+import { useSignupFormValidation, SignupFieldErrors } from './signup/SignupFormValidation'
+import { useAuthService } from './signup/AuthService'
+
+export default function Signup() {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+  const [isSigningUp, setIsSigningUp] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [fieldErrors, setFieldErrors] = useState<SignupFieldErrors>({})
+
+  const baseUrl = window.location.origin + BASE_PATH;
+
+  // Set document meta
+  useDocumentMeta({
+    title: `${t('signup.title', 'Create an account')} - Stirling PDF`,
+    description: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    ogTitle: `${t('signup.title', 'Create an account')} - Stirling PDF`,
+    ogDescription: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    ogImage: `${baseUrl}/og_images/home.png`,
+    ogUrl: `${window.location.origin}${window.location.pathname}`
+  })
+
+  const { validateSignupForm } = useSignupFormValidation()
+  const { signUp } = useAuthService()
+
+  const handleSignUp = async () => {
+    const validation = validateSignupForm(email, password, confirmPassword)
+    if (!validation.isValid) {
+      setError(validation.error)
+      setFieldErrors(validation.fieldErrors || {})
+      return
+    }
+
+    try {
+      setIsSigningUp(true)
+      setError(null)
+      setFieldErrors({})
+
+      const result = await signUp(email, password, '')
+
+      if (result.user) {
+        // Show success message and redirect to login
+        setError(null)
+        setTimeout(() => navigate('/login'), 2000)
+      }
+    } catch (err) {
+      console.error('[Signup] Unexpected error:', err)
+      setError(err instanceof Error ? err.message : t('signup.unexpectedError', { message: 'Unknown error' }))
+    } finally {
+      setIsSigningUp(false)
+    }
+  }
+
+  return (
+    <AuthLayout>
+      <LoginHeader title={t('signup.title', 'Create an account')} subtitle={t('signup.subtitle', 'Join Stirling PDF')} />
+
+      <ErrorMessage error={error} />
+
+      {/* Signup form - shown immediately */}
+      <SignupForm
+        email={email}
+        password={password}
+        confirmPassword={confirmPassword}
+        setEmail={setEmail}
+        setPassword={setPassword}
+        setConfirmPassword={setConfirmPassword}
+        onSubmit={handleSignUp}
+        isSubmitting={isSigningUp}
+        fieldErrors={fieldErrors}
+        showName={false}
+        showTerms={false}
+      />
+
+      <DividerWithText text={t('signup.or', 'or')} respondsToDarkMode={false} opacity={0.4} />
+
+      {/* Bottom row - centered */}
+      <div style={{ textAlign: 'center', margin: '0.5rem 0 0.25rem' }}>
+        <button
+          type="button"
+          onClick={() => navigate('/login')}
+          className="auth-link-black"
+        >
+          {t('login.logIn', 'Log In')}
+        </button>
+      </div>
+    </AuthLayout>
+  )
+}
@@ -0,0 +1,48 @@
+.authContainer {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--auth-bg-color-light-only);
+  padding: 1.5rem 1.5rem 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  overflow: auto;
+}
+
+.authCard {
+  width: min(45rem, 96vw);
+  height: min(50.875rem, 96vh);
+  display: grid;
+  grid-template-columns: 1fr;
+  background-color: var(--auth-card-bg);
+  border-radius: 1.25rem;
+  box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  min-height: 0;
+}
+
+.authCardTwoColumns {
+  width: min(73.75rem, 96vw);
+  grid-template-columns: 1fr 1fr;
+}
+
+.authLeftPanel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  overflow: hidden;
+  min-height: 0;
+  height: 100%;
+}
+
+.authLeftPanel::-webkit-scrollbar {
+  display: none; /* WebKit browsers (Chrome, Safari, Edge) */
+}
+
+.authContent {
+  max-width: 26.25rem; /* 420px */
+  width: 100%;
+}
@@ -0,0 +1,68 @@
+import React, { useEffect, useRef, useState } from 'react'
+import LoginRightCarousel from '../../components/shared/LoginRightCarousel'
+import loginSlides from '../../components/shared/loginSlides'
+import styles from './AuthLayout.module.css'
+
+interface AuthLayoutProps {
+  children: React.ReactNode
+}
+
+export default function AuthLayout({ children }: AuthLayoutProps) {
+  const cardRef = useRef<HTMLDivElement | null>(null)
+  const [hideRightPanel, setHideRightPanel] = useState(false)
+
+  // Force light mode on auth pages
+  useEffect(() => {
+    const htmlElement = document.documentElement
+    const previousColorScheme = htmlElement.getAttribute('data-mantine-color-scheme')
+
+    // Set light mode
+    htmlElement.setAttribute('data-mantine-color-scheme', 'light')
+
+    // Cleanup: restore previous theme when leaving auth pages
+    return () => {
+      if (previousColorScheme) {
+        htmlElement.setAttribute('data-mantine-color-scheme', previousColorScheme)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    const update = () => {
+      // Use viewport to avoid hysteresis when the card is already in single-column mode
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+      const cardWidthIfTwoCols = Math.min(1180, viewportWidth * 0.96) // matches min(73.75rem, 96vw)
+      const columnWidth = cardWidthIfTwoCols / 2
+      const tooNarrow = columnWidth < 470
+      const tooShort = viewportHeight < 740
+      setHideRightPanel(tooNarrow || tooShort)
+    }
+    update()
+    window.addEventListener('resize', update)
+    window.addEventListener('orientationchange', update)
+    return () => {
+      window.removeEventListener('resize', update)
+      window.removeEventListener('orientationchange', update)
+    }
+  }, [])
+
+  return (
+    <div className={styles.authContainer}>
+      <div
+        ref={cardRef}
+        className={`${styles.authCard} ${!hideRightPanel ? styles.authCardTwoColumns : ''}`}
+        style={{ marginBottom: 'auto' }}
+      >
+        <div className={styles.authLeftPanel}>
+          <div className={styles.authContent}>
+            {children}
+          </div>
+        </div>
+        {!hideRightPanel && (
+          <LoginRightCarousel imageSlides={loginSlides} initialSeconds={5} slideSeconds={8} />
+        )}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,378 @@
+.auth-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem; /* 8px */
+  margin-bottom: 0.75rem; /* 12px */
+}
+
+.auth-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem; /* 4px */
+}
+
+.auth-label {
+  font-size: 0.875rem; /* 14px */
+  color: var(--auth-label-text-light-only);
+  font-weight: 500;
+}
+
+.auth-input {
+  width: 100%;
+  padding: 0.625rem 0.75rem; /* 10px 12px */
+  border: 1px solid var(--auth-input-border-light-only);
+  border-radius: 0.625rem; /* 10px */
+  font-size: 0.875rem; /* 14px */
+  background-color: var(--auth-input-bg-light-only);
+  color: var(--auth-input-text-light-only);
+  outline: none;
+}
+
+.auth-input:focus {
+  border-color: var(--auth-border-focus-light-only);
+  box-shadow: 0 0 0 3px var(--auth-focus-ring-light-only);
+}
+
+.auth-button {
+  width: 100%;
+  padding: 0.625rem 0.75rem; /* 10px 12px */
+  border: none;
+  border-radius: 0.625rem; /* 10px */
+  background-color: var(--auth-button-bg-light-only);
+  color: var(--auth-button-text-light-only);
+  font-size: 0.875rem; /* 14px */
+  font-weight: 600;
+  margin-bottom: 0.75rem; /* 12px */
+  cursor: pointer;
+}
+
+.auth-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.auth-toggle-wrapper {
+  text-align: center;
+  margin-bottom: 0.625rem; /* 10px */
+}
+
+.auth-toggle-link {
+  background: transparent;
+  border: 0;
+  color: var(--auth-label-text-light-only);
+  font-size: 0.875rem; /* 14px */
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.auth-toggle-link:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.auth-magic-row {
+  display: flex;
+  gap: 0.5rem; /* 8px */
+  margin-bottom: 0.75rem; /* 12px */
+}
+
+.auth-magic-row .auth-input {
+  flex: 1 1 auto;
+}
+
+.auth-magic-button {
+  padding: 0.875rem 1rem; /* 14px 16px */
+  border: none;
+  border-radius: 0.625rem; /* 10px */
+  background-color: var(--auth-magic-button-bg-light-only);
+  color: var(--auth-magic-button-text-light-only);
+  font-size: 0.875rem; /* 14px */
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.auth-magic-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.auth-terms {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem; /* 8px */
+  margin-bottom: 0.5rem; /* 8px */
+}
+
+.auth-checkbox {
+  width: 1rem; /* 16px */
+  height: 1rem; /* 16px */
+  accent-color: #AF3434;
+}
+
+.auth-terms-label {
+  font-size: 0.75rem; /* 12px */
+  color: var(--auth-label-text-light-only);
+}
+
+.auth-terms-label a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.auth-confirm {
+  overflow: hidden;
+  transition: max-height 240ms ease, opacity 200ms ease;
+}
+
+/* OAuth Button Styles */
+.oauth-container-icons {
+  display: flex;
+  margin-bottom: 0.625rem; /* 10px */
+  justify-content: space-between;
+}
+
+.oauth-container-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem; /* 12px */
+  margin-bottom: 0.625rem; /* 10px */
+}
+
+.oauth-container-vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem; /* 12px */
+}
+
+.oauth-button-icon {
+  width: 3.75rem; /* 60px */
+  height: 3.75rem; /* 60px */
+  border-radius: 0.875rem; /* 14px */
+  border: 1px solid var(--auth-input-border-light-only);
+  background: var(--auth-card-bg-light-only);
+  cursor: pointer;
+  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04); /* 0 2px 6px */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.oauth-button-icon:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.oauth-button-grid {
+  width: 100%;
+  padding: 1rem; /* 16px */
+  border-radius: 0.875rem; /* 14px */
+  border: 1px solid var(--auth-input-border-light-only);
+  background: var(--auth-card-bg-light-only);
+  cursor: pointer;
+  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04); /* 0 2px 6px */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.oauth-button-grid:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.oauth-button-vertical {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 1rem; /* 16px 16px */
+  border: 1px solid #d1d5db;
+  border-radius: 0.75rem; /* 12px */
+  background-color: var(--auth-card-bg-light-only);
+  font-size: 1rem; /* 16px */
+  font-weight: 500;
+  color: var(--auth-text-primary-light-only);
+  cursor: pointer;
+  gap: 0.75rem; /* 12px */
+}
+
+.oauth-button-vertical:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.oauth-icon-small {
+  width: 1.75rem; /* 28px */
+  height: 1.75rem; /* 28px */
+  display: block;
+}
+
+.oauth-icon-medium {
+  width: 1.75rem; /* 28px */
+  height: 1.75rem; /* 28px */
+  display: block;
+}
+
+.oauth-icon-tiny {
+  width: 1.25rem; /* 20px */
+  height: 1.25rem; /* 20px */
+}
+
+/* Login Header Styles */
+.login-header {
+  margin-bottom: 1rem; /* 16px */
+  margin-top: 0.5rem; /* 8px */
+}
+
+.login-header-logos {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem; /* 12px */
+  margin-bottom: 1.25rem; /* 20px */
+}
+
+.login-logo-icon {
+  width: 2.5rem; /* 40px */
+  height: 2.5rem; /* 40px */
+  border-radius: 0.5rem; /* 8px */
+}
+
+.login-logo-text {
+  height: 1.5rem; /* 24px */
+}
+
+.login-title {
+  font-size: 2rem; /* 32px */
+  font-weight: 800;
+  color: var(--auth-text-primary-light-only);
+  margin: 0 0 0.375rem; /* 0 0 6px */
+}
+
+.login-subtitle {
+  color: var(--auth-text-secondary-light-only);
+  font-size: 0.875rem; /* 14px */
+  margin: 0;
+}
+
+/* Navigation Link Styles */
+.navigation-link-container {
+  text-align: center;
+}
+
+.navigation-link-button {
+  background: none;
+  border: none;
+  color: var(--auth-label-text-light-only);
+  font-size: 0.875rem; /* 14px */
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.navigation-link-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Message Styles */
+.error-message {
+  padding: 1rem; /* 16px */
+  background-color: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 0.5rem; /* 8px */
+  margin-bottom: 1.5rem; /* 24px */
+}
+
+.error-message-text {
+  color: #dc2626;
+  font-size: 0.875rem; /* 14px */
+  margin: 0;
+}
+
+.success-message {
+  padding: 1rem; /* 16px */
+  background-color: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 0.5rem; /* 8px */
+  margin-bottom: 1.5rem; /* 24px */
+}
+
+.success-message-text {
+  color: #059669;
+  font-size: 0.875rem; /* 14px */
+  margin: 0;
+}
+
+/* Field-level error styles */
+.auth-field-error {
+  color: #dc2626;
+  font-size: 0.6875rem; /* 11px */
+  margin-top: 0.125rem; /* 2px */
+  line-height: 1.1;
+}
+
+.auth-input-error {
+  border-color: #dc2626 !important;
+}
+
+.auth-input-error:focus {
+  border-color: #dc2626 !important;
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
+}
+
+/* Shared auth styles extracted from inline */
+.auth-section {
+  margin: 0.75rem 0;
+}
+
+.auth-section-sm {
+  margin: 0.5rem 0;
+}
+
+.auth-bottom-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0.5rem 0 0.25rem;
+}
+
+.auth-bottom-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+
+.auth-link-black {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 0.875rem; /* 14px */
+  color: #000;
+}
+
+.auth-dot-black {
+  opacity: 0.5;
+  padding: 0 0.5rem;
+  color: #000;
+}
+
+/* Email login button - red CTA style matching SaaS version */
+.auth-cta-button {
+  background-color: #AF3434 !important;
+  color: white !important;
+  border: none !important;
+  font-weight: 600 !important;
+}
+
+.auth-cta-button:hover:not(:disabled) {
+  background-color: #9a2e2e !important;
+}
+
+.auth-cta-button:disabled {
+  background-color: #AF3434 !important;
+  opacity: 0.6 !important;
+}
@@ -0,0 +1,86 @@
+import { useTranslation } from 'react-i18next'
+import '../authShared/auth.css'
+
+interface EmailPasswordFormProps {
+  email: string
+  password: string
+  setEmail: (email: string) => void
+  setPassword: (password: string) => void
+  onSubmit: () => void
+  isSubmitting: boolean
+  submitButtonText: string
+  showPasswordField?: boolean
+  fieldErrors?: {
+    email?: string
+    password?: string
+  }
+}
+
+export default function EmailPasswordForm({
+  email,
+  password,
+  setEmail,
+  setPassword,
+  onSubmit,
+  isSubmitting,
+  submitButtonText,
+  showPasswordField = true,
+  fieldErrors = {}
+}: EmailPasswordFormProps) {
+  const { t } = useTranslation()
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSubmit()
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="auth-fields">
+        <div className="auth-field">
+          <label htmlFor="email" className="auth-label">{t('login.username', 'Username')}</label>
+          <input
+            id="email"
+            type="text"
+            name="username"
+            autoComplete="username"
+            placeholder={t('login.enterUsername', 'Enter username')}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className={`auth-input ${fieldErrors.email ? 'auth-input-error' : ''}`}
+          />
+          {fieldErrors.email && (
+            <div className="auth-field-error">{fieldErrors.email}</div>
+          )}
+        </div>
+
+        {showPasswordField && (
+          <div className="auth-field">
+            <label htmlFor="password" className="auth-label">{t('login.password')}</label>
+            <input
+              id="password"
+              type="password"
+              name="current-password"
+              autoComplete="current-password"
+              placeholder={t('login.enterPassword')}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className={`auth-input ${fieldErrors.password ? 'auth-input-error' : ''}`}
+            />
+            {fieldErrors.password && (
+              <div className="auth-field-error">{fieldErrors.password}</div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <button
+        type="submit"
+        disabled={isSubmitting || !email || (showPasswordField && !password)}
+        className="auth-button"
+      >
+        {submitButtonText}
+      </button>
+    </form>
+  )
+}
@@ -0,0 +1,13 @@
+interface ErrorMessageProps {
+  error: string | null
+}
+
+export default function ErrorMessage({ error }: ErrorMessageProps) {
+  if (!error) return null
+
+  return (
+    <div className="error-message">
+      <p className="error-message-text">{error}</p>
+    </div>
+  )
+}
@@ -0,0 +1,54 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../../auth/UseSession'
+import { useTranslation } from 'react-i18next'
+
+export default function LoggedInState() {
+  const navigate = useNavigate()
+  const { user } = useAuth()
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      navigate('/')
+    }, 2000)
+
+    return () => clearTimeout(timer)
+  }, [navigate])
+
+  return (
+    <div style={{
+      minHeight: '100vh',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: '#f3f4f6',
+      padding: '16px'
+    }}>
+      <div style={{
+        maxWidth: '400px',
+        width: '100%',
+        backgroundColor: '#ffffff',
+        borderRadius: '16px',
+        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.1)',
+        padding: '32px'
+      }}>
+        <div style={{ textAlign: 'center', marginBottom: '24px' }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>✅</div>
+          <h1 style={{ fontSize: '24px', fontWeight: 'bold', color: '#059669', marginBottom: '8px' }}>
+            {t('login.youAreLoggedIn')}
+          </h1>
+          <p style={{ color: '#6b7280', fontSize: '14px' }}>
+            {t('login.email')}: {user?.email}
+          </p>
+        </div>
+
+        <div style={{ textAlign: 'center', marginTop: '16px' }}>
+          <p style={{ color: '#6b7280', fontSize: '14px' }}>
+            Redirecting to home...
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,22 @@
+
+import { BASE_PATH } from '../../constants/app';
+
+interface LoginHeaderProps {
+  title: string
+  subtitle?: string
+}
+
+export default function LoginHeader({ title, subtitle }: LoginHeaderProps) {
+  return (
+    <div className="login-header">
+      <div className="login-header-logos">
+        <img src={`${BASE_PATH}/logo192.png`} alt="Logo" className="login-logo-icon" />
+        <img src={`${BASE_PATH}/branding/StirlingPDFLogoBlackText.svg`} alt="Stirling PDF" className="login-logo-text" />
+      </div>
+      <h1 className="login-title">{title}</h1>
+      {subtitle && (
+        <p className="login-subtitle">{subtitle}</p>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,19 @@
+interface NavigationLinkProps {
+  onClick: () => void
+  text: string
+  isDisabled?: boolean
+}
+
+export default function NavigationLink({ onClick, text, isDisabled = false }: NavigationLinkProps) {
+  return (
+    <div className="navigation-link-container">
+      <button
+        onClick={onClick}
+        disabled={isDisabled}
+        className="navigation-link-button"
+      >
+        {text}
+      </button>
+    </div>
+  )
+}
@@ -0,0 +1,78 @@
+import { useTranslation } from 'react-i18next'
+import { BASE_PATH } from '../../constants/app'
+
+// OAuth provider configuration
+const oauthProviders = [
+  { id: 'google', label: 'Google', file: 'google.svg', isDisabled: false },
+  { id: 'github', label: 'GitHub', file: 'github.svg', isDisabled: false },
+  { id: 'apple', label: 'Apple', file: 'apple.svg', isDisabled: true },
+  { id: 'azure', label: 'Microsoft', file: 'microsoft.svg', isDisabled: true }
+]
+
+interface OAuthButtonsProps {
+  onProviderClick: (provider: 'github' | 'google' | 'apple' | 'azure') => void
+  isSubmitting: boolean
+  layout?: 'vertical' | 'grid' | 'icons'
+}
+
+export default function OAuthButtons({ onProviderClick, isSubmitting, layout = 'vertical' }: OAuthButtonsProps) {
+  const { t } = useTranslation()
+
+  // Filter out disabled providers - don't show them at all
+  const enabledProviders = oauthProviders.filter(p => !p.isDisabled)
+
+  if (layout === 'icons') {
+    return (
+      <div className="oauth-container-icons">
+        {enabledProviders.map((p) => (
+          <div key={p.id} title={`${t('login.signInWith', 'Sign in with')} ${p.label}`}>
+            <button
+              onClick={() => onProviderClick(p.id as any)}
+              disabled={isSubmitting}
+              className="oauth-button-icon"
+              aria-label={`${t('login.signInWith', 'Sign in with')} ${p.label}`}
+            >
+              <img src={`${BASE_PATH}/Login/${p.file}`} alt={p.label} className="oauth-icon-small"/>
+            </button>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  if (layout === 'grid') {
+    return (
+      <div className="oauth-container-grid">
+        {enabledProviders.map((p) => (
+          <div key={p.id} title={`${t('login.signInWith', 'Sign in with')} ${p.label}`}>
+            <button
+              onClick={() => onProviderClick(p.id as any)}
+              disabled={isSubmitting}
+              className="oauth-button-grid"
+              aria-label={`${t('login.signInWith', 'Sign in with')} ${p.label}`}
+            >
+              <img src={`${BASE_PATH}/Login/${p.file}`} alt={p.label} className="oauth-icon-medium"/>
+            </button>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="oauth-container-vertical">
+      {enabledProviders.map((p) => (
+        <button
+          key={p.id}
+          onClick={() => onProviderClick(p.id as any)}
+          disabled={isSubmitting}
+          className="oauth-button-vertical"
+          title={p.label}
+        >
+          <img src={`${BASE_PATH}/Login/${p.file}`} alt={p.label} className="oauth-icon-tiny" />
+          {p.label}
+        </button>
+      ))}
+    </div>
+  )
+}
@@ -0,0 +1,54 @@
+import { springAuth } from '../../auth/springAuthClient'
+import { BASE_PATH } from '../../constants/app'
+
+export const useAuthService = () => {
+
+  const signUp = async (
+    email: string,
+    password: string,
+    name: string
+  ) => {
+    console.log('[Signup] Creating account for:', email)
+
+    const { user, session, error } = await springAuth.signUp({
+      email: email.trim(),
+      password: password,
+      options: {
+        data: { full_name: name },
+        emailRedirectTo: `${BASE_PATH}/auth/callback`
+      }
+    })
+
+    if (error) {
+      console.error('[Signup] Sign up error:', error)
+      throw new Error(error.message)
+    }
+
+    if (user) {
+      console.log('[Signup] Sign up successful:', user)
+      return {
+        user: user,
+        session: session,
+        requiresEmailConfirmation: user && !session
+      }
+    }
+
+    throw new Error('Unknown error occurred during signup')
+  }
+
+  const signInWithProvider = async (provider: 'github' | 'google' | 'apple' | 'azure') => {
+    const { error } = await springAuth.signInWithOAuth({
+      provider,
+      options: { redirectTo: `${BASE_PATH}/auth/callback` }
+    })
+
+    if (error) {
+      throw new Error(error.message)
+    }
+  }
+
+  return {
+    signUp,
+    signInWithProvider
+  }
+}
@@ -0,0 +1,162 @@
+import { useEffect } from 'react'
+import '../authShared/auth.css'
+import { useTranslation } from 'react-i18next'
+import { SignupFieldErrors } from './SignupFormValidation'
+
+interface SignupFormProps {
+  name?: string
+  email: string
+  password: string
+  confirmPassword: string
+  agree?: boolean
+  setName?: (name: string) => void
+  setEmail: (email: string) => void
+  setPassword: (password: string) => void
+  setConfirmPassword: (password: string) => void
+  setAgree?: (agree: boolean) => void
+  onSubmit: () => void
+  isSubmitting: boolean
+  fieldErrors?: SignupFieldErrors
+  showName?: boolean
+  showTerms?: boolean
+}
+
+export default function SignupForm({
+  name = '',
+  email,
+  password,
+  confirmPassword,
+  agree = true,
+  setName,
+  setEmail,
+  setPassword,
+  setConfirmPassword,
+  setAgree,
+  onSubmit,
+  isSubmitting,
+  fieldErrors = {},
+  showName = false,
+  showTerms = false
+}: SignupFormProps) {
+  const { t } = useTranslation()
+  const showConfirm = password.length >= 4
+
+  useEffect(() => {
+    if (!showConfirm && confirmPassword) {
+      setConfirmPassword('')
+    }
+  }, [showConfirm, confirmPassword, setConfirmPassword])
+
+  return (
+    <>
+      <div className="auth-fields">
+        {showName && (
+          <div className="auth-field">
+            <label htmlFor="name" className="auth-label">{t('signup.name')}</label>
+            <input
+              id="name"
+              type="text"
+              name="name"
+              autoComplete="name"
+              placeholder={t('signup.enterName')}
+              value={name}
+              onChange={(e) => setName?.(e.target.value)}
+              className={`auth-input ${fieldErrors.name ? 'auth-input-error' : ''}`}
+            />
+            {fieldErrors.name && (
+              <div className="auth-field-error">{fieldErrors.name}</div>
+            )}
+          </div>
+        )}
+
+        <div className="auth-field">
+          <label htmlFor="email" className="auth-label">{t('signup.email')}</label>
+          <input
+            id="email"
+            type="email"
+            name="email"
+            autoComplete="email"
+            placeholder={t('signup.enterEmail')}
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            onKeyPress={(e) => e.key === 'Enter' && !isSubmitting && onSubmit()}
+            className={`auth-input ${fieldErrors.email ? 'auth-input-error' : ''}`}
+          />
+          {fieldErrors.email && (
+            <div className="auth-field-error">{fieldErrors.email}</div>
+          )}
+        </div>
+
+        <div className="auth-field">
+          <label htmlFor="password" className="auth-label">{t('signup.password')}</label>
+          <input
+            id="password"
+            type="password"
+            name="new-password"
+            autoComplete="new-password"
+            placeholder={t('signup.enterPassword')}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            onKeyPress={(e) => e.key === 'Enter' && !isSubmitting && onSubmit()}
+            className={`auth-input ${fieldErrors.password ? 'auth-input-error' : ''}`}
+          />
+          {fieldErrors.password && (
+            <div className="auth-field-error">{fieldErrors.password}</div>
+          )}
+        </div>
+
+        <div
+          aria-hidden={!showConfirm}
+          className="auth-confirm"
+          style={{ maxHeight: showConfirm ? 96 : 0, opacity: showConfirm ? 1 : 0 }}
+        >
+          <div className="auth-field">
+            <label htmlFor="confirmPassword" className="auth-label">{t('signup.confirmPassword')}</label>
+            <input
+              id="confirmPassword"
+              type="password"
+              name="new-password"
+              autoComplete="new-password"
+              placeholder={t('signup.confirmPasswordPlaceholder')}
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && !isSubmitting && onSubmit()}
+              className={`auth-input ${fieldErrors.confirmPassword ? 'auth-input-error' : ''}`}
+            />
+            {fieldErrors.confirmPassword && (
+              <div className="auth-field-error">{fieldErrors.confirmPassword}</div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Terms - only show if showTerms is true */}
+      {showTerms && (
+        <div className="auth-terms">
+          <input
+            id="agree"
+            type="checkbox"
+            checked={agree}
+            onChange={(e) => setAgree?.(e.target.checked)}
+            className="auth-checkbox"
+          />
+          <label htmlFor="agree" className="auth-terms-label">
+            {t("legal.iAgreeToThe", 'I agree to all of the')} {" "}
+            <a href="https://www.stirlingpdf.com/terms" target="_blank" rel="noopener noreferrer">
+              {t('legal.terms', 'Terms and Conditions')}
+            </a>
+          </label>
+        </div>
+      )}
+
+      {/* Sign Up Button */}
+      <button
+        onClick={onSubmit}
+        disabled={isSubmitting || !email || !password || !confirmPassword || (showTerms && !agree)}
+        className="auth-button"
+      >
+        {isSubmitting ? t('signup.creatingAccount') : t('signup.signUp')}
+      </button>
+    </>
+  )
+}
@@ -0,0 +1,66 @@
+import { useTranslation } from 'react-i18next'
+
+export interface SignupFieldErrors {
+  name?: string
+  email?: string
+  password?: string
+  confirmPassword?: string
+}
+
+export interface SignupValidationResult {
+  isValid: boolean
+  error: string | null
+  fieldErrors?: SignupFieldErrors
+}
+
+export const useSignupFormValidation = () => {
+  const { t } = useTranslation()
+
+  const validateSignupForm = (
+    email: string,
+    password: string,
+    confirmPassword: string,
+    name?: string
+  ): SignupValidationResult => {
+    const fieldErrors: SignupFieldErrors = {}
+
+    // Validate name
+    if (name !== undefined && name !== null && !name.trim()) {
+      fieldErrors.name = t('signup.nameRequired', 'Name is required')
+    }
+
+    // Validate email
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    if (!email) {
+      fieldErrors.email = t('signup.emailRequired', 'Email is required')
+    } else if (!emailRegex.test(email)) {
+      fieldErrors.email = t('signup.invalidEmail')
+    }
+
+    // Validate password
+    if (!password) {
+      fieldErrors.password = t('signup.passwordRequired', 'Password is required')
+    } else if (password.length < 6) {
+      fieldErrors.password = t('signup.passwordTooShort')
+    }
+
+    // Validate confirm password
+    if (!confirmPassword) {
+      fieldErrors.confirmPassword = t('signup.confirmPasswordRequired', 'Please confirm your password')
+    } else if (password !== confirmPassword) {
+      fieldErrors.confirmPassword = t('signup.passwordsDoNotMatch')
+    }
+
+    const hasErrors = Object.keys(fieldErrors).length > 0
+
+    return {
+      isValid: !hasErrors,
+      error: null, // Don't show generic error, field errors are more specific
+      fieldErrors: hasErrors ? fieldErrors : undefined
+    }
+  }
+
+  return {
+    validateSignupForm
+  }
+}
@@ -8,6 +8,35 @@ const apiClient = axios.create({
  responseType: 'json',
 });

+// Helper function to get JWT token from localStorage
+function getJwtTokenFromStorage(): string | null {
+  try {
+    return localStorage.getItem('stirling_jwt');
+  } catch (error) {
+    console.error('[API Client] Failed to read JWT from localStorage:', error);
+    return null;
+  }
+}
+
+// ---------- Install request interceptor to add JWT token ----------
+apiClient.interceptors.request.use(
+  (config) => {
+    // Get JWT token from localStorage
+    const jwtToken = getJwtTokenFromStorage();
+
+    // If token exists and Authorization header is not already set, add it
+    if (jwtToken && !config.headers.Authorization) {
+      config.headers.Authorization = `Bearer ${jwtToken}`;
+      console.debug('[API Client] Added JWT token from localStorage to Authorization header');
+    }
+
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
 // ---------- Install error interceptor ----------
 apiClient.interceptors.response.use(
  (response) => response,
@@ -262,6 +262,27 @@
  --modal-content-bg: #ffffff;
  --modal-header-border: rgba(0, 0, 0, 0.06);

+  /* Auth page colors (light mode only - auth pages force light mode) */
+  --auth-bg-color-light-only: #f3f4f6;
+  --auth-card-bg: #ffffff;
+  --auth-card-bg-light-only: #ffffff;
+  --auth-label-text-light-only: #374151;
+  --auth-input-border-light-only: #d1d5db;
+  --auth-input-bg-light-only: #ffffff;
+  --auth-input-text-light-only: #111827;
+  --auth-border-focus-light-only: #3b82f6;
+  --auth-focus-ring-light-only: rgba(59, 130, 246, 0.1);
+  --auth-button-bg-light-only: #AF3434;
+  --auth-button-text-light-only: #ffffff;
+  --auth-magic-button-bg-light-only: #e5e7eb;
+  --auth-magic-button-text-light-only: #374151;
+  --auth-text-primary-light-only: #111827;
+  --auth-text-secondary-light-only: #6b7280;
+  --text-divider-rule-rgb-light: 229, 231, 235;
+  --text-divider-label-rgb-light: 156, 163, 175;
+  --tool-subcategory-rule-color-light: #e5e7eb;
+  --tool-subcategory-text-color-light: #9ca3af;
+
  /* PDF Report Colors (always light) */
  --pdf-light-header-bg: 239 246 255;
  --pdf-light-accent: 59 130 246;
@@ -480,7 +501,7 @@
  /* Tool panel search bar background colors (dark mode) */
  --tool-panel-search-bg: #1F2329;
  --tool-panel-search-border-bottom: #4B525A;
-  
+
  --information-text-bg: #292e34;
  --information-text-color: #ececec;

@@ -10,6 +10,16 @@ export default defineConfig({
        changeOrigin: true,
        secure: false,
      },
+      '/oauth2': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        secure: false,
+      },
+      '/login/oauth2': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        secure: false,
+      },
    },
  },
  base: process.env.RUN_SUBPATH ? `/${process.env.RUN_SUBPATH}` : './',