Go to developer

Popup Flow

Desktop-friendly OAuth Verify: open hosted verification in a popup, complete via postMessage, then validate on your server.

On this page

When to use popup

  • User stays on your page while KEYRA hosts verification in a child window.
  • Paste script defaults: popupWidth 520, popupHeight 720.
  • Prefer redirect when popups are unreliable (strict browsers, embedded WebViews).

Paste script

BROWSERJavaScript
KeyraOAuth.renderButton("#keyra-login", {
  authOrigin: "https://auth.keyra.ie",
  clientId: "cp_test_YOUR_PUBLISHABLE_ID",
  redirectUri: "http://localhost:3000/auth/keyra/callback",
  mode: "popup",
  popupWidth: 520,
  popupHeight: 720,
  onSuccess: async function (result) {
    await fetch("/api/auth/keyra", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "include",
      body: JSON.stringify({
        verification_token: result.verification_token || result.access_token,
      }),
    });
  },
  onError: function (err) {
    console.error(err);
  },
});

Web SDK

BROWSERTypeScript
const result = await keyra.verify({ mode: "popup" });
// or: await keyra.verifyWithPopup();

Failures surface as KeyraOAuthError with codes popup_blocked, popup_closed, or verification_denied — see Errors.

postMessage events

  • Success message type: KEYRA_AUTH_SUCCESS
  • Error message type: KEYRA_AUTH_ERROR
  • Expected origin: your configured authOrigin (e.g. https://auth.keyra.ie)

Popup blockers

  • Open the popup from a direct user gesture (button click), not from an async gap without gesture.
  • If blocked, Web SDK raises popup_blocked — fall back to mode: "redirect".
  • If the user closes the window early: popup_closed.

After success