@functionalcms/svelte-components 5.15.0 → 5.16.0

package/dist/index-server.d.ts

@@ -10,3 +10,4 @@ export type { RedirectResponse } from './server-side/auth/RedirectResponse.js';
 export { isHuman } from './components/form/AntiBot.js';
 export { paraglideHandler } from './server-side/handlers/paraglideHandler.js';
 export { redirectPipelineHandler } from './server-side/handlers/redirectPipelineHandler.js';
+export { saveCookie, loadCookie } from './server-side/cookies.js';

package/dist/index-server.js

@@ -9,3 +9,4 @@ export { getCommunicationService, getDataService, getTemplateService, getWebsite
 export { isHuman } from './components/form/AntiBot.js';
 export { paraglideHandler } from './server-side/handlers/paraglideHandler.js';
 export { redirectPipelineHandler } from './server-side/handlers/redirectPipelineHandler.js';
+export { saveCookie, loadCookie } from './server-side/cookies.js';

package/dist/pages/auth/callback/+server.ts

@@ -0,0 +1,89 @@
+import { CACHE_TOKEN, CACHE_URL, CLIENT_ID, SERVER_URL, CACHE_SECRET } from '$env/static/private';
+import { type RequestHandler } from '@sveltejs/kit';
+import { Redis } from '@upstash/redis';
+import * as o from "oauth4webapi";
+import { saveCookie } from '@functionalcms/svelte-components/index-server.js';
+import { loadCookie } from '../../../lib/index-server';
+
+const pkceCookieName = "functionalcms_pkce";
+const stateCookieName = "functionalcms_state";
+const sessionCookieName = "functionalcms_sessionId";
+
+function parseJwtToken(token: string) {
+    const base64 = token.split('.')[1]
+        .replace(/-/g, '+')
+        .replace(/_/g, '/');
+
+    const json = decodeURIComponent(
+        atob(base64)
+            .split('')
+            .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+            .join('')
+    );
+
+    return JSON.parse(json);
+}
+
+async function handleCallback (state: string, codeVerifier: string, callbackUrl: URL): Promise<any> {
+    const discovery = await o.discoveryRequest(new URL(SERVER_URL));
+    const metadata = await o.processDiscoveryResponse(new URL(SERVER_URL), discovery);
+    const client: o.Client = {
+        client_id: CLIENT_ID,
+        token_endpoint_auth_method: "none"
+    };
+    const callbackParameters
+        = o.validateAuthResponse(
+            metadata,
+            client,
+            callbackUrl,
+            state);
+
+    // Exchange code for tokens
+    const tokenResponse
+        = await o.authorizationCodeGrantRequest(
+            metadata,
+            client,
+            o.None(),
+            callbackParameters,
+            callbackUrl.toString(),
+            codeVerifier,
+        );
+
+    // Parse tokens
+    const tokens
+        = await o.processAuthorizationCodeResponse(
+            metadata,
+            client,
+            tokenResponse
+        );
+
+    return {
+        access_token: tokens.access_token,
+        id_token: tokens.id_token,
+        refresh_token: tokens.refresh_token,
+    };
+};
+
+
+/** @type {import('./$types').RequestHandler} */
+export const GET: RequestHandler = async ({ url, cookies }) => {
+    const expectedState = await loadCookie(cookies, CACHE_SECRET, stateCookieName);
+    const codeVerifier = await loadCookie(cookies, CACHE_SECRET, pkceCookieName);
+
+    const response = await handleCallback(expectedState ?? '', codeVerifier ?? '', new URL(url));
+
+    const headers = new Headers();
+    headers.set('Location', url.origin);
+    const sessionId = crypto.randomUUID();
+    const accessToken = parseJwtToken(response.access_token);
+
+    await saveCookie(headers, CACHE_SECRET, sessionCookieName, sessionId);
+
+    const redis = new Redis({ url: CACHE_URL, token: CACHE_TOKEN });
+    const result = await redis.set(sessionId, JSON.stringify(response.access_token), { ex: accessToken.exp - Math.floor(Date.now() / 1000) });
+
+    cookies.delete(pkceCookieName, { path: "/" });
+    cookies.delete(stateCookieName, { path: "/" });
+
+    return new Response(null, { status: 302, headers });
+}

package/dist/pages/auth/login/+server.ts

@@ -0,0 +1,45 @@
+import { CLIENT_ID, SERVER_URL, CACHE_SECRET } from '$env/static/private';
+import { type RequestHandler } from '@sveltejs/kit';
+import * as o from "oauth4webapi";
+import { saveCookie } from '@functionalcms/svelte-components/index-server.js';
+
+const pkceCookieName = "functionalcms_pkce";
+const stateCookieName = "functionalcms_state";
+
+function generateRandomState() {
+    const array = new Uint8Array(16);
+    crypto.getRandomValues(array);
+    return Array.from(array, (byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+async function createLoginHeader(serverUrl: string, clientId: string, callbackUrl: URL) {
+    const code_verifier = o.generateRandomCodeVerifier();
+    const code_challenge = await o.calculatePKCECodeChallenge(code_verifier);
+    const state = generateRandomState();
+
+    const authUrl = new URL(serverUrl + '/login/oauth/authorize');
+    authUrl.searchParams.set('client_id', clientId);
+    authUrl.searchParams.set('redirect_uri', callbackUrl.toString());
+    authUrl.searchParams.set('response_type', 'code');
+    authUrl.searchParams.set('state', state);
+    authUrl.searchParams.set('code_challenge', code_challenge);
+    authUrl.searchParams.set('code_challenge_method', 'S256');
+    authUrl.searchParams.set('scope', 'openid profile email user.extended properties');
+
+    return { state, codeVerifier: code_verifier, authorisationUrl: authUrl.toString() };
+}
+
+/** @type {import('./$types').RequestHandler} */
+export const GET: RequestHandler = async ({ params, locals, url }) => {
+    const callbackUrl = new URL(`${url.origin}/auth/callback`);
+    const response = await createLoginHeader(SERVER_URL, CLIENT_ID, callbackUrl);
+
+    const headers = new Headers();
+    headers.set('Location', response.authorisationUrl);
+
+    await saveCookie(headers, CACHE_SECRET, pkceCookieName, response.codeVerifier);
+    await saveCookie(headers, CACHE_SECRET, stateCookieName, response.state);
+
+
+    return new Response(null, { status: 302, headers });
+}

package/dist/server-side/auth/userAuthenticationHandle.js

@@ -1,12 +1,10 @@
 import { deleteCookie, loadCookie, saveCookie } from "../cookies";
 import { userAuthenticationProvider } from "./userAuthenticationProvider";
-import { parse } from "svelte/compiler";
 import { Redis } from "@upstash/redis";
+import { parseJwtToken } from "../tokenToUserParser";
 const pkceCookieName = "functionalcms_pkce";
 const stateCookieName = "functionalcms_state";
 const sessionCookieName = "functionalcms_sessionId";
-const idTokenCookie = "functionalcms_id_token";
-const refreshTokenCookie = "functionalcms_refresh_token";
 export const userAuthenticationHandle = (secret, serverUrl, clientId, redis) => {
     const provider = userAuthenticationProvider(serverUrl, clientId);
     return async ({ event, resolve }) => {
@@ -36,16 +34,6 @@ function handleLogout(event) {
     event.locals.user = null;
     event.locals.session = {};
 }
-function parseJwt(token) {
-    const base64 = token.split('.')[1]
-        .replace(/-/g, '+')
-        .replace(/_/g, '/');
-    const json = decodeURIComponent(atob(base64)
-        .split('')
-        .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
-        .join(''));
-    return JSON.parse(json);
-}
 async function handleLogin(event, provider, secret) {
     const callbackUrl = new URL(`${event.url.origin}/auth/callback`);
     const response = await provider.handleLogin(callbackUrl);
@@ -62,16 +50,9 @@ async function handleCallback(event, secret, provider, redis) {
     const headers = new Headers();
     headers.set('Location', event.url.origin);
     const sessionId = crypto.randomUUID();
-    const accessToken = parseJwt(response.access_token);
+    const accessToken = parseJwtToken(response.access_token);
     await saveCookie(headers, secret, sessionCookieName, sessionId, accessToken.exp - Math.floor(Date.now() / 1000));
     redis.set(sessionId, JSON.stringify(response.access_token), { ex: accessToken.exp - Math.floor(Date.now() / 1000) });
-    // await saveCookie(headers, secret, accessTokenCookie, response.access_token, accessToken.exp - Math.floor(Date.now() / 1000));
-    // if (response.id_token) {
-    //     await saveCookie(headers, secret, idTokenCookie, response.id_token);
-    // }
-    // if (response.refresh_token) {
-    //     await saveCookie(headers, secret, refreshTokenCookie, response.refresh_token);
-    // }
     await deleteCookie(event.cookies, headers, pkceCookieName);
     await deleteCookie(event.cookies, headers, stateCookieName);
     return headers;

package/dist/server-side/functionalSequence.js

@@ -6,5 +6,5 @@ import { userHandler } from "./handlers/userHandler";
 import { accessTokenHandler } from "./handlers/accessTokenHandler";
 import { sitemapHandle } from "./handlers/sitemapHandler";
 export const hookSequence = (secret, redis, paraglideMiddleware, getTextDirection, settings, customHooks) => {
-    return sequence(userHandler(secret, redis), accessTokenHandler(secret), paraglideHandler(paraglideMiddleware, getTextDirection), authorizationHandle(), sitemapHandle(settings), ...customHooks, errorHandler);
+    return sequence(accessTokenHandler(secret, redis), userHandler(), paraglideHandler(paraglideMiddleware, getTextDirection), authorizationHandle(), sitemapHandle(settings), ...customHooks, errorHandler);
 };

package/dist/server-side/handlers/accessTokenHandler.d.ts

@@ -1,2 +1,3 @@
 import { type Handle } from '@sveltejs/kit';
-export declare const accessTokenHandler: (secret: string) => Handle;
+import { Redis } from '@upstash/redis';
+export declare const accessTokenHandler: (secret: string, redis: Redis) => Handle;

package/dist/server-side/handlers/accessTokenHandler.js

@@ -1,12 +1,14 @@
 import {} from '@sveltejs/kit';
 import { loadCookie } from '../cookies';
+import { Redis } from '@upstash/redis';
 const accessTokenCookie = "functionalcms_sessionId";
-export const accessTokenHandler = (secret) => {
+export const accessTokenHandler = (secret, redis) => {
     return async ({ event, resolve }) => {
         try {
-            let token = await loadCookie(event.cookies, secret, accessTokenCookie);
-            if (token) {
-                event.locals.token = token;
+            let sessionId = await loadCookie(event.cookies, secret, accessTokenCookie);
+            if (sessionId) {
+                const accessToken = await redis.get(sessionId);
+                event.locals.token = accessToken;
             }
         }
         finally {

package/dist/server-side/handlers/userHandler.d.ts

@@ -1,3 +1,2 @@
 import { type Handle } from '@sveltejs/kit';
-import { Redis } from '@upstash/redis';
-export declare const userHandler: (secret: string, redis: Redis) => Handle;
+export declare const userHandler: () => Handle;

package/dist/server-side/handlers/userHandler.js

@@ -1,13 +1,13 @@
 import {} from '@sveltejs/kit';
 import { loadCookie } from '../cookies';
 import { Redis } from '@upstash/redis';
+import { parseJwtToken } from '../tokenToUserParser';
 const accessTokenCookie = "functionalcms_sessionId";
-export const userHandler = (secret, redis) => {
+export const userHandler = () => {
     return async ({ event, resolve }) => {
         try {
-            let sessionId = await loadCookie(event.cookies, secret, accessTokenCookie);
-            if (sessionId) {
-                const user = await redis.get(sessionId);
+            if (event.locals.token) {
+                const user = parseJwtToken(event.locals.token);
                 event.locals.user = user;
             }
         }

package/dist/server-side/tokenToUserParser.d.ts

@@ -0,0 +1 @@
+export declare function parseJwtToken(token: string): any;

package/dist/server-side/tokenToUserParser.js

@@ -0,0 +1,10 @@
+export function parseJwtToken(token) {
+    const base64 = token.split('.')[1]
+        .replace(/-/g, '+')
+        .replace(/_/g, '/');
+    const json = decodeURIComponent(atob(base64)
+        .split('')
+        .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+        .join(''));
+    return JSON.parse(json);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "5.15.0",
+	"version": "5.16.0",
 	"license": "MIT",
 	"watch": {
 		"build": {
@@ -14,9 +14,11 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build-css": "node -e \"const fs = require('node:fs'); fs.mkdirSync('./css', { recursive: true }); fs.copyFileSync('./src/css/functional.css', './css/functional.css');\"",
+		"build-modules": "node -e \"require('node:fs').cpSync('./src/pages', './dist/pages', { recursive: true })\"",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
-		"package": "npm run build-css && svelte-kit sync && svelte-package && publint",
+		"package": "npm run build-css && svelte-kit sync && svelte-package && npm run build-modules && publint",
+		"prepack": "npm run package",
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -37,6 +39,7 @@
 	"files": [
 		"dist",
 		"css",
+		"src/pages",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
@@ -46,6 +49,7 @@
 		"@sveltejs/kit": "^2.69.2",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "^7.2.0",
+		"cpy-cli": "^7.0.0",
 		"publint": "^0.3.21",
 		"svelte": "^5.56.4",
 		"svelte-check": "^4.7.2",
@@ -72,4 +76,4 @@
 	"main": "./dist/index.js",
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts"
-}
+}

package/src/pages/auth/callback/+server.ts

@@ -0,0 +1,89 @@
+import { CACHE_TOKEN, CACHE_URL, CLIENT_ID, SERVER_URL, CACHE_SECRET } from '$env/static/private';
+import { type RequestHandler } from '@sveltejs/kit';
+import { Redis } from '@upstash/redis';
+import * as o from "oauth4webapi";
+import { saveCookie } from '@functionalcms/svelte-components/index-server.js';
+import { loadCookie } from '../../../lib/index-server';
+
+const pkceCookieName = "functionalcms_pkce";
+const stateCookieName = "functionalcms_state";
+const sessionCookieName = "functionalcms_sessionId";
+
+function parseJwtToken(token: string) {
+    const base64 = token.split('.')[1]
+        .replace(/-/g, '+')
+        .replace(/_/g, '/');
+
+    const json = decodeURIComponent(
+        atob(base64)
+            .split('')
+            .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+            .join('')
+    );
+
+    return JSON.parse(json);
+}
+
+async function handleCallback (state: string, codeVerifier: string, callbackUrl: URL): Promise<any> {
+    const discovery = await o.discoveryRequest(new URL(SERVER_URL));
+    const metadata = await o.processDiscoveryResponse(new URL(SERVER_URL), discovery);
+    const client: o.Client = {
+        client_id: CLIENT_ID,
+        token_endpoint_auth_method: "none"
+    };
+    const callbackParameters
+        = o.validateAuthResponse(
+            metadata,
+            client,
+            callbackUrl,
+            state);
+
+    // Exchange code for tokens
+    const tokenResponse
+        = await o.authorizationCodeGrantRequest(
+            metadata,
+            client,
+            o.None(),
+            callbackParameters,
+            callbackUrl.toString(),
+            codeVerifier,
+        );
+
+    // Parse tokens
+    const tokens
+        = await o.processAuthorizationCodeResponse(
+            metadata,
+            client,
+            tokenResponse
+        );
+
+    return {
+        access_token: tokens.access_token,
+        id_token: tokens.id_token,
+        refresh_token: tokens.refresh_token,
+    };
+};
+
+
+/** @type {import('./$types').RequestHandler} */
+export const GET: RequestHandler = async ({ url, cookies }) => {
+    const expectedState = await loadCookie(cookies, CACHE_SECRET, stateCookieName);
+    const codeVerifier = await loadCookie(cookies, CACHE_SECRET, pkceCookieName);
+
+    const response = await handleCallback(expectedState ?? '', codeVerifier ?? '', new URL(url));
+
+    const headers = new Headers();
+    headers.set('Location', url.origin);
+    const sessionId = crypto.randomUUID();
+    const accessToken = parseJwtToken(response.access_token);
+
+    await saveCookie(headers, CACHE_SECRET, sessionCookieName, sessionId);
+
+    const redis = new Redis({ url: CACHE_URL, token: CACHE_TOKEN });
+    const result = await redis.set(sessionId, JSON.stringify(response.access_token), { ex: accessToken.exp - Math.floor(Date.now() / 1000) });
+
+    cookies.delete(pkceCookieName, { path: "/" });
+    cookies.delete(stateCookieName, { path: "/" });
+
+    return new Response(null, { status: 302, headers });
+}

package/src/pages/auth/login/+server.ts

@@ -0,0 +1,45 @@
+import { CLIENT_ID, SERVER_URL, CACHE_SECRET } from '$env/static/private';
+import { type RequestHandler } from '@sveltejs/kit';
+import * as o from "oauth4webapi";
+import { saveCookie } from '@functionalcms/svelte-components/index-server.js';
+
+const pkceCookieName = "functionalcms_pkce";
+const stateCookieName = "functionalcms_state";
+
+function generateRandomState() {
+    const array = new Uint8Array(16);
+    crypto.getRandomValues(array);
+    return Array.from(array, (byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+async function createLoginHeader(serverUrl: string, clientId: string, callbackUrl: URL) {
+    const code_verifier = o.generateRandomCodeVerifier();
+    const code_challenge = await o.calculatePKCECodeChallenge(code_verifier);
+    const state = generateRandomState();
+
+    const authUrl = new URL(serverUrl + '/login/oauth/authorize');
+    authUrl.searchParams.set('client_id', clientId);
+    authUrl.searchParams.set('redirect_uri', callbackUrl.toString());
+    authUrl.searchParams.set('response_type', 'code');
+    authUrl.searchParams.set('state', state);
+    authUrl.searchParams.set('code_challenge', code_challenge);
+    authUrl.searchParams.set('code_challenge_method', 'S256');
+    authUrl.searchParams.set('scope', 'openid profile email user.extended properties');
+
+    return { state, codeVerifier: code_verifier, authorisationUrl: authUrl.toString() };
+}
+
+/** @type {import('./$types').RequestHandler} */
+export const GET: RequestHandler = async ({ params, locals, url }) => {
+    const callbackUrl = new URL(`${url.origin}/auth/callback`);
+    const response = await createLoginHeader(SERVER_URL, CLIENT_ID, callbackUrl);
+
+    const headers = new Headers();
+    headers.set('Location', response.authorisationUrl);
+
+    await saveCookie(headers, CACHE_SECRET, pkceCookieName, response.codeVerifier);
+    await saveCookie(headers, CACHE_SECRET, stateCookieName, response.state);
+
+
+    return new Response(null, { status: 302, headers });
+}