Log in in a popup window

Get Help
,
12

Hello,

I’m back with some good news.

I did manage to handle authentication to an app embedded in an iframe.

Here’s what I did for those who have the same need I had :

On your app :

Redirect unauthenticated users to a custom login page and not the Auth0 one anymore.

On this page you need to have a link that redirects to the Auth0 lock page. In my case /auth/auth0

<a class="auth-popup" href="/auth/auth0">Login</a>

Then add this piece of JavaScript do handle the click on the link, to open up a pop up

$('.auth-popup').on('click', function(e) {
  window.open($(this).attr('href'), 'authPopup', "menubar=no,toolbar=no");
});

For additional options on popup window size and coordinates, see here : Window.open() - Référence Web API | MDN

Finally, on your callback URL, you need to close the popup and redirect the parent window back to original URL.

Here is the code I used for this

if (!window.opener) {
  window.location = '<%= @redirect_url %>'
} else {
  window.opener.location = '<%= @redirect_url %>'
  window.close()
}

<%= @redirect_url %> is an ERB template tag that return the URL the user comes from. Adapt this to your application and templating language.

Thank you Auth0 team for your help and pointing me to the right direction. :slight_smile:

2 Likes