@strivacity/sdk-react 3.0.3 → 4.0.0-beta.0

package/dist/types.d.ts

@@ -1,176 +1,213 @@
-import { IdTokenClaims, LoginFlowMessage, LoginFlowState, SDKOptions } from '@strivacity/sdk-core';
-import { PopupFlow } from '@strivacity/sdk-core/flows/PopupFlow';
-import { RedirectFlow } from '@strivacity/sdk-core/flows/RedirectFlow';
-import { NativeFlow } from '@strivacity/sdk-core/flows/NativeFlow';
-export type Children = React.ReactElement | React.ReactNode | Array<React.ReactElement | React.ReactNode>;
-/**
- * Represents the session state, including authentication details and token information.
- */
-export type Session = {
-    /**
-     * Indicates if the session is being loaded.
+import { ReactNode, DetailedHTMLProps, HTMLAttributes } from 'react';
+import { LoginComponent, NotificationComponent, LandingComponent, LanguageSelectorComponent, SDKInitConfig, SessionData, IdTokenClaims, RedirectFlow, PopupFlow, NativeFlow, EmbeddedFlow, initFlow, NativeFlowState, NativeFlowMessage, NativeParams } from '@strivacity/sdk-core';
+import { FallbackError } from '@strivacity/sdk-core/utils';
+export * from '@strivacity/sdk-core/types';
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sty-login': ElementProps<LoginComponent, {
+                onLogin?: () => void;
+                onClose?: () => void;
+                onError?: (e: CustomEvent<string>) => void;
+            }>;
+            'sty-notifications': ElementProps<NotificationComponent>;
+            'sty-language-selector': ElementProps<LanguageSelectorComponent>;
+            'sty-landing': ElementProps<LandingComponent>;
+        }
+    }
+}
+export type ElementProps<T extends HTMLElement, Extra = object> = DetailedHTMLProps<Omit<HTMLAttributes<T>, keyof Extra> & Partial<Omit<T, keyof HTMLElement>> & Extra, T>;
+export type SDKContext<Flow extends RedirectFlow | PopupFlow | NativeFlow | EmbeddedFlow> = {
+    /**
+     * The underlying Strivacity SDK flow instance.
      */
-    loading: boolean;
+    readonly sdk: Flow;
     /**
-     * The SDK options used to configure the session.
+     * A boolean indicating whether the SDK is still loading. This can be used to show a loading spinner or similar UI while the SDK is initializing.
      */
-    options: SDKOptions;
+    readonly loading: boolean;
     /**
-     * Indicates whether the user is authenticated.
+     * BCP 47 language code representing the current language of the SDK.
      */
-    isAuthenticated: boolean;
+    readonly language: string;
     /**
-     * Claims from the ID token or `null` if not available.
+     * A boolean indicating whether the user is authenticated. This can be used to conditionally render UI based on the user's authentication state.
      */
-    idTokenClaims: IdTokenClaims | null;
+    readonly isAuthenticated: boolean;
     /**
-     * The access token or `null` if not available.
+     * The claims from the ID token, if available. This can be used to access user information and other claims provided by the authentication server.
      */
-    accessToken: string | null;
+    readonly idTokenClaims: IdTokenClaims | null;
     /**
-     * The refresh token or `null` if not available.
+     * The access token, if available. This can be used to authenticate API requests or other interactions with the backend.
      */
-    refreshToken: string | null;
+    readonly accessToken: string | null;
     /**
-     * Indicates if the access token has expired.
+     * The refresh token, if available. This can be used to obtain new access tokens when the current one expires.
      */
-    accessTokenExpired: boolean;
+    readonly refreshToken: string | null;
     /**
-     * Expiration date of the access token or `null` if not set.
+     * A boolean indicating whether the access token has expired. This can be used to trigger a refresh of the access token or to log the user out.
      */
-    accessTokenExpirationDate: number | null;
-};
-/**
- * Represents the available authentication flows and operations for Popup-based interactions.
- */
-export type PopupSDK = {
+    readonly accessTokenExpired: boolean;
     /**
-     * Represents the SDK instance.
+     * The expiration date of the access token, if available. This can be used to determine when to refresh the access token or to log the user out.
      */
-    sdk: InstanceType<typeof PopupFlow>;
+    readonly accessTokenExpirationDate: number | null;
     /**
-     * Initiates the login process.
+     * Subscribes to a specific SDK event.
      */
-    login: InstanceType<typeof PopupFlow>['login'];
+    subscribeToEvent: Flow['subscribeToEvent'];
     /**
-     * Registers a new user.
+     * Subscribes to all SDK events.
      */
-    register: InstanceType<typeof PopupFlow>['register'];
+    subscribeToAllEvents: Flow['subscribeToAllEvents'];
     /**
-     * Initiates the entry process.
+     * Checks whether the user is currently authenticated, optionally triggering a token refresh.
      */
-    entry: InstanceType<typeof PopupFlow>['entry'];
+    checkAuthentication: Flow['checkAuthentication'];
     /**
-     * Refreshes the user's session.
+     * Initializes the SDK, loading metadata and restoring any persisted session.
      */
-    refresh: InstanceType<typeof PopupFlow>['refresh'];
+    init: Flow['init'];
     /**
-     * Revokes the current session tokens.
+     * Performs a token exchange using the provided parameters.
      */
-    revoke: InstanceType<typeof PopupFlow>['revoke'];
+    tokenExchange: Flow['tokenExchange'];
     /**
-     * Logs out the user.
+     * Handles the authentication callback by parsing the response from the given URL.
      */
-    logout: InstanceType<typeof PopupFlow>['logout'];
+    handleCallback: Flow['handleCallback'];
     /**
-     * Handles the callback after authentication or token exchange.
+     * Refreshes the current access token using the refresh token.
      */
-    handleCallback: InstanceType<typeof PopupFlow>['handleCallback'];
-};
-/**
- * Represents the available authentication flows and operations for Redirect-based interactions.
- */
-export type RedirectSDK = {
+    refresh: Flow['refresh'];
     /**
-     * Represents the SDK instance.
+     * Revokes the current tokens.
      */
-    sdk: InstanceType<typeof RedirectFlow>;
+    revoke: Flow['revoke'];
     /**
-     * Initiates the login process.
+     * Logs the user out and optionally redirects to a post-logout URI.
      */
-    login: InstanceType<typeof RedirectFlow>['login'];
+    logout: Flow['logout'];
     /**
-     * Registers a new user.
+     * Initiates the login flow.
      */
-    register: InstanceType<typeof RedirectFlow>['register'];
+    login: Flow['login'];
     /**
-     * Initiates the entry process.
+     * Initiates the registration flow.
      */
-    entry: InstanceType<typeof RedirectFlow>['entry'];
+    register: Flow['register'];
     /**
-     * Refreshes the user's session.
+     * Handles the entry point URL of the authentication flow, typically used for embedded or native modes.
      */
-    refresh: InstanceType<typeof RedirectFlow>['refresh'];
+    entry: Flow['entry'];
+};
+export type SDKInstance = ReturnType<typeof initFlow>;
+export type StyAuthProviderProps = {
     /**
-     * Revokes the current session tokens.
+     * The options to be used by the AuthProvider. These options are passed to the SDK during initialization.
      */
-    revoke: InstanceType<typeof RedirectFlow>['revoke'];
+    options: SDKInitConfig;
     /**
-     * Logs out the user.
+     * The session data to be used by the AuthProvider.
+     *
+     * If not provided, the AuthProvider will attempt to retrieve the session data from the SDK.
      */
-    logout: InstanceType<typeof RedirectFlow>['logout'];
+    session?: SessionData | null;
     /**
-     * Handles the callback after authentication or token exchange.
+     * The children to be rendered by the AuthProvider. This is typically the rest of your application.
      */
-    handleCallback: InstanceType<typeof RedirectFlow>['handleCallback'];
+    children: ReactNode;
 };
-/**
- * Represents the available authentication flows and operations for Native-based interactions.
- */
-export type NativeSDK = {
+export type LoginContext = {
+    /**
+     * Whether a form submission or session initialization is in progress.
+     */
+    loading: boolean;
     /**
-     * Represents the SDK instance.
+     * Current form field values, keyed by form ID then widget ID.
      */
-    sdk: InstanceType<typeof NativeFlow>;
+    forms: Record<string, Record<string, unknown>>;
     /**
-     * Initiates the login process.
+     * Current validation and info messages, keyed by form ID then widget ID.
      */
-    login: InstanceType<typeof NativeFlow>['login'];
+    messages: Record<string, Record<string, NativeFlowMessage>>;
     /**
-     * Registers a new user.
+     * The current login flow state returned by the backend.
      */
-    register: InstanceType<typeof NativeFlow>['register'];
+    state: Partial<NativeFlowState>;
     /**
-     * Initiates the entry process.
+     * 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.
      */
-    entry: InstanceType<typeof NativeFlow>['entry'];
+    submitForm: (formId: string, customBody?: Record<string, unknown>) => Promise<void>;
     /**
-     * Refreshes the user's session.
+     * Redirects to the hosted login UI.
+     *
+     * @param message - Optional message to log before redirecting.
+     * @returns A promise that resolves when the redirect is initiated.
      */
-    refresh: InstanceType<typeof NativeFlow>['refresh'];
+    triggerFallback: (message?: string) => void;
     /**
-     * Revokes the current session tokens.
+     * Signals that the login flow was closed by the user.
      */
-    revoke: InstanceType<typeof NativeFlow>['revoke'];
+    triggerClose: () => void;
     /**
-     * Logs out the user.
+     * 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.
      */
-    logout: InstanceType<typeof NativeFlow>['logout'];
+    setFormValue: (formId: string, widgetId: string, value: unknown) => void;
     /**
-     * Handles the callback after authentication or token exchange.
+     * 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.
      */
-    handleCallback: InstanceType<typeof NativeFlow>['handleCallback'];
+    setMessage: (formId: string, widgetId: string, value: NativeFlowMessage) => void;
 };
-/**
- * Represents a combined context for Popup-based flows, containing both the Popup SDK and the session state.
- */
-export type PopupContext = PopupSDK & Session;
-/**
- * Represents a combined context for Redirect-based flows, containing both the Redirect SDK and the session state.
- */
-export type RedirectContext = RedirectSDK & Session;
-/**
- * Represents a combined context for Native-based flows, containing both the Native SDK and the session state.
- */
-export type NativeContext = NativeSDK & Session;
-export type NativeFlowContextValue = {
-    loading: boolean;
-    forms: Record<string, Record<string, unknown>>;
-    messages: Record<string, Record<string, LoginFlowMessage>>;
-    state: Partial<LoginFlowState>;
-    submitForm: (formId: string) => Promise<void>;
-    triggerFallback: (hostedUrl?: string) => void;
-    triggerClose: () => void;
-    setFormValue: (formId: string, widgetId: string, value: unknown) => void;
-    setMessage: (formId: string, widgetId: string, value: LoginFlowMessage) => void;
+export type UseNativeLoginOptions = {
+    /**
+     * Optional parameters to be passed to the login session request.
+     */
+    params?: NativeParams;
+    /**
+     * Called when the user successfully completes the login flow.
+     */
+    onLogin?: (session: SessionData) => void | Promise<void>;
+    /**
+     * Called when the fallback flow is triggered.
+     */
+    onFallback?: (error: FallbackError) => void | Promise<void>;
+    /**
+     * Called when the login flow is closed by the user.
+     */
+    onClose?: () => void | Promise<void>;
+    /**
+     * Called when an error occurs during login flow initialization or submission.
+     */
+    onError?: (error: Error) => void | Promise<void>;
+    /**
+     * Called when a global message is received during the login flow.
+     */
+    onGlobalMessage?: (message: NativeFlowMessage) => void | Promise<void>;
+};
+export type WithAuthGuardOptions = {
+    /**
+     * The URL to redirect the user to if they are not authenticated.
+     *
+     * @default '/login'
+     */
+    loginUri?: string;
+    /**
+     * A component to render while the authentication state is being determined. Defaults to `null`.
+     */
+    onLoading?: () => React.ReactNode;
 };

package/dist/types.mjs

@@ -1,2 +1 @@
-
-//# sourceMappingURL=types.mjs.map
+import"./assets/rolldown-runtime.mjs";export*from"@strivacity/sdk-core/types";

package/dist/utils.cjs

@@ -0,0 +1 @@
+require("./assets/rolldown-runtime.cjs");var e=require("@strivacity/sdk-core/utils");Object.keys(e).forEach(function(t){t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});

package/dist/utils.d.ts

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

package/dist/utils.mjs

@@ -0,0 +1 @@
+import"./assets/rolldown-runtime.mjs";export*from"@strivacity/sdk-core/utils";

package/package.json

@@ -1,20 +1,64 @@
 {
   "name": "@strivacity/sdk-react",
-  "version": "3.0.3",
-  "license": "MIT",
+  "version": "4.0.0-beta.0",
   "description": "Strivacity React SDK client",
+  "license": "MIT",
   "author": "strivacity <opensource@strivacity.com>",
   "repository": {
     "type": "git",
     "url": "https://github.com/Strivacity/sdk-js"
   },
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "types": "./dist/types.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.mjs"
+    },
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.mjs",
+      "require": "./dist/components.cjs",
+      "default": "./dist/components.mjs"
+    },
+    "./errors": {
+      "types": "./dist/errors.d.ts",
+      "import": "./dist/errors.mjs",
+      "require": "./dist/errors.cjs",
+      "default": "./dist/errors.mjs"
+    },
+    "./hooks": {
+      "types": "./dist/hooks.d.ts",
+      "import": "./dist/hooks.mjs",
+      "require": "./dist/hooks.cjs",
+      "default": "./dist/hooks.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": "3.0.3"
+    "@strivacity/sdk-core": "4.0.0-beta.0"
   },
   "peerDependencies": {
     "react": ">=18"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts"
+  }
 }

package/testing/tests/components.spec.tsx

@@ -0,0 +1,146 @@
+import type { SDKContext, RedirectFlow, SessionData } from '../../src/types';
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
+import { initFlow } from '@strivacity/sdk-core';
+import { StyAuthProvider } from '../../src/components';
+import { useStrivacity } from '../../src/hooks';
+import { createMockFlow } from '@strivacity/testing/mocks/sdk';
+import { mount, cleanupMounts, flush, act } from '../utils/common';
+
+vi.mock('@strivacity/sdk-core', async (importOriginal) => ({
+	...(await importOriginal<typeof import('@strivacity/sdk-core')>()),
+	initFlow: vi.fn(),
+}));
+
+afterEach(() => {
+	cleanupMounts();
+});
+
+function install(flow: RedirectFlow, session: SessionData | null = null) {
+	vi.mocked(initFlow).mockReturnValue(flow as never);
+
+	let context: SDKContext<RedirectFlow> | undefined;
+
+	function Consumer() {
+		context = useStrivacity<RedirectFlow>();
+		return null;
+	}
+
+	const options = { mode: 'redirect' as const, issuer: 'https://brandtegrity.io', clientId: 'client-id', redirectUri: 'https://brandtegrity.io/callback' };
+
+	mount(
+		<StyAuthProvider options={options} session={session ?? undefined}>
+			<Consumer />
+		</StyAuthProvider>,
+	);
+
+	return { context: () => context!, options };
+}
+
+describe('StyAuthProvider', () => {
+	beforeEach(() => {
+		vi.mocked(initFlow).mockReset();
+	});
+
+	test('initializes the flow through core sdk initFlow with the given options', async () => {
+		const flow = createMockFlow<RedirectFlow>();
+		const { options } = install(flow);
+		await flush();
+
+		expect(initFlow).toHaveBeenCalledTimes(1);
+		expect(initFlow).toHaveBeenCalledWith(options);
+	});
+
+	test('subscribes to all sdk events on mount and disposes on unmount', async () => {
+		const dispose = vi.fn();
+		const flow = createMockFlow<RedirectFlow>({ subscribeToAllEvents: vi.fn().mockReturnValue({ dispose }) });
+		install(flow);
+		await flush();
+
+		expect(flow.subscribeToAllEvents).toHaveBeenCalledTimes(1);
+		expect(flow.subscribeToAllEvents).toHaveBeenCalledWith(expect.any(Function));
+
+		cleanupMounts();
+
+		expect(dispose).toHaveBeenCalledTimes(1);
+	});
+
+	test('seeds the flow session when a session prop is given', async () => {
+		const flow = createMockFlow<RedirectFlow>();
+		const session = { access_token: 'access-token' } as unknown as SessionData;
+
+		install(flow, session);
+		await flush();
+
+		expect(flow.session).toBe(session);
+	});
+
+	test.each([
+		['init', [], undefined],
+		['checkAuthentication', [{ autoRefresh: false }], true],
+		['tokenExchange', [{ code: 'abc' }], undefined],
+		['handleCallback', ['https://brandtegrity.io/callback?code=abc'], undefined],
+		['refresh', [], undefined],
+		['revoke', [], undefined],
+		['logout', [{ postLogoutRedirectUri: 'https://brandtegrity.io' }], undefined],
+		['login', [{ scopes: ['openid'] }], undefined],
+		['register', [{ scopes: ['openid'] }], undefined],
+		['entry', ['https://brandtegrity.io/entry'], undefined],
+	] as const)('%s calls through to the flow instance returned by core sdk', async (method, args, resolvedValue) => {
+		const flow = createMockFlow<RedirectFlow>({ [method]: vi.fn().mockReturnValue(resolvedValue) });
+		const { context } = install(flow);
+		await flush();
+
+		const result = await (context()[method] as (...a: Array<unknown>) => unknown)(...args);
+
+		expect(flow[method as keyof RedirectFlow]).toHaveBeenCalledWith(...args);
+		expect(result).toEqual(resolvedValue);
+	});
+
+	test('exposes reactive state seeded from the flow instance after the initial session update settles', async () => {
+		const flow = createMockFlow<RedirectFlow>({
+			isAuthenticated: Promise.resolve(true),
+			language: 'hu-HU',
+			idTokenClaims: { sub: 'user-1' },
+			accessToken: 'access-token',
+			refreshToken: 'refresh-token',
+			accessTokenExpired: false,
+			accessTokenExpirationDate: 1234,
+		});
+		const { context } = install(flow);
+
+		expect(context().loading).toBe(true);
+
+		await flush();
+
+		expect(context().loading).toBe(false);
+		expect(context().isAuthenticated).toBe(true);
+		expect(context().language).toBe('hu-HU');
+		expect(context().idTokenClaims).toEqual({ sub: 'user-1' });
+		expect(context().accessToken).toBe('access-token');
+		expect(context().refreshToken).toBe('refresh-token');
+		expect(context().accessTokenExpired).toBe(false);
+		expect(context().accessTokenExpirationDate).toBe(1234);
+	});
+
+	test('reactive state updates when the flow emits an event', async () => {
+		const subscribeToAllEvents = vi.fn().mockReturnValue({ dispose: vi.fn() });
+		const flow = createMockFlow<RedirectFlow>({ subscribeToAllEvents });
+		const { context } = install(flow);
+		await flush();
+
+		const onEvent = subscribeToAllEvents.mock.calls[0][0];
+		const mutableFlow = flow as unknown as { language: string; accessToken: string | null; isAuthenticated: Promise<boolean> };
+
+		mutableFlow.language = 'de-DE';
+		mutableFlow.accessToken = 'new-token';
+		mutableFlow.isAuthenticated = Promise.resolve(true);
+
+		await act(async () => {
+			await onEvent();
+		});
+
+		expect(context().language).toBe('de-DE');
+		expect(context().accessToken).toBe('new-token');
+		expect(context().isAuthenticated).toBe(true);
+	});
+});

package/testing/tests/errors.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from 'vitest';
+import * as reactErrors from '../../src/errors';
+import * as coreErrors from '@strivacity/sdk-core/utils/errors';
+
+test('re-exports error classes from the core sdk', () => {
+	const coreKeys = Object.keys(coreErrors);
+
+	expect(coreKeys.length).toBeGreaterThan(0);
+	expect(Object.keys(reactErrors).sort()).toEqual(coreKeys.sort());
+});