Skip to main content

Browsers

Warning

Kukai-embed should be loaded in secure browsers, otherwise, social authentication flows may be blocked by social providers. In-app browsers sometimes use custom user-agents that go against OAuth policies.

tip

Kukai-embed performs browser compatibility checks when it is initialized.
You may choose to ignore the isBrowserOAuthCompatible flag if you trust the browser execution environment. Alternatively, use the flag to display a guide in order to help users navigate to a secure external browser.

OAuth browser compatibility​

It is important to detect browsing environments that may be insecure. When such an environment is detected, users should be prompted to continue in an external browser.

note

The following manual checks are not necessary unless they need to be performed prior to initialization.

If these checks need to be performed prior to initialization:

const IN_APP_BROWSERS_REGEX = /(Instagram|Snapchat|Twitter|FBAV|FBAN|TikTok)/i;

export function isBrowserOAuthCompatible() {
  var userAgent = navigator.userAgent || navigator.vendor;

  // In-app browser checks
  if (IN_APP_BROWSERS_REGEX.test(userAgent)) {
    return false;
  }

  // iframe check
  if (window.self !== window.top) {
    return false;
  }

  return true;
}

It is recommended that the check above is executed on page load or before any meaningful paints:

if (!isBrowserOAuthCompatible()) {
  // present a guide to help users navigate to the external browser
}