@strivacity/sdk-vue 3.0.2 → 4.0.0-beta.0

package/package.json

@@ -1,19 +1,14 @@
 {
   "name": "@strivacity/sdk-vue",
-  "version": "3.0.2",
+  "version": "4.0.0-beta.0",
+  "description": "Strivacity Vue SDK client",
   "license": "MIT",
-  "description": "Strivacity Vue.js SDK client",
   "author": "strivacity <opensource@strivacity.com>",
   "repository": {
     "type": "git",
     "url": "https://github.com/Strivacity/sdk-js"
   },
-  "dependencies": {
-    "@strivacity/sdk-core": "3.0.2"
-  },
-  "peerDependencies": {
-    "vue": ">=3"
-  },
+  "sideEffects": false,
   "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -22,6 +17,48 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs",
       "default": "./dist/index.mjs"
+    },
+    "./composables": {
+      "types": "./dist/composables.d.ts",
+      "import": "./dist/composables.mjs",
+      "require": "./dist/composables.cjs",
+      "default": "./dist/composables.mjs"
+    },
+    "./errors": {
+      "types": "./dist/errors.d.ts",
+      "import": "./dist/errors.mjs",
+      "require": "./dist/errors.cjs",
+      "default": "./dist/errors.mjs"
+    },
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./dist/plugin.mjs",
+      "require": "./dist/plugin.cjs",
+      "default": "./dist/plugin.mjs"
+    },
+    "./storages": {
+      "types": "./dist/storages.d.ts",
+      "import": "./dist/storages.mjs",
+      "require": "./dist/storages.cjs",
+      "default": "./dist/storages.mjs"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.mjs",
+      "require": "./dist/types.cjs",
+      "default": "./dist/types.mjs"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.mjs",
+      "require": "./dist/utils.cjs",
+      "default": "./dist/utils.mjs"
     }
+  },
+  "dependencies": {
+    "@strivacity/sdk-core": "4.0.0-beta.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3"
   }
 }

package/project.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "name": "sdk-vue",
+  "projectType": "library",
+  "sourceRoot": "packages/sdk-vue/src",
+  "targets": {
+    "type-check": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["sdk-core:build"],
+      "options": {
+        "command": "tsc --noEmit --project packages/sdk-vue/tsconfig.app.json"
+      }
+    },
+    "build": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["type-check"],
+      "outputs": ["{workspaceRoot}/packages/sdk-vue/dist"],
+      "defaultConfiguration": "development",
+      "options": {
+        "cwd": "packages/sdk-vue"
+      },
+      "configurations": {
+        "serve": {
+          "mode": "development",
+          "command": "vite build --watch"
+        },
+        "development": {
+          "mode": "development",
+          "command": "vite build"
+        },
+        "production": {
+          "mode": "production",
+          "command": "vite build"
+        }
+      }
+    },
+    "test": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "cwd": "packages/sdk-vue",
+        "command": "vitest"
+      }
+    }
+  }
+}

package/src/composables.ts

@@ -0,0 +1,219 @@
+import type { InjectionKey } from 'vue';
+import type { RedirectFlow, PopupFlow, EmbeddedFlow, NativeFlow, NativeParams, NativeFlowState, NativeFlowMessage } from '@strivacity/sdk-core/types';
+import type { LoginContext, SDKContext, UseNativeLoginOptions } from './types';
+import { provide, inject, ref, onMounted, onUnmounted } from 'vue';
+import { FallbackError } from '@strivacity/sdk-core/utils/errors';
+import { unflattenObject } from '@strivacity/sdk-core/utils';
+
+export const STRIVACITY_SDK: InjectionKey<SDKContext<RedirectFlow | PopupFlow | NativeFlow | EmbeddedFlow>> = Symbol('strivacity-sdk');
+export const STRIVACITY_LOGIN_CONTEXT: InjectionKey<LoginContext> = Symbol('strivacity-login-context');
+
+/**
+ * A composable to access the Strivacity SDK context.
+ *
+ * @template T - The type of the Strivacity SDK flow (RedirectFlow, PopupFlow, NativeFlow, or EmbeddedFlow).
+ * @returns {SDKContext<T>} - The Strivacity SDK context.
+ * @throws {Error} - If the Strivacity SDK context is not found.
+ */
+export const useStrivacity = <
+	T extends RedirectFlow | PopupFlow | NativeFlow | EmbeddedFlow = RedirectFlow | PopupFlow | NativeFlow | EmbeddedFlow,
+>(): SDKContext<T> => {
+	const context = inject<SDKContext<T>>(STRIVACITY_SDK);
+
+	if (!context) {
+		throw new Error('Missing SDK context');
+	}
+
+	return context;
+};
+
+/**
+ * A composable to access the Strivacity SDK context specifically for native login flow.
+ *
+ * @returns {LoginContext} - The native flow context.
+ * @throws {Error} - If the Strivacity SDK context is not found.
+ */
+export const useNativeLoginContext = (): LoginContext => {
+	const context = inject<LoginContext>(STRIVACITY_LOGIN_CONTEXT);
+
+	if (!context) {
+		throw new Error('Missing SDK native login context');
+	}
+
+	return context;
+};
+
+/**
+ * A composable that manages a native login flow session.
+ *
+ * @param {UseNativeLoginOptions} [options] - Optional options for the login session.
+ * @returns {LoginContext} - The native flow context.
+ * @throws {Error} - If the Strivacity SDK context is not found.
+ */
+export function useNativeLogin(options: UseNativeLoginOptions = {}): ReturnType<typeof useNativeLoginContext> {
+	const abortController = new AbortController();
+	const { sdk } = useStrivacity<NativeFlow>();
+
+	const loading = ref<boolean>(true);
+	const forms = ref<Record<string, Record<string, unknown>>>({});
+	const messages = ref<Record<string, Record<string, NativeFlowMessage>>>({});
+	const state = ref<Partial<NativeFlowState>>({});
+
+	onMounted(async () => {
+		await sdk.init();
+
+		try {
+			await startSession(options.params);
+		} catch (error) {
+			if (error instanceof DOMException && error.name === 'AbortError') {
+				return;
+			}
+
+			sdk.logging?.error('Error fetching authorization URI', error);
+			void options.onError?.(error);
+			loading.value = false;
+		}
+	});
+
+	onUnmounted(() => abortController.abort());
+
+	function handleResponse(nextState: Partial<NativeFlowState>) {
+		if (sdk.session) {
+			return void options.onLogin?.(sdk.session);
+		}
+
+		const newState: NativeFlowState = {
+			hostedUrl: nextState?.hostedUrl ?? state.value.hostedUrl,
+			finalizeUrl: nextState?.finalizeUrl ?? state.value.finalizeUrl,
+			screen: nextState?.screen ?? state.value.screen,
+			forms: nextState?.forms ?? state.value.forms,
+			layout: nextState?.layout ?? state.value.layout,
+			messages: nextState?.messages ?? {},
+			branding: nextState?.branding ?? state.value.branding,
+		};
+
+		if (newState.screen !== state.value.screen) {
+			forms.value = {};
+			messages.value = {};
+
+			for (const form of newState.forms ?? []) {
+				forms.value[form.id] = {};
+				messages.value[form.id] = {};
+			}
+		} else {
+			sdk.logging?.info(`Updating screen: ${newState.screen}`);
+		}
+
+		for (const formId of Object.keys(newState.messages ?? {})) {
+			if (formId === 'global') {
+				// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+				void options.onGlobalMessage?.(newState.messages?.global!);
+			} else {
+				messages.value[formId] = newState.messages![formId] ?? {};
+			}
+		}
+
+		state.value = newState;
+
+		if (!newState.finalizeUrl) {
+			loading.value = false;
+		}
+	}
+
+	async function startSession(loginParams: NativeParams = {}) {
+		try {
+			loading.value = true;
+
+			const nextState = await sdk.startSession(loginParams);
+
+			if (nextState) {
+				handleResponse(nextState);
+			}
+		} catch (error) {
+			if (error instanceof FallbackError) {
+				sdk.logging?.error('Fallback error occurred', error);
+				void options.onFallback?.(error);
+			} else {
+				sdk.logging?.error('Error starting session', error);
+				void options.onError?.(error);
+			}
+		}
+	}
+
+	function triggerFallback(message?: string) {
+		sdk.logging?.warn(message ? `Triggering fallback due to: ${message}` : 'Triggering fallback');
+
+		if (!state.value.hostedUrl) {
+			const error = new Error('No hosted URL provided');
+			sdk.logging?.error('Fallback error', error);
+			throw error;
+		}
+
+		void options.onFallback?.(new FallbackError(new URL(state.value.hostedUrl)));
+	}
+
+	function triggerClose() {
+		sdk.logging?.debug('Triggering close');
+		void options.onClose?.();
+	}
+
+	async function submitForm(formId: string, customBody?: Record<string, unknown>) {
+		try {
+			loading.value = true;
+
+			const nextState = await sdk.submitForm(formId, customBody ?? unflattenObject(forms.value[formId] ?? {}));
+
+			if (nextState) {
+				handleResponse(nextState);
+			}
+		} catch (error) {
+			if (error instanceof FallbackError) {
+				sdk.logging?.error('Fallback error occurred', error);
+				void options.onFallback?.(error);
+			} else {
+				sdk.logging?.error('Error submitting form', error);
+				void options.onError?.(error);
+			}
+		}
+	}
+
+	function setFormValue(formId: string, widgetId: string, value: unknown) {
+		if (forms.value[formId] === undefined) {
+			forms.value[formId] = {};
+		}
+
+		forms.value[formId][widgetId] = value === '' ? null : value;
+	}
+
+	function setMessage(formId: string, widgetId: string, value: NativeFlowMessage) {
+		if (messages.value[formId] === undefined) {
+			messages.value[formId] = {};
+		}
+
+		messages.value[formId][widgetId] = value;
+	}
+
+	provide<LoginContext>(STRIVACITY_LOGIN_CONTEXT, {
+		loading,
+		forms,
+		messages,
+		state,
+		triggerFallback,
+		triggerClose,
+		submitForm,
+		setFormValue,
+		setMessage,
+	});
+
+	return {
+		loading,
+		forms,
+		messages,
+		state,
+		triggerFallback,
+		triggerClose,
+		submitForm,
+		setFormValue,
+		setMessage,
+	};
+}

package/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const component: DefineComponent<object, object, any>;
+	export default component;
+}

package/src/errors.ts

@@ -0,0 +1 @@
+export * from '@strivacity/sdk-core/utils/errors';

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from '@strivacity/sdk-core/flows';
+export * from '@strivacity/sdk-core/handlers';
+export * from '@strivacity/sdk-core/utils';
+export * from './composables';
+export * from './errors';
+export * from './plugin';
+export * from './storages';
+export * from './types';
+export * from './utils';

package/src/plugin.ts

@@ -0,0 +1,89 @@
+import type { IdTokenClaims, SDKInitConfig } from '@strivacity/sdk-core/types';
+import type { SDKInstance } from './types';
+import { type App, type Plugin, ref } from 'vue';
+import { initFlow } from '@strivacity/sdk-core';
+import { STRIVACITY_SDK } from './composables';
+
+let sdk: SDKInstance;
+
+/**
+ * Creates a Strivacity SDK plugin for Vue.
+ *
+ * @param {SDKOptions} options - The options used to configure the SDK.
+ */
+export const createStrivacitySDK = (options: SDKInitConfig): Plugin => {
+	const loadingRef = ref<boolean>(true);
+	const languageRef = ref<string>(globalThis.navigator?.language ?? 'en-US');
+	const isAuthenticatedRef = ref<boolean>(false);
+	const idTokenClaimsRef = ref<IdTokenClaims | null>(null);
+	const accessTokenRef = ref<string | null>(null);
+	const refreshTokenRef = ref<string | null>(null);
+	const accessTokenExpiredRef = ref<boolean>(true);
+	const accessTokenExpirationDateRef = ref<number | null>(null);
+
+	const updateSession = async () => {
+		const authenticated = await sdk.isAuthenticated;
+
+		if (loadingRef.value) {
+			loadingRef.value = false;
+		}
+		if (sdk.language !== languageRef.value) {
+			languageRef.value = sdk.language;
+		}
+		if (authenticated !== isAuthenticatedRef.value) {
+			isAuthenticatedRef.value = authenticated;
+		}
+		if (sdk.idTokenClaims !== idTokenClaimsRef.value) {
+			idTokenClaimsRef.value = sdk.idTokenClaims || null;
+		}
+		if (sdk.accessToken !== accessTokenRef.value) {
+			accessTokenRef.value = sdk.accessToken || null;
+		}
+		if (sdk.refreshToken !== refreshTokenRef.value) {
+			refreshTokenRef.value = sdk.refreshToken || null;
+		}
+		if (sdk.accessTokenExpired !== accessTokenExpiredRef.value) {
+			accessTokenExpiredRef.value = sdk.accessTokenExpired;
+		}
+		if (sdk.accessTokenExpirationDate !== accessTokenExpirationDateRef.value) {
+			accessTokenExpirationDateRef.value = sdk.accessTokenExpirationDate || null;
+		}
+	};
+
+	const plugin = {
+		install: (app: App) => {
+			sdk = initFlow(options as never);
+			const sdkEvents = sdk.subscribeToAllEvents(updateSession);
+
+			void updateSession();
+
+			app.onUnmount(() => sdkEvents.dispose());
+
+			app.provide(STRIVACITY_SDK, {
+				sdk,
+				loading: loadingRef,
+				language: languageRef,
+				isAuthenticated: isAuthenticatedRef,
+				idTokenClaims: idTokenClaimsRef,
+				accessToken: accessTokenRef,
+				refreshToken: refreshTokenRef,
+				accessTokenExpired: accessTokenExpiredRef,
+				accessTokenExpirationDate: accessTokenExpirationDateRef,
+				init: () => sdk.init(),
+				subscribeToEvent: ((...args: Parameters<typeof sdk.subscribeToEvent>) => sdk.subscribeToEvent(...args)) as typeof sdk.subscribeToEvent,
+				subscribeToAllEvents: (...args: Parameters<typeof sdk.subscribeToAllEvents>) => sdk.subscribeToAllEvents(...args),
+				checkAuthentication: (...args: Parameters<typeof sdk.checkAuthentication>) => sdk.checkAuthentication(...args),
+				tokenExchange: (...args: Parameters<typeof sdk.tokenExchange>) => sdk.tokenExchange(...args),
+				handleCallback: (...args: Parameters<typeof sdk.handleCallback>) => sdk.handleCallback(...args),
+				refresh: () => sdk.refresh(),
+				revoke: () => sdk.revoke(),
+				logout: (...args: Parameters<typeof sdk.logout>) => sdk.logout(...args),
+				login: (...args: Parameters<typeof sdk.login>) => sdk.login(...args),
+				register: (...args: Parameters<typeof sdk.register>) => sdk.register(...args),
+				entry: (...args: Parameters<typeof sdk.entry>) => sdk.entry(...args),
+			});
+		},
+	};
+
+	return plugin;
+};

package/src/storages.ts

@@ -0,0 +1 @@
+export * from '@strivacity/sdk-core/storages';

package/src/types.ts

@@ -0,0 +1,220 @@
+import type { Ref } from 'vue';
+import type {
+	IdTokenClaims,
+	RedirectFlow,
+	PopupFlow,
+	NativeFlow,
+	EmbeddedFlow,
+	initFlow,
+	NativeParams,
+	NativeFlowState,
+	SessionData,
+	NativeFlowMessage,
+} from '@strivacity/sdk-core';
+import type { FallbackError } from '@strivacity/sdk-core/utils';
+
+export * from '@strivacity/sdk-core/types';
+
+export type SDKContext<Flow extends RedirectFlow | PopupFlow | NativeFlow | EmbeddedFlow> = {
+	/**
+	 * The underlying Strivacity SDK flow instance.
+	 */
+	readonly sdk: Flow;
+
+	/**
+	 * A boolean indicating whether the SDK is still loading.
+	 */
+	readonly loading: Ref<boolean>;
+
+	/**
+	 * BCP 47 language code representing the current language of the SDK.
+	 */
+	readonly language: Ref<string>;
+
+	/**
+	 * A boolean ref indicating whether the user is authenticated.
+	 */
+	readonly isAuthenticated: Ref<boolean>;
+
+	/**
+	 * The claims from the ID token, if available.
+	 */
+	readonly idTokenClaims: Ref<IdTokenClaims | null>;
+
+	/**
+	 * The access token, if available.
+	 */
+	readonly accessToken: Ref<string | null>;
+
+	/**
+	 * The refresh token, if available.
+	 */
+	readonly refreshToken: Ref<string | null>;
+
+	/**
+	 * A boolean ref indicating whether the access token has expired.
+	 */
+	readonly accessTokenExpired: Ref<boolean>;
+
+	/**
+	 * The expiration date of the access token, if available.
+	 */
+	readonly accessTokenExpirationDate: Ref<number | null>;
+
+	/**
+	 * Subscribes to a specific SDK event.
+	 */
+	subscribeToEvent: Flow['subscribeToEvent'];
+
+	/**
+	 * Subscribes to all SDK events.
+	 */
+	subscribeToAllEvents: Flow['subscribeToAllEvents'];
+
+	/**
+	 * Checks whether the user is currently authenticated, optionally triggering a token refresh.
+	 */
+	checkAuthentication: Flow['checkAuthentication'];
+
+	/**
+	 * Initializes the SDK, loading metadata and restoring any persisted session.
+	 */
+	init: Flow['init'];
+
+	/**
+	 * Performs a token exchange using the provided parameters.
+	 */
+	tokenExchange: Flow['tokenExchange'];
+
+	/**
+	 * Handles the authentication callback by parsing the response from the given URL.
+	 */
+	handleCallback: Flow['handleCallback'];
+
+	/**
+	 * Refreshes the current access token using the refresh token.
+	 */
+	refresh: Flow['refresh'];
+
+	/**
+	 * Revokes the current tokens.
+	 */
+	revoke: Flow['revoke'];
+
+	/**
+	 * Logs the user out and optionally redirects to a post-logout URI.
+	 */
+	logout: Flow['logout'];
+
+	/**
+	 * Initiates the login flow.
+	 */
+	login: Flow['login'];
+
+	/**
+	 * Initiates the registration flow.
+	 */
+	register: Flow['register'];
+
+	/**
+	 * Handles the entry point URL of the authentication flow, typically used for embedded or native modes.
+	 */
+	entry: Flow['entry'];
+};
+
+export type SDKInstance = ReturnType<typeof initFlow>;
+
+export type LoginContext = {
+	/**
+	 * Whether a form submission or session initialization is in progress.
+	 */
+	loading: Ref<boolean>;
+
+	/**
+	 * Current form field values, keyed by form ID then widget ID.
+	 */
+	forms: Ref<Record<string, Record<string, unknown>>>;
+
+	/**
+	 * Current validation and info messages, keyed by form ID then widget ID.
+	 */
+	messages: Ref<Record<string, Record<string, NativeFlowMessage>>>;
+
+	/**
+	 * The current login flow state returned by the backend.
+	 */
+	state: Ref<Partial<NativeFlowState>>;
+
+	/**
+	 * Submits the form with the given ID and advances the login flow.
+	 *
+	 * @param formId - The ID of the form to submit.
+	 * @param customBody - Optional custom body to send with the form submission. If not provided, the current form values will be used.
+	 * @returns A promise that resolves when the form submission is complete.
+	 */
+	submitForm: (formId: string, customBody?: Record<string, unknown>) => Promise<void>;
+
+	/**
+	 * Redirects to the hosted login UI.
+	 *
+	 * @param message - Optional message to log before redirecting.
+	 * @returns A promise that resolves when the redirect is initiated.
+	 */
+	triggerFallback: (message?: string) => void;
+
+	/**
+	 * Signals that the login flow was closed by the user.
+	 */
+	triggerClose: () => void;
+
+	/**
+	 * Updates a single field value within a form before submission.
+	 *
+	 * @param formId - The ID of the form containing the field.
+	 * @param widgetId - The ID of the widget (field) to update.
+	 * @param value - The new value to set for the field.
+	 */
+	setFormValue: (formId: string, widgetId: string, value: unknown) => void;
+
+	/**
+	 * Sets a validation or info message on a specific widget.
+	 *
+	 * @param formId - The ID of the form containing the widget.
+	 * @param widgetId - The ID of the widget to set the message for.
+	 * @param value - The message to set, which can be a string or a structured NativeFlowMessage.
+	 */
+	setMessage: (formId: string, widgetId: string, value: NativeFlowMessage) => void;
+};
+
+export type UseNativeLoginOptions = {
+	/**
+	 * Optional parameters to be passed to the login session request. These parameters will be sent to the `authorizationUri` endpoint.
+	 */
+	params?: NativeParams;
+
+	/**
+	 * A render function called when the user successfully completes the login flow.
+	 * This can be used to perform any necessary actions after a successful login, such as redirecting the user or updating the application state. Defaults to `null`.
+	 */
+	onLogin?: (session: SessionData) => void | Promise<void>;
+
+	/**
+	 * Called when the fallback flow is triggered, typically due to an error or unsupported environment. Receives a `FallbackError` object containing the hosted URL to redirect to.
+	 */
+	onFallback?: (error: FallbackError) => void | Promise<void>;
+
+	/**
+	 * Called when the login flow is closed by the user. This can be used to perform any necessary cleanup or state updates in the application. Defaults to `null`.
+	 */
+	onClose?: () => void | Promise<void>;
+
+	/**
+	 * Called when an error occurs during the login session initialization or flow. Receives an `Error` object describing the issue.
+	 */
+	onError?: (error: Error) => void | Promise<void>;
+
+	/**
+	 * Called when a global message is received during the login flow. This can be used to display messages to the user or log them for debugging purposes.
+	 */
+	onGlobalMessage?: (message: NativeFlowMessage) => void | Promise<void>;
+};

package/src/utils.ts

@@ -0,0 +1 @@
+export * from '@strivacity/sdk-core/utils';