Skip to main content

Browsers

Warning

Kukai-embed can only be loaded in OAuth compatible browsers, otherwise, social authentication flows will likely be blocked by social providers. In-app browsers such as those found on social media apps (Instagram, TikTok, etc.), use custom user-agents that go against OAuth policies.

OAuth browser compatibility​

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

tip

Kukai-embed performs browser OAuth compatibility checks when it is initialized. Therefore, 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
  throw new Error("Please continue in an external browser");
}