@lilaquadrat/design-core 0.2.1 → 0.3.0

package/src/functions/PaymenyProviderFactory.ts

@@ -2,26 +2,26 @@ import ShopifyGraphQLAPI from './shopify.provider';
 import type PaymentProvider from '../interfaces/PaymentProvider.interface';
 import StripePaymentProvider from './stripe.provider';
 
-export default function PaymentProviderFactory (type: 'internal' | 'shopify' | 'stripe', config?: Record<string, string>): PaymentProvider {
+export default function PaymentProviderFactory(type: 'internal' | 'shopify' | 'stripe', config?: Record<string, string>): PaymentProvider {
 
-  let newProvider: PaymentProvider;
+    let newProvider: PaymentProvider;
 
-  if(type === 'shopify') {
+    if(type === 'shopify') {
 
-    if(!config?.store || !config.token) throw new Error('PAYMENT_CONFIG_MISSING');
+        if(!config?.store || !config.token) throw new Error('PAYMENT_CONFIG_MISSING');
 
-    newProvider = new ShopifyGraphQLAPI(config.store, config.token);
+        newProvider = new ShopifyGraphQLAPI(config.store, config.token);
 
-  } else if(type === 'stripe') {
+    } else if(type === 'stripe') {
 
-    newProvider = new StripePaymentProvider();
+        newProvider = new StripePaymentProvider();
     
-  } else {
+    } else {
     
-    throw new Error('NO_PAYMENT_PROVIDER');
+        throw new Error('NO_PAYMENT_PROVIDER');
 
-  }
+    }
 
-  return newProvider;
+    return newProvider;
 
 }

package/src/functions/auth0.provider.ts

@@ -0,0 +1,75 @@
+import { Auth0Client, type Auth0ClientOptions } from '@auth0/auth0-spa-js';
+import type AppState from '../interfaces/AppState.interface';
+import type AuthCallbackResult from '../interfaces/AuthCallbackResult.interface';
+import type AuthProvider from '../interfaces/AuthProvider.interface';
+import type IdTokenExtended from '../interfaces/IdTokenExtended.interface';
+
+export default class Auth0Provider implements AuthProvider {
+
+    private readonly auth0: Auth0Client;
+
+    private readonly returnTo?: string;
+
+    constructor(options: Auth0ClientOptions) {
+
+        this.auth0 = new Auth0Client(options);
+
+        const redirectUri = options.authorizationParams?.redirect_uri;
+
+        if (redirectUri) this.returnTo = new URL(redirectUri).origin;
+
+    }
+
+    async init(): Promise<void> {}
+
+    isAuthenticated(): Promise<boolean> {
+
+        return this.auth0.isAuthenticated();
+
+    }
+
+    getToken(): Promise<string | undefined> {
+
+        return this.auth0.getTokenSilently({ authorizationParams: { scope: 'openid profile email offline_access' } });
+
+    }
+
+    refreshToken(): Promise<string | undefined> {
+
+        return this.auth0.getTokenSilently({ cacheMode: 'off', authorizationParams: { scope: 'openid profile email offline_access' } });
+
+    }
+
+    getTokenContent(): Promise<IdTokenExtended | undefined> {
+
+        return this.auth0.getIdTokenClaims();
+
+    }
+
+    triggerLogin(appState: AppState): Promise<void> {
+
+        return this.auth0.loginWithRedirect<AppState>({ appState });
+
+    }
+
+    triggerSignup(appState: AppState): Promise<void> {
+
+        return this.auth0.loginWithRedirect<AppState>({ appState, authorizationParams: { screen_hint: 'signup' } });
+
+    }
+
+    triggerLogout(): Promise<void> {
+
+        return this.auth0.logout(this.returnTo ? { logoutParams: { returnTo: this.returnTo } } : undefined);
+
+    }
+
+    async handleCallback(): Promise<AuthCallbackResult> {
+
+        const result = await this.auth0.handleRedirectCallback<AppState>();
+
+        return { appState: result.appState };
+
+    }
+
+}

package/src/functions/keycloak.provider.ts

@@ -0,0 +1,228 @@
+import Keycloak from 'keycloak-js';
+import type AppState from '../interfaces/AppState.interface';
+import type AuthCallbackResult from '../interfaces/AuthCallbackResult.interface';
+import type AuthConfig from '../interfaces/AuthConfig.interface';
+import type AuthProvider from '../interfaces/AuthProvider.interface';
+import type IdTokenExtended from '../interfaces/IdTokenExtended.interface';
+
+const appStateStoragePrefix = 'lila-auth-keycloak:';
+
+export default class KeycloakProvider implements AuthProvider {
+
+    private readonly keycloak: Keycloak;
+
+    private initialization?: Promise<void>;
+
+    private initializationError?: Error;
+
+    private callbackState?: string;
+
+    private callbackCode?: string;
+
+    private callbackError?: string;
+
+    private callbackErrorDescription?: string;
+
+    private callbackAppState?: AppState;
+
+    private callbackHandled = false;
+
+    constructor(private readonly config: Extract<AuthConfig, { type: 'keycloak' }>) {
+
+        this.keycloak = new Keycloak({ url: config.url, realm: config.realm, clientId: config.clientId });
+
+    }
+
+    init(): Promise<void> {
+
+        this.initialization ??= this.initialize();
+
+        return this.initialization;
+
+    }
+
+    private async initialize(): Promise<void> {
+
+        const currentUrl = new URL(window.location.href);
+
+        // Match the SDK's last-value handling when callback parameters are repeated.
+        this.callbackState = currentUrl.searchParams.getAll('state').pop() || undefined;
+        this.callbackCode = currentUrl.searchParams.getAll('code').pop() || undefined;
+        this.callbackError = currentUrl.searchParams.getAll('error').pop() || undefined;
+        this.callbackErrorDescription = currentUrl.searchParams.getAll('error_description').pop() || undefined;
+
+        if (this.callbackState && (this.callbackCode || this.callbackError)) {
+
+            this.callbackAppState = this.readAppState(this.callbackState);
+
+        }
+
+        try {
+
+            await this.keycloak.init({
+                // Unconfigured SSO checks redirect the page; callbacks must not fall back to another SSO session either.
+                onLoad: this.config.silentCheckSsoRedirectUri && !this.callbackCode && !this.callbackError ? 'check-sso' : undefined,
+                redirectUri: currentUrl.href,
+                flow: 'standard',
+                responseMode: 'query',
+                pkceMethod: 'S256',
+                scope: this.config.scope || 'openid profile email',
+                ...(this.config.silentCheckSsoRedirectUri ? {
+                    silentCheckSsoRedirectUri: this.config.silentCheckSsoRedirectUri,
+                    silentCheckSsoFallback: false,
+                } : {}),
+            });
+
+        } catch (error) {
+
+            this.initializationError = error instanceof Error ? error : new Error('Keycloak initialization failed', { cause: error });
+
+            throw this.initializationError;
+
+        }
+
+    }
+
+    async isAuthenticated(): Promise<boolean> {
+
+        return this.keycloak.authenticated === true;
+
+    }
+
+    async getToken(): Promise<string | undefined> {
+
+        if (!this.keycloak.authenticated) return undefined;
+
+        await this.keycloak.updateToken(30);
+
+        return this.keycloak.token;
+
+    }
+
+    async refreshToken(): Promise<string | undefined> {
+
+        if (!this.keycloak.authenticated) return undefined;
+
+        await this.keycloak.updateToken(-1);
+
+        return this.keycloak.token;
+
+    }
+
+    async getTokenContent(): Promise<IdTokenExtended | undefined> {
+
+        return this.keycloak.idTokenParsed;
+
+    }
+
+    triggerLogin(appState: AppState): Promise<void> {
+
+        return this.redirectToLogin(appState);
+
+    }
+
+    triggerSignup(appState: AppState): Promise<void> {
+
+        return this.redirectToLogin(appState, 'register');
+
+    }
+
+    async triggerLogout(): Promise<void> {
+
+        await this.keycloak.logout({ redirectUri: new URL(this.getRedirectUri(), window.location.origin).origin });
+
+    }
+
+    async handleCallback(): Promise<AuthCallbackResult> {
+
+        if (this.callbackHandled) throw new Error('Keycloak callback has already been handled');
+
+        this.callbackHandled = true;
+
+        try {
+
+            await this.init();
+
+            if (this.initializationError) throw this.initializationError;
+            if (!this.callbackState || (!this.callbackCode && !this.callbackError)) throw new Error('No Keycloak callback available');
+            if (this.callbackError) throw new Error(this.callbackErrorDescription || this.callbackError);
+            if (!this.keycloak.authenticated) throw new Error('Keycloak callback did not authenticate the user');
+
+            return { appState: this.callbackAppState };
+
+        } finally {
+
+            this.removeAppState();
+            this.callbackAppState = undefined;
+
+        }
+
+    }
+
+    private getRedirectUri(): string {
+
+        return this.config.redirectUri || new URL('/login-callback', window.location.origin).href;
+
+    }
+
+    private async redirectToLogin(appState: AppState, action?: 'register'): Promise<void> {
+
+        await this.init();
+
+        const loginUrl = await this.keycloak.createLoginUrl({ redirectUri: this.getRedirectUri(), action });
+        const state = new URL(loginUrl).searchParams.get('state');
+
+        if (!state) throw new Error('Keycloak login URL is missing OAuth state');
+
+        window.sessionStorage.setItem(appStateStoragePrefix + state, JSON.stringify(appState));
+        window.location.assign(loginUrl);
+
+    }
+
+    private readAppState(state: string): AppState | undefined {
+
+        try {
+
+            const stored = window.sessionStorage.getItem(appStateStoragePrefix + state);
+
+            if (!stored) return undefined;
+
+            const value: unknown = JSON.parse(stored);
+
+            if (typeof value !== 'object' || value === null || Array.isArray(value)) return undefined;
+            if ('customerId' in value && typeof value.customerId !== 'string') return undefined;
+            if ('emailConfirmationCode' in value && typeof value.emailConfirmationCode !== 'string') return undefined;
+
+            const appState: AppState = {};
+
+            if ('customerId' in value && typeof value.customerId === 'string') appState.customerId = value.customerId;
+            if ('emailConfirmationCode' in value && typeof value.emailConfirmationCode === 'string') appState.emailConfirmationCode = value.emailConfirmationCode;
+
+            return appState;
+
+        } catch {
+
+            // Unavailable or malformed app state must not bypass the SDK's callback validation.
+            return undefined;
+
+        }
+
+    }
+
+    private removeAppState(): void {
+
+        if (!this.callbackState || (!this.callbackCode && !this.callbackError)) return;
+
+        try {
+
+            window.sessionStorage.removeItem(appStateStoragePrefix + this.callbackState);
+
+        } catch {
+
+            // Storage restrictions must not hide the authentication result or its original error.
+
+        }
+
+    }
+
+}

package/src/functions/lila-dom.ts

@@ -1,97 +1,97 @@
 export class Dom {
 
-  bindings: {event: string, element: any, func: EventListenerOrEventListenerObject}[];
+    bindings: {event: string, element: any, func: EventListenerOrEventListenerObject}[];
 
-  constructor () {
+    constructor() {
 
-    this.bindings = [];
+        this.bindings = [];
 
-  }
+    }
 
-  on (events: string, selector: string, func: EventListener) {
+    on(events: string, selector: string, func: EventListener) {
 
-    const splitEvents = events.split(' ');
-    const selectedElement = this.getElement(selector);
+        const splitEvents = events.split(' ');
+        const selectedElement = this.getElement(selector);
 
-    splitEvents.forEach((event) => {
+        splitEvents.forEach((event) => {
 
-      this.bindings.push({ event, element: selectedElement, func });
-      selectedElement.addEventListener(event, func);
+            this.bindings.push({ event, element: selectedElement, func });
+            selectedElement.addEventListener(event, func);
 
-    });
+        });
 
-  }
+    }
 
-  onElement (events: string, element: HTMLElement, func: EventListener) {
+    onElement(events: string, element: HTMLElement, func: EventListener) {
 
-    const splitEvents = events.split(' ');
+        const splitEvents = events.split(' ');
 
-    splitEvents.forEach((event) => {
+        splitEvents.forEach((event) => {
 
-      this.bindings.push({ event, element, func });
-      element.addEventListener(event, func);
+            this.bindings.push({ event, element, func });
+            element.addEventListener(event, func);
 
-    });
+        });
 
-  }
+    }
 
-  off (events: string, selector: string) {
+    off(events: string, selector: string) {
 
-    const splitEvents = events.split(' ');
-    const selectedElement = this.getElement(selector);
-    let item;
+        const splitEvents = events.split(' ');
+        const selectedElement = this.getElement(selector);
+        let item;
 
-    splitEvents.forEach((event) => {
+        splitEvents.forEach((event) => {
 
-      item = this.bindings.find((e) => event === e.event && e.element === selectedElement);
+            item = this.bindings.find((e) => event === e.event && e.element === selectedElement);
 
-      if(!item) return;
+            if(!item) return;
 
-      this.bindings.splice(this.bindings.indexOf(item), 1);
+            this.bindings.splice(this.bindings.indexOf(item), 1);
 
-      selectedElement.removeEventListener(event, item.func);
+            selectedElement.removeEventListener(event, item.func);
 
-    });
+        });
 
-  }
+    }
 
-  destroyBindings () {
+    destroyBindings() {
 
-    this.bindings.forEach((e) => {
+        this.bindings.forEach((e) => {
 
-      e.element.removeEventListener(e.event, e.func);
+            e.element.removeEventListener(e.event, e.func);
 
-    });
+        });
 
-    this.bindings = [];
+        this.bindings = [];
 
-  }
+    }
 
-  getElement (selector: string) {
+    getElement(selector: string) {
 
-    let selectedElement: Document | HTMLElement;
+        let selectedElement: Document | HTMLElement;
 
-    if (selector.length > 0) {
+        if (selector.length > 0) {
 
-      selectedElement = document.querySelector(selector) as HTMLElement;
+            selectedElement = document.querySelector(selector) as HTMLElement;
 
-    } else {
+        } else {
 
-      selectedElement = document;
+            selectedElement = document;
 
-    }
+        }
 
-    return selectedElement;
+        return selectedElement;
 
-  }
+    }
 
-  // set title (title: string) {
+    // set title (title: string) {
 
-  //   document.title = title
-  //     ? `${title} ${this.store.settings?.title?.short}`
-  //     : this.store.settings?.title?.full;
+    //   document.title = title
+    //     ? `${title} ${this.store.settings?.title?.short}`
+    //     : this.store.settings?.title?.full;
 
-  // }
+    // }
 
 }