I’ve built a widget using Next.js that I’m embedding on different sites (not my own). The widget supports both email/password login and Google SSO. I’m using “aws-amplify”: “^6.0.13” to enable authentication, with AWS Cognito on the backend.

The email/password login works fine, but when I try to log in using Google SSO while the widget is embedded on a different site in an iframe, the login gets blocked. I encounter the following error:
Refused to display 'https://your-cognito-domain.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=your_client_id&redirect_uri=https://your-redirect-uri' in a frame because it set 'X-Frame-Options' to 'deny'.

I understand that the X-Frame-Options header is set to DENY for security reasons, which prevents the SSO login page from being displayed within an iframe. However, I need a solution to allow Google SSO within the iframe context.

My Configuration:

import { ResourcesConfig } from "aws-amplify";

const awsConfig: ResourcesConfig = {
  Auth: {
    Cognito: {
      userPoolClientId: process.env.NEXT_PUBLIC_COGNITO_CLIENT_ID!,
      userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID!,
      loginWith: {
        oauth: {
          redirectSignIn: [process.env.NEXT_PUBLIC_REDIRECT_URL!],
          redirectSignOut: [process.env.NEXT_PUBLIC_REDIRECT_URL!],
          domain: process.env.NEXT_PUBLIC_OAUTH_DOMAIN!,
          responseType: process.env.NEXT_PUBLIC_RESPONSE_TYPE! as
            | "code"
            | "token",
          scopes: ["email", "openid", "phone"],
        },
      },
    },
  },
};

What I’ve Tried:

• Popup-based Authentication: I considered using a popup for the OAuth flow, but I’m unsure how to properly integrate this with AWS Amplify and handle the redirection.
• Redirection: Redirecting the entire page to handle the login, but this breaks the user experience as the widget is supposed to stay within the iframe.

Any guidance on handling this with a popup or other secure methods would be greatly appreciated.