JavaScript – Sign-in and Out with Popups

This guide shows how to sign users in and out using a popup window instead of a full-page redirect.

If your app runs inside an iframe, popup mode is required — redirect sign-in and sign-out throw a MonoCloudJsError because MonoCloud's sign-in and end-session pages cannot be displayed in a framed context.

What you'll cover

Sign in via a popup window with signIn({ mode: "popup" })
Sign out via a popup window with signOut({ mode: "popup" })
Configure popup window dimensions

Before you begin

This guide assumes you've completed the JavaScript quickstart or the installation guide.

You should already have:

A Single Page App configured in MonoCloud
The @monocloud/auth-web-js SDK installed
A MonoCloudWebJSClient initialized

Pass { mode: "popup" } to keep the user on the current page while authentication happens in a popup window.

src/main.ts

await client.signIn({ mode: "popup" });

How it works:

The SDK opens a popup centered on the parent window
Once the user finishes signing in, the popup hands the result back to your page and closes itself
Your app picks up the new session right where it left off - no full-page reload

signOut() accepts the same mode option as signIn(). Popup sign-out is useful when you want to end the session without navigating away from the current page.

src/main.ts

await client.signOut({ mode: "popup" });

Override the popup size on the client if the defaults don't suit your sign-in screens:

src/auth.ts

import { MonoCloudWebJSClient } from "@monocloud/auth-web-js";

export const client = new MonoCloudWebJSClient({
  tenantDomain: "https://<your-domain>",
  clientId: "<your-client-id>",
  popupWindowWidth: 480,
  popupWindowHeight: 700,
});

Sign-in and Out with Popups

What you'll cover

Before you begin

Sign-in with a popup window

Sign-out with a popup window

Configure popup size

Next steps