auth media

2026-03-14 23:16:06 +01:00
parent e587480abb
commit ab999c558d
26 changed files with 4219 additions and 381 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 .idea/
 *.iml
 authid.txt
+auth-view/node_modules/
+auth-view/dist/
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -321,6 +321,26 @@ deploy-analytics-view:
        docker image prune -af
      ENDSSH

+build-auth-view:
+  stage: build
+  image: node:22-alpine
+  cache:
+    key: "${CI_COMMIT_REF_SLUG}-auth-view"
+    paths:
+      - auth-view/node_modules
+  script:
+    - cd auth-view
+    - npm ci
+    - npm run build
+  artifacts:
+    paths:
+      - auth-view/dist
+    expire_in: 1h
+  rules:
+    - if: $CI_COMMIT_BRANCH == "main"
+      changes:
+        - auth-view/**/*
+
 # Deploy all services at once (manual trigger)
 deploy-all:
  <<: *deploy_setup
--- a/auth-view/docker/Dockerfile
+++ b/auth-view/docker/Dockerfile
@@ -0,0 +1,11 @@
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html/auth
+EXPOSE 80
--- a/auth-view/docker/nginx.conf
+++ b/auth-view/docker/nginx.conf
@@ -0,0 +1,8 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+
+    location /auth/ {
+        try_files $uri $uri/ /auth/index.html;
+    }
+}
--- a/auth-view/eslint.config.js
+++ b/auth-view/eslint.config.js
@@ -0,0 +1,28 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);
--- a/auth-view/index.html
+++ b/auth-view/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/auth/favicon.ico" sizes="any" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auth – Post Hub</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/auth-view/package-lock.json
+++ b/auth-view/package-lock.json
--- a/auth-view/package.json
+++ b/auth-view/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "auth-view",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.0.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.4.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.8.3",
+    "vite": "^7.1.7"
+  }
+}
--- a/auth-view/postcss.config.js
+++ b/auth-view/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
--- a/auth-view/src/App.tsx
+++ b/auth-view/src/App.tsx
@@ -0,0 +1,15 @@
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import LoginPage from "./pages/LoginPage";
+import RegisterPage from "./pages/RegisterPage";
+
+export default function App() {
+  return (
+    <BrowserRouter basename="/auth">
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/register" element={<RegisterPage />} />
+        <Route path="*" element={<Navigate to="/login" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
--- a/auth-view/src/index.css
+++ b/auth-view/src/index.css
@@ -0,0 +1 @@
+@import "tailwindcss";
--- a/auth-view/src/main.tsx
+++ b/auth-view/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
--- a/auth-view/src/pages/LoginPage.tsx
+++ b/auth-view/src/pages/LoginPage.tsx
@@ -0,0 +1,178 @@
+import { useEffect, useState, FormEvent } from "react";
+import { useSearchParams, Link } from "react-router-dom";
+
+function saveTokensAndRedirect(token: string, refreshToken: string, redirect: string) {
+  localStorage.setItem("token", token);
+  localStorage.setItem("refreshToken", refreshToken);
+  window.location.href = redirect;
+}
+
+export default function LoginPage() {
+  const [searchParams] = useSearchParams();
+
+  const redirect = searchParams.get("redirect") ?? "/ragview";
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  // Handle OAuth2 callback — token & refreshToken in URL
+  useEffect(() => {
+    const token = searchParams.get("token");
+    const refreshToken = searchParams.get("refreshToken");
+    if (token && refreshToken) {
+      saveTokensAndRedirect(token, refreshToken, redirect);
+    }
+  }, [searchParams, redirect]);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      const res = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      });
+      const data = await res.json();
+      if (data.success && data.payload?.token) {
+        saveTokensAndRedirect(data.payload.token, data.payload.refreshToken ?? "", redirect);
+      } else {
+        setError(data.message ?? "Login failed");
+      }
+    } catch {
+      setError("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const registerHref = `/register?redirect=${encodeURIComponent(redirect)}`;
+
+  return (
+    <div className="min-h-screen bg-gray-950 flex items-center justify-center px-4">
+      <div className="w-full max-w-md">
+        {/* Card */}
+        <div className="bg-gray-900 border border-gray-800 rounded-2xl p-8 shadow-2xl">
+          <h1 className="text-2xl font-bold text-white mb-2 text-center">Welcome back</h1>
+          <p className="text-gray-400 text-sm text-center mb-8">Sign in to your account</p>
+
+          {/* Email/Password form */}
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1.5">
+                Email
+              </label>
+              <input
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="you@example.com"
+                className="w-full bg-gray-800 border border-gray-700 text-white rounded-lg px-4 py-2.5 text-sm placeholder-gray-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1.5">
+                Password
+              </label>
+              <input
+                type="password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="••••••••"
+                className="w-full bg-gray-800 border border-gray-700 text-white rounded-lg px-4 py-2.5 text-sm placeholder-gray-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
+              />
+            </div>
+
+            {error && (
+              <p className="text-red-400 text-sm bg-red-950/50 border border-red-800 rounded-lg px-3 py-2">
+                {error}
+              </p>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-lg py-2.5 text-sm transition"
+            >
+              {loading ? "Signing in…" : "Sign in"}
+            </button>
+          </form>
+
+          {/* Divider */}
+          <div className="flex items-center gap-3 my-6">
+            <div className="flex-1 h-px bg-gray-800" />
+            <span className="text-gray-500 text-xs font-medium">or</span>
+            <div className="flex-1 h-px bg-gray-800" />
+          </div>
+
+          {/* OAuth2 buttons */}
+          <div className="space-y-3">
+            <a
+              href="/oauth2/authorization/google"
+              className="flex items-center gap-3 w-full bg-gray-800 hover:bg-gray-700 border border-gray-700 text-gray-200 rounded-lg px-4 py-2.5 text-sm font-medium transition"
+            >
+              <GoogleIcon />
+              Login with Google
+            </a>
+            <a
+              href="/oauth2/authorization/github"
+              className="flex items-center gap-3 w-full bg-gray-800 hover:bg-gray-700 border border-gray-700 text-gray-200 rounded-lg px-4 py-2.5 text-sm font-medium transition"
+            >
+              <GitHubIcon />
+              Login with GitHub
+            </a>
+            <a
+              href="/oauth2/authorization/facebook"
+              className="flex items-center gap-3 w-full bg-gray-800 hover:bg-gray-700 border border-gray-700 text-gray-200 rounded-lg px-4 py-2.5 text-sm font-medium transition"
+            >
+              <FacebookIcon />
+              Login with Facebook
+            </a>
+          </div>
+
+          {/* Register link */}
+          <p className="text-center text-sm text-gray-500 mt-6">
+            Don&apos;t have an account?{" "}
+            <Link
+              to={registerHref}
+              className="text-indigo-400 hover:text-indigo-300 font-medium transition"
+            >
+              Register
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function GoogleIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/>
+      <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" fill="#34A853"/>
+      <path d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/>
+      <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z" fill="#EA4335"/>
+    </svg>
+  );
+}
+
+function GitHubIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
+    </svg>
+  );
+}
+
+function FacebookIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="#1877F2" xmlns="http://www.w3.org/2000/svg">
+      <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.874v2.25h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/>
+    </svg>
+  );
+}
--- a/auth-view/src/pages/RegisterPage.tsx
+++ b/auth-view/src/pages/RegisterPage.tsx
@@ -0,0 +1,143 @@
+import { useState, FormEvent } from "react";
+import { useSearchParams, Link } from "react-router-dom";
+
+function saveTokensAndRedirect(token: string, refreshToken: string, redirect: string) {
+  localStorage.setItem("token", token);
+  localStorage.setItem("refreshToken", refreshToken);
+  window.location.href = redirect;
+}
+
+export default function RegisterPage() {
+  const [searchParams] = useSearchParams();
+  const redirect = searchParams.get("redirect") ?? "/ragview";
+
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await fetch("/api/auth/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, email, password }),
+      });
+      const data = await res.json();
+      if (data.success && data.payload?.token) {
+        saveTokensAndRedirect(data.payload.token, data.payload.refreshToken ?? "", redirect);
+      } else {
+        setError(data.message ?? "Registration failed");
+      }
+    } catch {
+      setError("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const loginHref = `/login?redirect=${encodeURIComponent(redirect)}`;
+
+  return (
+    <div className="min-h-screen bg-gray-950 flex items-center justify-center px-4">
+      <div className="w-full max-w-md">
+        {/* Card */}
+        <div className="bg-gray-900 border border-gray-800 rounded-2xl p-8 shadow-2xl">
+          <h1 className="text-2xl font-bold text-white mb-2 text-center">Create account</h1>
+          <p className="text-gray-400 text-sm text-center mb-8">Sign up to get started</p>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1.5">
+                Username
+              </label>
+              <input
+                type="text"
+                required
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="johndoe"
+                className="w-full bg-gray-800 border border-gray-700 text-white rounded-lg px-4 py-2.5 text-sm placeholder-gray-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1.5">
+                Email
+              </label>
+              <input
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="you@example.com"
+                className="w-full bg-gray-800 border border-gray-700 text-white rounded-lg px-4 py-2.5 text-sm placeholder-gray-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1.5">
+                Password
+              </label>
+              <input
+                type="password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="••••••••"
+                className="w-full bg-gray-800 border border-gray-700 text-white rounded-lg px-4 py-2.5 text-sm placeholder-gray-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-1.5">
+                Confirm Password
+              </label>
+              <input
+                type="password"
+                required
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder="••••••••"
+                className="w-full bg-gray-800 border border-gray-700 text-white rounded-lg px-4 py-2.5 text-sm placeholder-gray-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
+              />
+            </div>
+
+            {error && (
+              <p className="text-red-400 text-sm bg-red-950/50 border border-red-800 rounded-lg px-3 py-2">
+                {error}
+              </p>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-lg py-2.5 text-sm transition"
+            >
+              {loading ? "Creating account…" : "Create account"}
+            </button>
+          </form>
+
+          {/* Login link */}
+          <p className="text-center text-sm text-gray-500 mt-6">
+            Already have an account?{" "}
+            <Link
+              to={loginHref}
+              className="text-indigo-400 hover:text-indigo-300 font-medium transition"
+            >
+              Login
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/auth-view/src/vite-env.d.ts
+++ b/auth-view/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/auth-view/tsconfig.app.json
+++ b/auth-view/tsconfig.app.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/auth-view/tsconfig.json
+++ b/auth-view/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/auth-view/tsconfig.node.json
+++ b/auth-view/tsconfig.node.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/auth-view/vite.config.ts
+++ b/auth-view/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  base: "/auth/",
+});
--- a/gateway-service/src/main/resources/application.yml
+++ b/gateway-service/src/main/resources/application.yml
@@ -94,7 +94,7 @@ jwt:

 # ---- OAuth2 redirect after success ----
 oauth2:
-  redirect-uri: ${OAUTH2_REDIRECT_URI:https://balexvic.com/login}
+  redirect-uri: ${OAUTH2_REDIRECT_URI:https://balexvic.com/auth/login}

 # ---- Auth path config ----
 auth:
--- a/rag-view/src/App.jsx
+++ b/rag-view/src/App.jsx
@@ -6,8 +6,6 @@ import { TOKEN_UNDEFINED } from "./features/constants";

 import RootLayout from "./pages/RootLayout";
 import HomePage from "./pages/HomePage";
-import RegisterPage from "./pages/RegisterPage";
-import LoginPage from "./pages/LoginPage";
 import UploadPage from "./pages/UploadPage";
 import RagPage from "./pages/RagPage";

@@ -18,8 +16,6 @@ const router = createBrowserRouter(
      element: <RootLayout />,
      children: [
        { index: true, element: <HomePage /> },
-        { path: "register", element: <RegisterPage /> },
-        { path: "login", element: <LoginPage /> },
        { path: "upload", element: <UploadPage /> },
        { path: "rag", element: <RagPage /> },
      ],
--- a/rag-view/src/features/constants.js
+++ b/rag-view/src/features/constants.js
@@ -5,8 +5,8 @@ export const METHOD_POST_QUERY = "POST";
 export const METHOD_GET_QUERY = "GET";
 export const METHOD_DELETE_QUERY = "DELETE";
 export const HEADER_CONTENT_TYPE = "Content-Type";
-export const JWT_TOKEN = "jwt";
-export const JWT_REFRESH_TOKEN = "jwt-refresh";
+export const JWT_TOKEN = "token";
+export const JWT_REFRESH_TOKEN = "refreshToken";
 export const APPLICATION_JSON = "application/json";
 export const USER_NAME_UNDEFINED = "userNameUndefined";
 export const USER_EMAIL_UNDEFINED = "userEmailUndefined";
--- a/rag-view/src/features/fetch-async/fetchWithAuth.js
+++ b/rag-view/src/features/fetch-async/fetchWithAuth.js
@@ -1,5 +1,5 @@
 import fetchRefreshToken from "./fetchRefreshToken";
-import { JWT_TOKEN, BASE_URL, PREFIX_AUTH } from "../constants";
+import { JWT_TOKEN } from "../constants";

 const SESSION_INVALIDATED = "SESSION_INVALIDATED";

@@ -24,7 +24,7 @@ export const fetchWithAuth = async (

  if (responseText === SESSION_INVALIDATED) {
    localStorage.clear();
-    window.location.href = BASE_URL + PREFIX_AUTH + "/login";
+    window.location.href = "/auth/login?redirect=/ragview";
    return firstRes;
  }

--- a/rag-view/src/pages/HomePage.jsx
+++ b/rag-view/src/pages/HomePage.jsx
@@ -143,13 +143,13 @@ function HomePage() {
        {!auth ? (
          <div className="space-y-3">
            <button
-              onClick={() => navigate("/register")}
+              onClick={() => { window.location.href = "/auth/register?redirect=/ragview"; }}
              className="w-full py-2.5 rounded-xl bg-indigo-500 hover:bg-indigo-400 active:bg-indigo-600 text-sm font-medium text-white shadow-md shadow-indigo-500/25 transition-colors"
            >
              Register
            </button>
            <button
-              onClick={() => navigate("/login")}
+              onClick={() => { window.location.href = "/auth/login?redirect=/ragview"; }}
              className="w-full py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 active:bg-slate-600 text-sm font-medium text-white transition-colors"
            >
              Login
--- a/rag-view/src/pages/LoginPage.jsx
+++ b/rag-view/src/pages/LoginPage.jsx
@@ -1,207 +0,0 @@
-import { useState, useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { useNavigate, Link, useSearchParams } from "react-router-dom";
-import { clearError, setOAuthTokens } from "../features/slices/details-slice";
-import fetchLoginUser from "../features/fetch-async/fetchLoginUser";
-
-function GoogleIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M47.532 24.552c0-1.636-.148-3.21-.422-4.728H24.48v8.95h12.954c-.558 3.012-2.254 5.564-4.8 7.278v6.048h7.774c4.548-4.19 7.124-10.364 7.124-17.548z" fill="#4285F4"/>
-      <path d="M24.48 48c6.504 0 11.958-2.156 15.944-5.9l-7.774-6.048c-2.156 1.444-4.912 2.298-8.17 2.298-6.282 0-11.606-4.244-13.51-9.946H2.918v6.244C6.886 42.692 15.1 48 24.48 48z" fill="#34A853"/>
-      <path d="M10.97 28.404A14.443 14.443 0 0 1 9.938 24c0-1.528.262-3.014.73-4.404V13.352H2.918A23.963 23.963 0 0 0 .48 24c0 3.868.926 7.526 2.438 10.648l8.052-6.244z" fill="#FBBC05"/>
-      <path d="M24.48 9.548c3.54 0 6.718 1.216 9.216 3.604l6.908-6.908C36.43 2.392 30.978 0 24.48 0 15.1 0 6.886 5.308 2.918 13.352l8.052 6.244c1.904-5.702 7.228-9.946 13.51-9.946-.002 0-.002-.002 0-.002z" fill="#EA4335"/>
-    </svg>
-  );
-}
-
-function GitHubIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.113.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
-    </svg>
-  );
-}
-
-function FacebookIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.886v2.268h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/>
-    </svg>
-  );
-}
-
-function LoginPage() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const { loading, error, token } = useSelector((state) => state.userDetails);
-
-  // Handle OAuth2 callback: ?token=...&refreshToken=...
-  useEffect(() => {
-    const urlToken = searchParams.get("token");
-    const urlRefreshToken = searchParams.get("refreshToken");
-    if (urlToken) {
-      dispatch(setOAuthTokens({ token: urlToken, refreshToken: urlRefreshToken }));
-      navigate("/", { replace: true });
-    }
-  }, [searchParams, dispatch, navigate]);
-
-  // Redirect if already logged in
-  useEffect(() => {
-    if (token) {
-      navigate("/");
-    }
-  }, [token, navigate]);
-
-  // Clear error on unmount
-  useEffect(() => {
-    return () => {
-      dispatch(clearError());
-    };
-  }, [dispatch]);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-
-    const result = await dispatch(fetchLoginUser({ email, password }));
-
-    if (fetchLoginUser.fulfilled.match(result)) {
-      navigate("/");
-    }
-  };
-
-  return (
-    <div className="min-h-[60vh] flex items-center justify-center">
-      <div className="w-full max-w-md bg-slate-900/80 backdrop-blur-xl rounded-2xl shadow-2xl border border-slate-700/60 p-8">
-        <h1 className="text-2xl font-semibold text-slate-50 text-center mb-2">
-          Login
-        </h1>
-        <p className="text-sm text-slate-400 text-center mb-6">
-          Enter your email and password, then press the button to continue.
-        </p>
-
-        {error && (
-          <div className="mb-4 p-3 rounded-xl bg-red-500/20 border border-red-500/50 text-red-300 text-sm text-center">
-            {error.message || `Error: ${error.status}`}
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit} className="space-y-5">
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-slate-200">
-              Email
-            </label>
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="Your email"
-              className="w-full rounded-xl bg-slate-800/80 border border-slate-600 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/60 focus:outline-none px-4 py-2.5 text-slate-100 placeholder:text-slate-500 text-sm"
-              required
-              disabled={loading}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-slate-200">
-              Password
-            </label>
-            <input
-              type="password"
-              value={password}
-              minLength={8}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Your password"
-              className="w-full rounded-xl bg-slate-800/80 border border-slate-600 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/60 focus:outline-none px-4 py-2.5 text-slate-100 placeholder:text-slate-500 text-sm"
-              required
-              disabled={loading}
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full mt-2 inline-flex items-center justify-center rounded-xl bg-indigo-500 hover:bg-indigo-400 active:bg-indigo-600 disabled:bg-indigo-500/50 disabled:cursor-not-allowed transition-colors px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-indigo-500/30"
-          >
-            {loading ? (
-              <>
-                <svg
-                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
-                  <circle
-                    className="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    strokeWidth="4"
-                  ></circle>
-                  <path
-                    className="opacity-75"
-                    fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  ></path>
-                </svg>
-                Logging in...
-              </>
-            ) : (
-              "Login"
-            )}
-          </button>
-        </form>
-
-        {/* OAuth2 section */}
-        <div className="mt-6 flex items-center gap-3">
-          <div className="flex-1 h-px bg-slate-700" />
-          <span className="text-xs text-slate-500 font-medium">or</span>
-          <div className="flex-1 h-px bg-slate-700" />
-        </div>
-
-        <div className="mt-4 space-y-3">
-          <a
-            href="/oauth2/authorization/google"
-            className="w-full inline-flex items-center justify-center gap-3 rounded-xl bg-slate-800 hover:bg-slate-700 active:bg-slate-900 border border-slate-600 hover:border-slate-500 transition-colors px-4 py-2.5 text-sm font-medium text-slate-200"
-          >
-            <GoogleIcon />
-            Login with Google
-          </a>
-
-          <a
-            href="/oauth2/authorization/github"
-            className="w-full inline-flex items-center justify-center gap-3 rounded-xl bg-slate-800 hover:bg-slate-700 active:bg-slate-900 border border-slate-600 hover:border-slate-500 transition-colors px-4 py-2.5 text-sm font-medium text-slate-200"
-          >
-            <GitHubIcon />
-            Login with GitHub
-          </a>
-
-          <a
-            href="/oauth2/authorization/facebook"
-            className="w-full inline-flex items-center justify-center gap-3 rounded-xl bg-slate-800 hover:bg-slate-700 active:bg-slate-900 border border-slate-600 hover:border-slate-500 transition-colors px-4 py-2.5 text-sm font-medium text-slate-200"
-          >
-            <FacebookIcon />
-            Login with Facebook
-          </a>
-        </div>
-
-        <p className="mt-6 text-center text-sm text-slate-400">
-          Don't have an account?{" "}
-          <Link
-              to="/register"
-              className="text-indigo-400 hover:text-indigo-300 transition-colors"
-          >
-            Register
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
-}
-
-export default LoginPage;
--- a/rag-view/src/pages/RegisterPage.jsx
+++ b/rag-view/src/pages/RegisterPage.jsx
@@ -1,163 +0,0 @@
-import { useState, useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
-import fetchRegisterUser from "../features/fetch-async/fetchRegisterUser";
-import {
-  USER_NAME_UNDEFINED,
-  USER_EMAIL_UNDEFINED,
-} from "../features/constants";
-
-function RegisterPage() {
-  const [login, setLogin] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirm, setConfirm] = useState("");
-  const [validationError, setValidationError] = useState("");
-
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-
-  const { userName, userEmail, loading, error } = useSelector(
-    (state) => state.userDetails
-  );
-
-  useEffect(() => {
-    if (loading) return;
-
-    if (
-      userName !== USER_NAME_UNDEFINED &&
-      userEmail !== USER_EMAIL_UNDEFINED
-    ) {
-      navigate("/");
-    }
-  }, [loading, userName, userEmail, navigate]);
-
-  const handleClear = () => {
-    setLogin("");
-    setEmail("");
-    setPassword("");
-    setConfirm("");
-    setValidationError("");
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    setValidationError("");
-
-    if (login.length < 3) {
-      setValidationError("Login must be at least 3 characters.");
-      return;
-    }
-    if (password.length < 8) {
-      setValidationError("Password must be at least 8 characters.");
-      return;
-    }
-    if (password !== confirm) {
-      setValidationError("Password and Confirm password do not match.");
-      return;
-    }
-
-    const payload = {
-      username: login,
-      email: email,
-      password: password,
-      confirmPassword: confirm,
-    };
-
-    dispatch(fetchRegisterUser(payload));
-  };
-
-  return (
-    <div className="min-h-[60vh] flex items-center justify-center">
-      <div className="w-full max-w-md bg-slate-900/80 backdrop-blur-xl rounded-2xl shadow-2xl border border-slate-700/60 p-8">
-        <h1 className="text-2xl font-semibold text-slate-50 text-center mb-2">
-          Register
-        </h1>
-        <p className="text-sm text-slate-400 text-center mb-6">
-          Create a new account by choosing a login, email and a strong password.
-        </p>
-
-        {(validationError || error) && (
-          <div className="mb-4 text-sm text-red-400 text-center">
-            {validationError || error}
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit} className="space-y-5">
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-slate-200">
-              Login
-            </label>
-            <input
-              type="text"
-              value={login}
-              onChange={(e) => setLogin(e.target.value)}
-              placeholder="Your login"
-              className="w-full rounded-xl bg-slate-800/80 border border-slate-600 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/60 focus:outline-none px-4 py-2.5 text-slate-100 placeholder:text-slate-500 text-sm"
-            />
-          </div>
-
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-slate-200">
-              Email
-            </label>
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="Your email"
-              className="w-full rounded-xl bg-slate-800/80 border border-slate-600 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/60 focus:outline-none px-4 py-2.5 text-slate-100 placeholder:text-slate-500 text-sm"
-            />
-          </div>
-
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-slate-200">
-              Password
-            </label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Your password"
-              className="w-full rounded-xl bg-slate-800/80 border border-slate-600 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/60 focus:outline-none px-4 py-2.5 text-slate-100 placeholder:text-slate-500 text-sm"
-            />
-          </div>
-
-          <div className="space-y-2">
-            <label className="block text-sm font-medium text-slate-200">
-              Confirm password
-            </label>
-            <input
-              type="password"
-              value={confirm}
-              onChange={(e) => setConfirm(e.target.value)}
-              placeholder="Repeat your password"
-              className="w-full rounded-xl bg-slate-800/80 border border-slate-600 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/60 focus:outline-none px-4 py-2.5 text-slate-100 placeholder:text-slate-500 text-sm"
-            />
-          </div>
-
-          <div className="flex gap-3 mt-2">
-            <button
-              type="submit"
-              disabled={loading}
-              className="flex-1 inline-flex items-center justify-center rounded-xl bg-indigo-500 hover:bg-indigo-400 disabled:opacity-60 disabled:cursor-not-allowed active:bg-indigo-600 transition-colors px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-indigo-500/30"
-            >
-              {loading ? "Registering..." : "Register"}
-            </button>
-            {(validationError || error) && (
-              <button
-                type="button"
-                onClick={handleClear}
-                className="inline-flex items-center justify-center rounded-xl bg-slate-700 hover:bg-slate-600 active:bg-slate-800 transition-colors px-4 py-2.5 text-sm font-semibold text-slate-300"
-              >
-                Clear
-              </button>
-            )}
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
-
-export default RegisterPage;