nextjs-auth0 VS iframe-resizer

How you want to typically manage Auth0 is by using one of their libraries, at least that's how I do so: i.e. with nextjs https://github.com/auth0/nextjs-auth0

The only option I found is this one https://github.com/auth0/nextjs-auth0 so, just wanted to know anyone else faced this and how they solved it.

For Nextjs, it’s different since the package used is @auth0/nextjs-auth0

Auth0’s Next.js SDK to handle the user authentication.

@auth0/nextjs-auth0 is a library for implementing user authentication in Next.js applications.

Check out documentation for more details @auth0/nextjs-auth0.

Hi, I am trying to implement an authentication flow using auth0 with the auth0/nextjs-auth0 library, everything works fine until test the application inside an IFrame.

As a part of this hackathon, I am using the popular authentication provider, Auth0 for user authentication on my application. Auth0 is great to get started (especially with their quickstarts) and has a quite generous free tier. The NextJS SDK provides all the basic features along with some advanced ones too and is quite easy to implement and use. There is a Universal Login Page which means one can get started quickly without the need of developing components for that (though you have the option to).

As we're using NextJS, we need to select regular web applications. After creating the application, we should redirect to its settings page. Scroll down and edit the application URL as shown below, then save your changes. You can check auth0 next.js documentation here.

It worked every time I used it. It uses https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage check docs here https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/options.md you can control targetOrigin

Setup an authorised-iFrame parent communication pathway. This way you can validate an authenticated parent. If fails, delete the DOM or show an error message. This is a good base. https://github.com/davidjbradshaw/iframe-resizer

If you have control over the content in the iFrame, you can try using iframe-resizer.

I have a child component in my app, and that child features a dropdown menu that allows the user to select from a few .html files to view in an iframe. I'm using the iframe-resizer library (https://github.com/davidjbradshaw/iframe-resizer) to dynamically size the iframe to its contents.

iframe resizer do that , it need script in the host frame , and inside the iframe

I am trying to dynamically resize the height of an iFrame using "iframe-resizer" However, this is not working as expected. I have followed the guidance on the "Getting Started" section of the documentable but with no luck

If you have control over the content that’s in the iframe, you could look into iframe-resizer. I’m using it in an enterprise project and it’s working very well.

The embed supports Iframe Resizer so it is quite simple.