Next Auth fails within an iframe

[bdesouza]

Describe the bug
Unable to login with next-auth when the app is inside an iframe.

Steps to reproduce
Create a page with an iframe.

<iframe src="https://next-auth-example.now.sh/" width="100%" height="550"></iframe>

On inspection, noticed that the request is received in [...nextauth].js. However, the NextAuth app doesn't seem to act upon it.

export default (req, res) => {
   console.log(req.body);
   return NextAuth(req, res, options);
};

Expected behavior
Should work as normal and I should be able to login.

Feedback

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[mikestopcontinues]

Hey, what's your use case? I was just thinking about how to solve this problem for an app that needs to keep a user signed in across domains. I'm thinking maybe to use an iframe on login.example.com simply to store the session data, but not to handle sign-in. As an example, a user logs in on admin.example.com, window messaging sends the session data to the iframe, then when they visit app.example.com, their session is pulled from the iframe.

[bdesouza]

In our case, the app is loaded in an iframe by another application. Essentially a third party service that a customer can embed in their dashboard.

[umerjaved178]

@bdesouza Have you found any solution?

[Inkapa]

I'd like to know as well

[unsphere]

I have the same use case now. Apps for the given provider will be shown in an iframe. Using signIn causing an infinite loop and nothing happens when you click on a provider at /api/auth/signin. Of course, I can redirect to authorize URL by myself, but then state protection has to be off and the user will be not redirected to the requested page after oauth.

[umerjaved178]

@unsphere how did you get around of this problem?

[maiconcarraro]

Any updates/workarounds?

[nfts2me]

Also interested on this. Any solution?

[andrewgbliss]

Also trying to find a solution to this issue. Any one looking at this thread?

[ricardasjak]

Similar issue when trying to use azure-ad provider and embed nextjs app into MS Teams Tab app. The app is embeded into iframe and faces restrictions, e.g.
Refused to display 'https://login.microsoftonline.com/' in a frame because it set 'X-Frame-Options' to 'deny'

[apelmahmudDev]

I have found similar issue. Please solve it asap with keep secure. When I try to keep inside iframe my nextjs app with next-auth. There have issue that login doesn't work.

[ricardasjak]

So, apparently many auth providers, including Microsoft disallow login page loading on an iframe due to security reasons.

Suggestion: let auth flow in a popup window, and also enable some kind of way to pass obtained session in the popup down to parent window or parent iframe. Currently it requires to enable cross-site cookies, which is not great solution and will not work soon, when Chrome bans it.

I created a thread in Stackoverflow, with more specific problem with MS Teams app context, where things are running in an iframe:
https://stackoverflow.com/questions/77825853/can-i-recreate-next-auth-v4-session-on-the-client-side-in-iframe

[agsola]

Nobody?

[karar-shah]

https://github.com/nextauthjs/next-auth/discussions/1585