An embedded journey is an integration mode where Strivacity's authentication UI is delivered as a web component (sty-login) that runs directly inside your application. The user never leaves your page, and the login flow is mounted inline. Strivacity provides and manages the UI; you are responsible for placing it on the page and handling the resulting events.

This mode is available on web browsers only.

📘

The sty-login, sty-notifications, and sty-language-selector components used in embedded mode are the same components served by Strivacity during a hosted journey. The difference is that in embedded mode your application loads and renders them directly, whereas in hosted mode Strivacity serves them on its own page.

How it works

1. Your application loads the sty-login web component bundle from your Strivacity instance.
2. The SDK is initialized with mode: 'embedded'.
3. The <sty-login> element is placed in your page's HTML.
4. The component drives the full authentication flow inline, and the user never leaves the page.
5. When the user completes authentication, the component dispatches a login event, which your application handles to navigate the user forward.

Required client type

An embedded journey requires the OIDC (using the Journey Flow API) client type registered under your application in the Strivacity Admin Console.

After creating the client, configure the Entry URL and Web configuration (trusted origins for passkey/WebAuthn) in the SDK configuration tab. See Client configuration.

SDK initialization

Before the component can be used, initialize the Strivacity SDK once during application bootstrap. The component bundle is loaded dynamically from your cluster:

import { initFlow } from '@strivacity/sdk-core';
import 'https://<your-cluster-domain>/assets/components/bundle.js';

const sdk = initFlow({
	mode: 'embedded',
	issuer: 'https://<your-cluster-domain>',
	scopes: ['openid', 'profile'],
	clientId: 'your-client-id',
	redirectUri: 'http://localhost:4200/callback',
});

For framework-specific integrations and example applications, refer to the example apps in the Strivacity JavaScript SDK repository.

Placing the component

In embedded mode, issuer, clientId, and redirectUri are handled by the SDK; do not pass them as element attributes. Place the component on your login page alongside its companion components:

<sty-notifications></sty-notifications>
<sty-login id="login"></sty-login>
<sty-language-selector></sty-language-selector>

const login = document.getElementById('login');

login.addEventListener('login', () => {
	window.location.href = '/profile';
});

login.addEventListener('close', () => {
	location.reload();
});

login.addEventListener('error', (event) => {
	console.error(event.detail);
});

By default, the flow starts automatically when the component connects to the DOM. To start it manually, use the lazy attribute and call start():

<sty-login id="login" lazy></sty-login>

await loginElement.start({
	loginHint: '[email protected]',
	prompt: 'create', // open registration flow instead of login
	acrValues: ['urn:mace:incommon:iap:silver'],
	uiLocales: ['en-US'],
});

Continuing a specific flow

Some journeys (such as password reset or account activation) are initiated via an emailed link. When the user follows such a link, call sdk.entry() with the current URL to resume the existing session:

const { short_app_id, session_id } = await sdk.entry(window.location.href);

const loginElement = document.getElementById('login');
loginElement.shortAppId = short_app_id;
loginElement.sessionId = session_id;

The component attaches to the existing session rather than starting a new flow.

Example implementations of the entry flow can be found in the example apps in the Strivacity JavaScript SDK repository.

Companion components

Custom language selector

If you want to render your own language switcher instead of using <sty-language-selector>, you can control the active language by setting the lang attribute on the <sty-login> element. The UI will automatically re-render in the selected language, provided that language is supported and enabled in the Strivacity Admin Console.

The value must be a BCP 47 language tag, for example en-US, de-DE, or fr-FR.

const loginElement = document.getElementById('login');
loginElement.setAttribute('lang', 'de-DE');

The language-change event fires when the language changes, which you can use to keep your custom selector in sync.

Custom notification handling

By default, system notifications are displayed by the <sty-notifications> component. If you want to render notifications using your own UI, omit <sty-notifications> and instead listen for the notification event on document.

The event fires with a CustomEvent whose detail contains an action and a notification object:

• action: 'show': a new notification should be displayed.
• action: 'clear': all notifications should be dismissed.

const notifications: Array<{ type: string; text: string }> = [];

document.addEventListener('notification', (event: CustomEvent) => {
	if (event.detail.action === 'show') {
		notifications.unshift(event.detail.notification);

		if (notifications.length > 3) {
			notifications.pop();
		}
	} else {
		notifications = [];
	}
});

Component events

The <sty-login> element dispatches the following events during the authentication flow. Listen to them directly on the element:

Browser support

• Chrome 123+
• Firefox 120+
• Safari 17+
• Edge 123+