Configuring a popup window with OIDC

As a brand, you might want to leverage OpenID Connect (OIDC) native support for authorization flows that happen via a popup window instead of a full-page redirection.

Developers or administrators of a web application using an authorization code flow via popup typically only need to know a few pieces of information to redirect to Strivacity for login and self-service-related activities.

1. The domain name of the Strivacity instance: In OIDC terms, this is generally referred to as the authority. You can find it under Instance configuration → Instance information → Address in the Admin Console.

2. Client ID: Each application in Strivacity can have multiple clients, and each client has its own unique Client ID. This value tells Strivacity which client configuration to use for the login or self-service transaction. You can find it under Applications → [Your Application] → [Client] → OAuth2/OIDC tab → Client ID.

3. Redirect URI: This corresponds to the redirect_uri parameter that an OIDC client passes to Strivacity during login. You must register it for the relevant client under Applications → [Your Application] → [Client] → OAuth2/OIDC tab → Allowed callback URLs.

🚧

For popup flows, you must register your own redirect URI (for example, https://example.com/oidc/callback/) in the application client's Allowed callback URLs. Strivacity no longer provides a /login/callback/ endpoint. The popup window redirects to your registered URI, and the Strivacity SDK extracts the OIDC response parameters automatically.

This flow works in the following manner.

1. The customer visits the brand portal and selects a login method, such as a login button.

2. The login button would open a popup window that loads the Strivacity login interface. For example, the popup can be opened up via JavaScript in the following manner:

const host = 'https://BRAND_DOMAIN.strivacity.com';
const clientId = 'CLIENT_ID';
const redirect = 'https://example.com/oidc/callback/';

let state = <random string>
        
popup = window.open(
    `${host}/oauth2/auth?response_type=code&display=popup&client_id=${clientId}&scope=openid&state=${state}&redirect_uri=${redirect}`,
    'Strivacity',
    'toolbar=no, menubar=no, width=600, height=700, top=100, left=100'
);

popup.window.focus();

3. After the user completes login, Strivacity executes a postMessage() call from the popup back to the parent window, containing the OIDC response with the authorization code:

const urlParams = new URLSearchParams(window.location.search);

let args: any = {};
urlParams.forEach((value, key) => args[key] = value)

if (window.opener) {
		window.opener.postMessage(args, '*');
}

Your application must listen for this message and close the popup after receiving it:

function onMessage(message) {
    let data = message ? message.data : undefined;

    if (popup) {
        popup.window.close()
    }
}

window.onload = function () {
    window.addEventListener("message", onMessage, false);
}

4. The backend must exchange the authorization code for an ID token using the client secret. This should be done server-side with a standard OAuth library (not hand-written code). See recommended libraries. For example, in Go: Config.Exchange.

5. After retrieving the ID token, the backend should validate it (for example, using Token.Valid) and then establish a session for the authenticated user (such as setting session cookies).

6. Finally, the backend responds to the calling client with the authentication result and manages the user’s session lifecycle.