diff --git a/.env.template b/.env.template index 5a864be6..219faa18 100644 --- a/.env.template +++ b/.env.template @@ -1,6 +1,7 @@ # OpenID Connect Configuration for Onboarding API OIDC_ISSUER= OIDC_CLIENT_ID= +OIDC_CLIENT_ID_MCP= OIDC_SCOPES= OIDC_REDIRECT_URI=http://localhost:5173 diff --git a/package-lock.json b/package-lock.json index 796925d8..c0b8f4da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,8 +13,8 @@ "@fastify/cookie": "^11.0.2", "@fastify/env": "^5.0.2", "@fastify/http-proxy": "^11.1.2", - "@fastify/secure-session": "^8.2.0", "@fastify/sensible": "^6.0.3", + "@fastify/session": "^11.1.0", "@fastify/static": "^8.1.1", "@fastify/vite": "^8.1.3", "@hookform/resolvers": "^5.0.0", @@ -1419,30 +1419,6 @@ "undici": "^7.0.0" } }, - "node_modules/@fastify/secure-session": { - "version": "8.2.0", - "resolved": "https://registry.npmjs.org/@fastify/secure-session/-/secure-session-8.2.0.tgz", - "integrity": "sha512-E1linEHVV86c0Gt+ohujcuRsCeedhD2M3X5+a2aU9Ln0YDC0bbuA7bE6QQzf/HAacOpt9+CJqV5NqdlQr9ui0A==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/fastify" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/fastify" - } - ], - "license": "MIT", - "dependencies": { - "@fastify/cookie": "^11.0.1", - "fastify-plugin": "^5.0.0", - "sodium-native": "^4.0.10" - }, - "bin": { - "secure-session": "genkey.js" - } - }, "node_modules/@fastify/send": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@fastify/send/-/send-4.0.0.tgz", @@ -1491,6 +1467,26 @@ "vary": "^1.1.2" } }, + "node_modules/@fastify/session": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/@fastify/session/-/session-11.1.0.tgz", + "integrity": "sha512-OxAX79PtVyTKxfmHT8e0jDFliw/2EmhOxe1Mj35jhL20j8CEpj5Li2zOVi5PqHc5Y+7N2w0tOmtM8mB6NjAIGw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fastify" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/fastify" + } + ], + "license": "MIT", + "dependencies": { + "fastify-plugin": "^5.0.1", + "safe-stable-stringify": "^2.4.3" + } + }, "node_modules/@fastify/static": { "version": "8.2.0", "resolved": "https://registry.npmjs.org/@fastify/static/-/static-8.2.0.tgz", @@ -5397,74 +5393,6 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "license": "MIT" }, - "node_modules/bare-addon-resolve": { - "version": "1.9.4", - "resolved": "https://registry.npmjs.org/bare-addon-resolve/-/bare-addon-resolve-1.9.4.tgz", - "integrity": "sha512-unn6Vy/Yke6F99vg/7tcrvM2KUvIhTNniaSqDbam4AWkd4NhvDVSrQiRYVlNzUV2P7SPobkCK7JFVxrJk9btCg==", - "license": "Apache-2.0", - "dependencies": { - "bare-module-resolve": "^1.10.0", - "bare-semver": "^1.0.0" - }, - "peerDependencies": { - "bare-url": "*" - }, - "peerDependenciesMeta": { - "bare-url": { - "optional": true - } - } - }, - "node_modules/bare-module-resolve": { - "version": "1.10.2", - "resolved": "https://registry.npmjs.org/bare-module-resolve/-/bare-module-resolve-1.10.2.tgz", - "integrity": "sha512-C9COe/GhWfVXKytW3DElTkiBU+Gb2OXeaVkdGdRB/lp26TVLESHkTGS876iceAGdvtPgohfp9nX8vXHGvN3++Q==", - "license": "Apache-2.0", - "dependencies": { - "bare-semver": "^1.0.0" - }, - "peerDependencies": { - "bare-url": "*" - }, - "peerDependenciesMeta": { - "bare-url": { - "optional": true - } - } - }, - "node_modules/bare-os": { - "version": "3.6.1", - "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.6.1.tgz", - "integrity": "sha512-uaIjxokhFidJP+bmmvKSgiMzj2sV5GPHaZVAIktcxcpCyBFFWO+YlikVAdhmUo2vYFvFhOXIAlldqV29L8126g==", - "license": "Apache-2.0", - "engines": { - "bare": ">=1.14.0" - } - }, - "node_modules/bare-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz", - "integrity": "sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==", - "license": "Apache-2.0", - "dependencies": { - "bare-os": "^3.0.1" - } - }, - "node_modules/bare-semver": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/bare-semver/-/bare-semver-1.0.1.tgz", - "integrity": "sha512-UtggzHLiTrmFOC/ogQ+Hy7VfoKoIwrP1UFcYtTxoCUdLtsIErT8+SWtOC2DH/snT9h+xDrcBEPcwKei1mzemgg==", - "license": "Apache-2.0" - }, - "node_modules/bare-url": { - "version": "2.1.6", - "resolved": "https://registry.npmjs.org/bare-url/-/bare-url-2.1.6.tgz", - "integrity": "sha512-FgjDeR+/yDH34By4I0qB5NxAoWv7dOTYcOXwn73kr+c93HyC2lU6tnjifqUe33LKMJcDyCYPQjEAqgOQiXkE2Q==", - "license": "Apache-2.0", - "dependencies": { - "bare-path": "^3.0.0" - } - }, "node_modules/base64-js": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", @@ -12431,19 +12359,6 @@ "throttleit": "^1.0.0" } }, - "node_modules/require-addon": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/require-addon/-/require-addon-1.1.0.tgz", - "integrity": "sha512-KbXAD5q2+v1GJnkzd8zzbOxchTkStSyJZ9QwoCq3QwEXAaIlG3wDYRZGzVD357jmwaGY7hr5VaoEAL0BkF0Kvg==", - "license": "Apache-2.0", - "dependencies": { - "bare-addon-resolve": "^1.3.0", - "bare-url": "^2.1.0" - }, - "engines": { - "bare": ">=1.10.0" - } - }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -13524,15 +13439,6 @@ "tslib": "^2.0.3" } }, - "node_modules/sodium-native": { - "version": "4.3.3", - "resolved": "https://registry.npmjs.org/sodium-native/-/sodium-native-4.3.3.tgz", - "integrity": "sha512-OnxSlN3uyY8D0EsLHpmm2HOFmKddQVvEMmsakCrXUzSd8kjjbzL413t4ZNF3n0UxSwNgwTyUvkmZHTfuCeiYSw==", - "license": "MIT", - "dependencies": { - "require-addon": "^1.1.0" - } - }, "node_modules/sonic-boom": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-4.2.0.tgz", diff --git a/package.json b/package.json index 4217a74a..df524fd7 100644 --- a/package.json +++ b/package.json @@ -24,8 +24,8 @@ "@fastify/cookie": "^11.0.2", "@fastify/env": "^5.0.2", "@fastify/http-proxy": "^11.1.2", - "@fastify/secure-session": "^8.2.0", "@fastify/sensible": "^6.0.3", + "@fastify/session": "^11.1.0", "@fastify/static": "^8.1.1", "@fastify/vite": "^8.1.3", "@hookform/resolvers": "^5.0.0", diff --git a/public/locales/en.json b/public/locales/en.json index 63ff429e..f015f5a7 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -242,9 +242,6 @@ }, "learnButton": "Learn how to do this in code" }, - "App": { - "loading": "Loading..." - }, "Providers": { "headerProviders": "Providers", "tableHeaderVersion": "Version", diff --git a/server/config/env.js b/server/config/env.js index c137d93d..42c7cb0f 100644 --- a/server/config/env.js +++ b/server/config/env.js @@ -1,21 +1,31 @@ -import fastifyPlugin from "fastify-plugin"; -import fastifyEnv from "@fastify/env"; +import fastifyPlugin from 'fastify-plugin'; +import fastifyEnv from '@fastify/env'; const schema = { - type: "object", - required: ["OIDC_ISSUER", "OIDC_CLIENT_ID", "OIDC_REDIRECT_URI", "OIDC_SCOPES", "POST_LOGIN_REDIRECT", "COOKIE_SECRET", "API_BACKEND_URL"], + type: 'object', + required: [ + 'OIDC_ISSUER', + 'OIDC_CLIENT_ID', + 'OIDC_CLIENT_ID_MCP', + 'OIDC_REDIRECT_URI', + 'OIDC_SCOPES', + 'POST_LOGIN_REDIRECT', + 'COOKIE_SECRET', + 'API_BACKEND_URL', + ], properties: { // Application variables (.env) - OIDC_ISSUER: { type: "string" }, - OIDC_CLIENT_ID: { type: "string" }, - OIDC_REDIRECT_URI: { type: "string" }, - OIDC_SCOPES: { type: "string" }, - POST_LOGIN_REDIRECT: { type: "string" }, - COOKIE_SECRET: { type: "string" }, - API_BACKEND_URL: { type: "string" }, + OIDC_ISSUER: { type: 'string' }, + OIDC_CLIENT_ID: { type: 'string' }, + OIDC_CLIENT_ID_MCP: { type: 'string' }, + OIDC_REDIRECT_URI: { type: 'string' }, + OIDC_SCOPES: { type: 'string' }, + POST_LOGIN_REDIRECT: { type: 'string' }, + COOKIE_SECRET: { type: 'string' }, + API_BACKEND_URL: { type: 'string' }, // System variables - NODE_ENV: { type: "string", enum: ["development", "production"] }, + NODE_ENV: { type: 'string', enum: ['development', 'production'] }, }, }; diff --git a/server/plugins/auth-utils.js b/server/plugins/auth-utils.js index a90689ad..f5fb8649 100644 --- a/server/plugins/auth-utils.js +++ b/server/plugins/auth-utils.js @@ -76,6 +76,9 @@ async function authUtilsPlugin(fastify) { fastify.decorate("prepareOidcLoginRedirect", (request, oidcConfig, authorizationEndpoint) => { request.log.info("Preparing OIDC login redirect."); + const { redirectTo } = request.query; + request.session.set("postLoginRedirectRoute", redirectTo); + const { clientId, redirectUri, scopes } = oidcConfig; const state = crypto.randomBytes(16).toString("hex"); @@ -143,6 +146,7 @@ async function authUtilsPlugin(fastify) { refreshToken: tokens.refresh_token, expiresAt: null, userInfo: extractUserInfoFromIdToken(request, tokens.id_token), + postLoginRedirectRoute: request.session.get("postLoginRedirectRoute") || "", }; if (tokens.expires_in && typeof tokens.expires_in === "number") { diff --git a/server/plugins/http-proxy.js b/server/plugins/http-proxy.js index d793131f..9ab3bf58 100644 --- a/server/plugins/http-proxy.js +++ b/server/plugins/http-proxy.js @@ -1,6 +1,5 @@ import fp from "fastify-plugin"; import httpProxy from "@fastify/http-proxy"; -import { COOKIE_NAME_ONBOARDING } from "./secure-session.js"; import { AuthenticationError } from "./auth-utils.js"; function proxyPlugin(fastify) { @@ -13,15 +12,21 @@ function proxyPlugin(fastify) { preHandler: async (request, reply) => { request.log.info("Entering HTTP proxy preHandler."); + const useCrate = request.headers["x-use-crate"]; + + const keyAccessToken = useCrate ? "onboarding_accessToken" : "mcp_accessToken"; + const keyTokenExpiresAt = useCrate ? "onboarding_tokenExpiresAt" : "mcp_tokenExpiresAt"; + const keyRefreshToken = useCrate ? "onboarding_refreshToken" : "mcp_refreshToken"; + // Check if there is an access token - const accessToken = request.session.get("accessToken"); + const accessToken = request.session.get(keyAccessToken); if (!accessToken) { request.log.error("Missing access token."); return reply.unauthorized("Missing access token."); } // Check if the access token is expired or about to expire - const expiresAt = request.session.get("tokenExpiresAt"); + const expiresAt = request.session.get(keyTokenExpiresAt); const now = Date.now(); const REFRESH_BUFFER_SECONDS = 20; // to allow for network latency if (!expiresAt || now < expiresAt - REFRESH_BUFFER_SECONDS) { @@ -32,11 +37,10 @@ function proxyPlugin(fastify) { request.log.info({ expiresAt: new Date(expiresAt).toISOString() }, "Access token is expired or about to expire; attempting refresh."); // Check if there is a refresh token - const refreshToken = request.session.get("refreshToken"); + const refreshToken = request.session.get(keyRefreshToken); if (!refreshToken) { request.log.error("Missing refresh token; deleting session."); - request.session.delete(); - reply.clearCookie(COOKIE_NAME_ONBOARDING, { path: "/" }); + request.session.destroy(); return reply.unauthorized("Session expired without token refresh capability."); } @@ -50,24 +54,23 @@ function proxyPlugin(fastify) { }, issuerConfiguration.tokenEndpoint); if (!refreshedTokenData || !refreshedTokenData.accessToken) { request.log.error("Token refresh failed (no access token); deleting session."); - request.session.delete(); - reply.clearCookie(COOKIE_NAME_ONBOARDING, { path: "/" }); + request.session.destroy(); return reply.unauthorized("Session expired and token refresh failed."); } request.log.info("Token refresh successful; updating the session."); - request.session.set("accessToken", refreshedTokenData.accessToken); + request.session.set(keyAccessToken, refreshedTokenData.accessToken); if (refreshedTokenData.refreshToken) { - request.session.set("refreshToken", refreshedTokenData.refreshToken); + request.session.set(keyRefreshToken, refreshedTokenData.refreshToken); } else { - request.session.delete("refreshToken"); + request.session.delete(keyRefreshToken); } if (refreshedTokenData.expiresIn) { const newExpiresAt = Date.now() + (refreshedTokenData.expiresIn * 1000); - request.session.set("tokenExpiresAt", newExpiresAt); + request.session.set(keyTokenExpiresAt, newExpiresAt); } else { - request.session.delete("tokenExpiresAt"); + request.session.delete(keyTokenExpiresAt); } request.log.info("Token refresh successful and session updated; continuing with the HTTP request."); @@ -81,10 +84,15 @@ function proxyPlugin(fastify) { } }, replyOptions: { - rewriteRequestHeaders: (req, headers) => ({ - ...headers, - authorization: req.session.get("accessToken") - }), + rewriteRequestHeaders: (req, headers) => { + const useCrate = req.headers["x-use-crate"]; + const accessToken = useCrate ? req.session.get("onboarding_accessToken") : `${req.session.get("onboarding_accessToken")},${req.session.get("mcp_accessToken")}`; + + return { + ...headers, + authorization: accessToken, + } + }, }, }); } diff --git a/server/plugins/secure-session.js b/server/plugins/session.js similarity index 65% rename from server/plugins/secure-session.js rename to server/plugins/session.js index d9191408..213e9a17 100644 --- a/server/plugins/secure-session.js +++ b/server/plugins/session.js @@ -1,18 +1,15 @@ -import secureSession from "@fastify/secure-session"; +import fastifySession from "@fastify/session"; import fp from "fastify-plugin"; import fastifyCookie from "@fastify/cookie"; -export const COOKIE_NAME_ONBOARDING = "onboarding"; - async function secureSessionPlugin(fastify) { const { COOKIE_SECRET, NODE_ENV } = fastify.config; await fastify.register(fastifyCookie); - fastify.register(secureSession, { - secret: Buffer.from(COOKIE_SECRET, "hex"), - cookieName: COOKIE_NAME_ONBOARDING, + fastify.register(fastifySession, { + secret: COOKIE_SECRET, cookie: { path: "/", httpOnly: true, diff --git a/server/routes/auth-mcp.js b/server/routes/auth-mcp.js new file mode 100644 index 00000000..65d245d7 --- /dev/null +++ b/server/routes/auth-mcp.js @@ -0,0 +1,58 @@ +import fp from "fastify-plugin"; +import { AuthenticationError } from "../plugins/auth-utils.js"; + + +async function authPlugin(fastify) { + const { OIDC_ISSUER, OIDC_CLIENT_ID_MCP, OIDC_REDIRECT_URI, OIDC_SCOPES, POST_LOGIN_REDIRECT } = fastify.config; + + // Make MCP issuer configuration globally available + // TODO: This is a temporary solution until we have a proper way to manage multiple issuers + const mcpIssuerConfiguration = await fastify.discoverIssuerConfiguration(OIDC_ISSUER); + fastify.decorate("mcpIssuerConfiguration", mcpIssuerConfiguration); + + fastify.get("/auth/mcp/login", async (req, reply) => { + const redirectUri = fastify.prepareOidcLoginRedirect(req, { + clientId: OIDC_CLIENT_ID_MCP, + redirectUri: OIDC_REDIRECT_URI, + scopes: OIDC_SCOPES, + }, mcpIssuerConfiguration.authorizationEndpoint); + + reply.redirect(redirectUri); + }); + + fastify.get("/auth/mcp/callback", async (req, reply) => { + try { + const callbackResult = await fastify.handleOidcCallback(req, { + clientId: OIDC_CLIENT_ID_MCP, + redirectUri: OIDC_REDIRECT_URI, + }, mcpIssuerConfiguration.tokenEndpoint); + + req.session.set("mcp_accessToken", callbackResult.accessToken); + req.session.set("mcp_refreshToken", callbackResult.refreshToken); + + if (callbackResult.expiresAt) { + req.session.set("mcp_tokenExpiresAt", callbackResult.expiresAt); + } else { + req.session.delete("mcp_tokenExpiresAt"); + } + + reply.redirect(POST_LOGIN_REDIRECT + callbackResult.postLoginRedirectRoute); + } catch (error) { + if (error instanceof AuthenticationError) { + req.log.error("AuthenticationError during OIDC callback: %s", error); + return reply.serviceUnavailable("Error during OIDC callback."); + } else { + throw error; + } + } + }); + + fastify.get("/auth/mcp/me", async (req, reply) => { + const accessToken = req.session.get("mcp_accessToken"); + + const isAuthenticated = Boolean(accessToken); + reply.send({ isAuthenticated }); + }); +} + +export default fp(authPlugin); diff --git a/server/routes/auth.js b/server/routes/auth-onboarding.js similarity index 63% rename from server/routes/auth.js rename to server/routes/auth-onboarding.js index 2bfcfcef..9dc668a8 100644 --- a/server/routes/auth.js +++ b/server/routes/auth-onboarding.js @@ -1,5 +1,4 @@ import fp from "fastify-plugin"; -import { COOKIE_NAME_ONBOARDING } from "../plugins/secure-session.js"; import { AuthenticationError } from "../plugins/auth-utils.js"; @@ -12,7 +11,7 @@ async function authPlugin(fastify) { fastify.decorate("issuerConfiguration", issuerConfiguration); - fastify.get("/auth/login", async (req, reply) => { + fastify.get("/auth/onboarding/login", async (req, reply) => { const redirectUri = fastify.prepareOidcLoginRedirect(req, { clientId: OIDC_CLIENT_ID, redirectUri: OIDC_REDIRECT_URI, @@ -23,22 +22,24 @@ async function authPlugin(fastify) { }); - fastify.get("/auth/callback", async (req, reply) => { + fastify.get("/auth/onboarding/callback", async (req, reply) => { try { const callbackResult = await fastify.handleOidcCallback(req, { clientId: OIDC_CLIENT_ID, redirectUri: OIDC_REDIRECT_URI, }, issuerConfiguration.tokenEndpoint); - req.session.set("accessToken", callbackResult.accessToken); - req.session.set("refreshToken", callbackResult.refreshToken); - req.session.set("userInfo", callbackResult.userInfo); + req.session.set("onboarding_accessToken", callbackResult.accessToken); + req.session.set("onboarding_refreshToken", callbackResult.refreshToken); + req.session.set("onboarding_userInfo", callbackResult.userInfo); if (callbackResult.expiresAt) { - req.session.set("tokenExpiresAt", callbackResult.expiresAt); + req.session.set("onboarding_tokenExpiresAt", callbackResult.expiresAt); } else { - req.session.delete("tokenExpiresAt"); + req.session.delete("onboarding_tokenExpiresAt"); } + + reply.redirect(POST_LOGIN_REDIRECT + callbackResult.postLoginRedirectRoute); } catch (error) { if (error instanceof AuthenticationError) { req.log.error("AuthenticationError during OIDC callback: %s", error); @@ -47,25 +48,21 @@ async function authPlugin(fastify) { throw error; } } - - reply.redirect(POST_LOGIN_REDIRECT); }); - fastify.get("/auth/me", async (req, reply) => { - const accessToken = req.session.get("accessToken"); - const userInfo = req.session.get("userInfo"); + fastify.get("/auth/onboarding/me", async (req, reply) => { + const accessToken = req.session.get("onboarding_accessToken"); + const userInfo = req.session.get("onboarding_userInfo"); const isAuthenticated = Boolean(accessToken); const user = isAuthenticated ? userInfo : null; reply.send({ isAuthenticated, user }); }); - - fastify.post("/auth/logout", async (_req, reply) => { + fastify.post("/auth/logout", async (req, reply) => { // TODO: Idp sign out flow - //_req.session.delete(); // remove payload - reply.clearCookie(COOKIE_NAME_ONBOARDING, { path: "/" }); + req.session.destroy(); reply.send({ message: "Logged out" }); }); } diff --git a/src/App.tsx b/src/App.tsx index 06e8f725..8bdcca23 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,13 @@ import AppRouter from './AppRouter'; -import { useAuth } from './spaces/onboarding/auth/AuthContext.tsx'; +import { useAuthOnboarding } from './spaces/onboarding/auth/AuthContextOnboarding.tsx'; import '@ui5/webcomponents-icons/dist/AllIcons.d.ts'; import { useEffect } from 'react'; import { useFrontendConfig } from './context/FrontendConfigContext.tsx'; -import { useTranslation } from 'react-i18next'; import LoginView from './views/Login.tsx'; +import { BusyIndicator } from '@ui5/webcomponents-react'; function App() { - const auth = useAuth(); - const { t } = useTranslation(); + const auth = useAuthOnboarding(); const frontendConfig = useFrontendConfig(); useEffect(() => { @@ -18,7 +17,7 @@ function App() { }, []); if (auth.isLoading) { - return
{t('App.loading')}
; + return ; } if (!auth.isAuthenticated) { diff --git a/src/common/auth/AuthCallbackHandler.tsx b/src/common/auth/AuthCallbackHandler.tsx new file mode 100644 index 00000000..9ca9fb2c --- /dev/null +++ b/src/common/auth/AuthCallbackHandler.tsx @@ -0,0 +1,72 @@ +import { ReactNode, useEffect } from 'react'; +import { BusyIndicator } from '@ui5/webcomponents-react'; + +const REDIRECT_TARGETS = { + onboarding: '/api/auth/onboarding/callback', + mcp: '/api/auth/mcp/callback', +} as const; + +type AuthFlow = keyof typeof REDIRECT_TARGETS; + +function isAuthFlow(value: unknown): value is AuthFlow { + if (typeof value !== 'string') { + return false; + } + return Object.keys(REDIRECT_TARGETS).includes(value); +} + +export const AUTH_FLOW_SESSION_KEY = 'auth:post-callback-flow'; + +function useAuthCallback() { + const params = new URLSearchParams(window.location.search); + const code = params.get('code'); + const state = params.get('state'); + const iss = params.get('iss'); + + const potentialAuthFlow = sessionStorage.getItem(AUTH_FLOW_SESSION_KEY); + + const isCallbackInProgress = !!(code && state && potentialAuthFlow); + + useEffect(() => { + if (!isCallbackInProgress) { + return; + } + + if (!isAuthFlow(potentialAuthFlow)) { + throw new Error( + `Unknown authFlow '${potentialAuthFlow}'. Should be typeof '${Object.keys(REDIRECT_TARGETS).join(' | ')}'`, + ); + } + const redirectTarget = REDIRECT_TARGETS[potentialAuthFlow]; + + const forwardUrl = new URL(redirectTarget, window.location.origin); + forwardUrl.searchParams.append('code', code); + forwardUrl.searchParams.append('state', state); + if (iss) { + forwardUrl.searchParams.append('iss', iss); + } + + sessionStorage.removeItem(AUTH_FLOW_SESSION_KEY); + window.location.href = forwardUrl.toString(); + }, [isCallbackInProgress, potentialAuthFlow, code, state, iss]); + + return { + isLoading: isCallbackInProgress, + }; +} + +export interface AuthCallbackHandlerProps { + children?: ReactNode; +} + +/** + * This component centrally handles client-side redirects from external identity providers after user authentication. + * It forwards temporary credentials (e.g.,`code`,`state`) to the backend API endpoint, + * whose URL was previously and temporarily stored in `sessionStorage`. + */ +export function AuthCallbackHandler({ children }: AuthCallbackHandlerProps) { + const { isLoading } = useAuthCallback(); + + // The component remains clean and focused on rendering. + return <>{isLoading ? : children}; +} diff --git a/src/components/Core/ShellBar.tsx b/src/components/Core/ShellBar.tsx index df6cc3bb..6cfcd53f 100644 --- a/src/components/Core/ShellBar.tsx +++ b/src/components/Core/ShellBar.tsx @@ -11,7 +11,7 @@ import { ShellBarDomRef, Ui5CustomEvent, } from '@ui5/webcomponents-react'; -import { useAuth } from '../../spaces/onboarding/auth/AuthContext.tsx'; +import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding.tsx'; import { RefObject, useEffect, useRef, useState } from 'react'; import { ShellBarProfileClickEventDetail } from '@ui5/webcomponents-fiori/dist/ShellBar.js'; import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js'; @@ -21,7 +21,7 @@ import styles from './ShellBar.module.css'; import { ThemingParameters } from '@ui5/webcomponents-react-base'; export function ShellBarComponent() { - const auth = useAuth(); + const auth = useAuthOnboarding(); const profilePopoverRef = useRef(null); const betaPopoverRef = useRef(null); const [profilePopoverOpen, setProfilePopoverOpen] = useState(false); @@ -107,7 +107,7 @@ const ProfilePopover = ({ setOpen: (arg0: boolean) => void; popoverRef: RefObject; }) => { - const auth = useAuth(); + const auth = useAuthOnboarding(); const { t } = useTranslation(); return ( diff --git a/src/components/Dialogs/CreateProjectDialogContainer.tsx b/src/components/Dialogs/CreateProjectDialogContainer.tsx index e13d3bef..4dae1bd1 100644 --- a/src/components/Dialogs/CreateProjectDialogContainer.tsx +++ b/src/components/Dialogs/CreateProjectDialogContainer.tsx @@ -8,7 +8,7 @@ import { } from './CreateProjectWorkspaceDialog.tsx'; import { useToast } from '../../context/ToastContext.tsx'; -import { useAuth } from '../../spaces/onboarding/auth/AuthContext.tsx'; +import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding.tsx'; import { MemberRoles } from '../../lib/api/types/shared/members.ts'; import { useTranslation } from 'react-i18next'; @@ -46,7 +46,7 @@ export function CreateProjectDialogContainer({ }, }); const { t } = useTranslation(); - const { user } = useAuth(); + const { user } = useAuthOnboarding(); const username = user?.email; diff --git a/src/components/Dialogs/CreateWorkspaceDialogContainer.tsx b/src/components/Dialogs/CreateWorkspaceDialogContainer.tsx index 267ead65..4849fea5 100644 --- a/src/components/Dialogs/CreateWorkspaceDialogContainer.tsx +++ b/src/components/Dialogs/CreateWorkspaceDialogContainer.tsx @@ -17,7 +17,7 @@ import { import { projectnameToNamespace } from '../../utils'; import { ListWorkspaces } from '../../lib/api/types/crate/listWorkspaces'; import { useToast } from '../../context/ToastContext.tsx'; -import { useAuth } from '../../spaces/onboarding/auth/AuthContext.tsx'; +import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding.tsx'; import { Member, MemberRoles } from '../../lib/api/types/shared/members.ts'; import { useTranslation } from 'react-i18next'; import { zodResolver } from '@hookform/resolvers/zod'; @@ -57,7 +57,7 @@ export function CreateWorkspaceDialogContainer({ }, }); const { t } = useTranslation(); - const { user } = useAuth(); + const { user } = useAuthOnboarding(); const username = user?.email; diff --git a/src/lib/api/fetch.ts b/src/lib/api/fetch.ts index 43faca74..957bd9ec 100644 --- a/src/lib/api/fetch.ts +++ b/src/lib/api/fetch.ts @@ -49,7 +49,7 @@ export const fetchApiServer = async ( if (!res.ok) { if (res.status === 401) { // Unauthorized, redirect to the login page - window.location.href = `/api/auth/login`; + window.location.href = `/api/auth/onboarding/login`; } const error = new APIError( 'An error occurred while fetching the data.', diff --git a/src/lib/shared/McpContext.tsx b/src/lib/shared/McpContext.tsx index e30bb808..e60a7e96 100644 --- a/src/lib/shared/McpContext.tsx +++ b/src/lib/shared/McpContext.tsx @@ -3,6 +3,8 @@ import { ControlPlane as ManagedControlPlaneResource } from '../api/types/crate/ import { ApiConfigProvider } from '../../components/Shared/k8s'; import useResource from '../api/useApiResource.ts'; import { GetKubeconfig } from '../api/types/crate/getKubeconfig.ts'; +import { useAuthMcp } from '../../spaces/mcp/auth/AuthContextMcp.tsx'; +import { BusyIndicator } from '@ui5/webcomponents-react'; interface McpContext { project: string; @@ -80,6 +82,17 @@ export function WithinManagedControlPlane({ }: { children?: ReactNode; }) { + const auth = useAuthMcp(); + + if (auth.isLoading) { + return ; + } + + if (!auth.isAuthenticated) { + auth.login(); + return null; + } + return ( <> {children} diff --git a/src/main.tsx b/src/main.tsx index 77092524..378b9cab 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -15,7 +15,8 @@ import { ApolloClientProvider } from './spaces/onboarding/services/ApolloClientP import { IllustratedBanner } from './components/Ui/IllustratedBanner/IllustratedBanner.tsx'; import { useTranslation } from 'react-i18next'; import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js'; -import { AuthProvider } from './spaces/onboarding/auth/AuthContext.tsx'; +import { AuthProviderOnboarding } from './spaces/onboarding/auth/AuthContextOnboarding.tsx'; +import { AuthCallbackHandler } from './common/auth/AuthCallbackHandler.tsx'; const ErrorFallback = ({ error }: FallbackProps) => { const { t } = useTranslation(); @@ -35,24 +36,26 @@ export function createApp() { {}}> }> - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/src/spaces/mcp/auth/AuthContextMcp.tsx b/src/spaces/mcp/auth/AuthContextMcp.tsx new file mode 100644 index 00000000..6488d9d3 --- /dev/null +++ b/src/spaces/mcp/auth/AuthContextMcp.tsx @@ -0,0 +1,80 @@ +import { createContext, useState, useEffect, ReactNode, use } from 'react'; +import { MeResponseSchema } from './auth.schemas'; +import { AUTH_FLOW_SESSION_KEY } from '../../../common/auth/AuthCallbackHandler.tsx'; + +interface AuthContextMcpType { + isLoading: boolean; + isAuthenticated: boolean; + error: Error | null; + login: () => void; +} + +const AuthContextMcp = createContext(null); + +export function AuthProviderMcp({ children }: { children: ReactNode }) { + const [isAuthenticated, setIsAuthenticated] = useState(false); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + + // Check the authentication status when the component mounts + useEffect(() => { + void refreshAuthStatus(); + }, []); + + async function refreshAuthStatus() { + setIsLoading(true); + setError(null); + + try { + const response = await fetch('/api/auth/mcp/me'); + if (!response.ok) { + let errorBody; + try { + errorBody = await response.json(); + } catch (_) { + /* safe to ignore */ + } + throw new Error( + errorBody?.message || + `Authentication check failed with status: ${response.status}`, + ); + } + + const body = await response.json(); + const validationResult = MeResponseSchema.safeParse(body); + if (!validationResult.success) { + throw new Error( + `Auth API response validation failed: ${validationResult.error.flatten()}`, + ); + } + + const { isAuthenticated: apiIsAuthenticated } = validationResult.data; + setIsAuthenticated(apiIsAuthenticated); + } catch (err) { + setError(err instanceof Error ? err : new Error('Authentication error.')); + setIsAuthenticated(false); + } finally { + setIsLoading(false); + } + } + + const login = () => { + sessionStorage.setItem(AUTH_FLOW_SESSION_KEY, 'mcp'); + + window.location.href = `/api/auth/mcp/login?redirectTo=${encodeURIComponent(window.location.hash)}`; + }; + + return ( + + {children} + + ); +} + +export const useAuthMcp = () => { + const context = use(AuthContextMcp); + if (!context) { + throw new Error('useAuthMcp must be used within an AuthProviderMcp.'); + } + return context; +}; diff --git a/src/spaces/mcp/auth/auth.schemas.ts b/src/spaces/mcp/auth/auth.schemas.ts new file mode 100644 index 00000000..683afa60 --- /dev/null +++ b/src/spaces/mcp/auth/auth.schemas.ts @@ -0,0 +1,5 @@ +import { z } from 'zod'; + +export const MeResponseSchema = z.object({ + isAuthenticated: z.boolean(), +}); diff --git a/src/spaces/onboarding/auth/AuthContext.tsx b/src/spaces/onboarding/auth/AuthContextOnboarding.tsx similarity index 65% rename from src/spaces/onboarding/auth/AuthContext.tsx rename to src/spaces/onboarding/auth/AuthContextOnboarding.tsx index bebe71ed..f68c2f61 100644 --- a/src/spaces/onboarding/auth/AuthContext.tsx +++ b/src/spaces/onboarding/auth/AuthContextOnboarding.tsx @@ -1,7 +1,8 @@ import { createContext, useState, useEffect, ReactNode, use } from 'react'; import { MeResponseSchema, User } from './auth.schemas'; +import { AUTH_FLOW_SESSION_KEY } from '../../../common/auth/AuthCallbackHandler.tsx'; -interface AuthContextType { +interface AuthContextOnboardingType { isLoading: boolean; isAuthenticated: boolean; user: User | null; @@ -10,40 +11,19 @@ interface AuthContextType { logout: () => Promise; } -const AuthContext = createContext(null); +const AuthContextOnboarding = createContext( + null, +); -export function AuthProvider({ children }: { children: ReactNode }) { +export function AuthProviderOnboarding({ children }: { children: ReactNode }) { const [isAuthenticated, setIsAuthenticated] = useState(false); const [user, setUser] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); - // Handle the redirect from the IdP - useEffect(() => { - const params = new URLSearchParams(location.search); - const code = params.get('code'); - const state = params.get('state'); - const iss = params.get('iss'); - - if (code && state) { - // Construct the URL to forward to the BFF - const forwardUrl = new URL('/api/auth/callback', window.location.origin); - forwardUrl.searchParams.append('code', code); - forwardUrl.searchParams.append('state', state); - if (iss) { - forwardUrl.searchParams.append('iss', iss); - } - window.location.href = forwardUrl.toString(); - } - }, []); - // Check the authentication status when the component mounts useEffect(() => { - // Only run checkAuthStatus if not currently handling a redirect - const params = new URLSearchParams(window.location.search); - if (!params.has('code') && !params.has('error')) { - void refreshAuthStatus(); - } + void refreshAuthStatus(); }, []); async function refreshAuthStatus() { @@ -51,7 +31,7 @@ export function AuthProvider({ children }: { children: ReactNode }) { setError(null); try { - const response = await fetch('/api/auth/me'); + const response = await fetch('/api/auth/onboarding/me'); if (!response.ok) { let errorBody; try { @@ -87,7 +67,9 @@ export function AuthProvider({ children }: { children: ReactNode }) { } const login = () => { - window.location.href = `/api/auth/login`; + sessionStorage.setItem(AUTH_FLOW_SESSION_KEY, 'onboarding'); + + window.location.href = `/api/auth/onboarding/login?redirectTo=${encodeURIComponent(window.location.hash)}`; }; const logout = async () => { @@ -115,18 +97,20 @@ export function AuthProvider({ children }: { children: ReactNode }) { }; return ( - {children} - + ); } -export const useAuth = () => { - const context = use(AuthContext); +export const useAuthOnboarding = () => { + const context = use(AuthContextOnboarding); if (!context) { - throw new Error('useAuth must be used within an AuthProvider.'); + throw new Error( + 'useAuthOnboarding must be used within an AuthProviderOnboarding.', + ); } return context; }; diff --git a/src/views/ControlPlanes/ControlPlaneView.tsx b/src/views/ControlPlanes/ControlPlaneView.tsx index 2f0a3209..8fd42679 100644 --- a/src/views/ControlPlanes/ControlPlaneView.tsx +++ b/src/views/ControlPlanes/ControlPlaneView.tsx @@ -30,6 +30,7 @@ import useResource from '../../lib/api/useApiResource'; import { YamlViewButtonWithLoader } from '../../components/Yaml/YamlViewButtonWithLoader.tsx'; import { Landscapers } from '../../components/ControlPlane/Landscapers.tsx'; +import { AuthProviderMcp } from '../../spaces/mcp/auth/AuthContextMcp.tsx'; export default function ControlPlaneView() { const { projectName, workspaceName, controlPlaneName, contextName } = @@ -68,128 +69,130 @@ export default function ControlPlaneView() { context: contextName!, }} > - - } - //TODO: actionBar should use Toolbar and ToolbarButton for consistent design - actionsBar={ -
- - - -
- } - /> - } - > - + + } + //TODO: actionBar should use Toolbar and ToolbarButton for consistent design + actionsBar={ +
+ + + +
+ } + /> + } > - - {t('ControlPlaneView.componentsTitle')} - - } - noAnimation + - - - - - - {t('ControlPlaneView.crossplaneTitle')} - - } - noAnimation + + {t('ControlPlaneView.componentsTitle')} + + } + noAnimation + > + + + + -
- -
-
- -
-
- -
- - - - - {t('ControlPlaneView.landscapersTitle')} - - } - noAnimation + + {t('ControlPlaneView.crossplaneTitle')} + + } + noAnimation + > +
+ +
+
+ +
+
+ +
+ + + - - - - - {t('ControlPlaneView.gitOpsTitle')} - } - noAnimation + + {t('ControlPlaneView.landscapersTitle')} + + } + noAnimation + > + + + + - - - - - + {t('ControlPlaneView.gitOpsTitle')} + } + noAnimation + > + + + + + + ); } diff --git a/src/views/Login.tsx b/src/views/Login.tsx index 45c603e1..9e825d46 100644 --- a/src/views/Login.tsx +++ b/src/views/Login.tsx @@ -1,4 +1,4 @@ -import { useAuth } from '../spaces/onboarding/auth/AuthContext.tsx'; +import { useAuthOnboarding } from '../spaces/onboarding/auth/AuthContextOnboarding.tsx'; import { Button, Card, FlexBox, Text } from '@ui5/webcomponents-react'; import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; import './login.css'; @@ -7,7 +7,7 @@ import { useLink } from '../lib/shared/useLink.ts'; import { useTranslation } from 'react-i18next'; export default function LoginView() { - const auth = useAuth(); + const auth = useAuthOnboarding(); const { documentationHomepage } = useLink(); const { t } = useTranslation();