Troubleshooting common errors

ReferenceError: self is not defined when using next.js

The Persona JS SDK does not support server rendering. Add the following snippet:

import dynamic from "next/dynamic";

export const PersonaInquiry = dynamic(
  () => import('persona').then((module) => module.Inquiry),
  {ssr: false}
);

Refused to display 'https://withpersona.com/' in a frame because it set 'X-Frame-Options' to 'deny'

What this means

This error message is a result of a security feature that Persona offers when you integrate Persona using Embedded Flow.

Persona lets you specify, via an allowlist, which domains can load the embedded flow. You should specify only the domains where you embed your Persona flow. Potential attackers will then be blocked from embedding and loading your flow on their domain.

If you see this error, it means that the domain the embedded flow in being loaded on is not on the allowlist.

How to fix

If you see this error, go to the Embedded Flow integration page in the Persona Dashboard, and locate "Step 3 Configure allowed domains". Here, you'll see the Domain allowlist.

Ensure that:

1. The domain from which you are trying to load the Embedded Flow (and where you're seeing the error message) is on the Domain allowlist.
2. The domain in the Domain allowlist is correctly spelled and properly formatted. Note: a domain name should NOT include the http:// or https:// part of the URL.

If you are testing, please note:

• If you want to load an embedded flow on localhost, you must use an embedded flow that points to your Sandbox environment. An embedded flow that points to your Production environment cannot be loaded on localhost.

If you have a more complex setup, please note:

• If your embedded flow is loaded on a webpage that is itself loaded as an iframe on another parent webpage, you must specify all parent origins by setting the frameAncestors option in the JS SDK. See Parameters for details.