Auth0 Home Blog Docs

Magiclink redirect URL sits on target but does not transition

passwordless
magic-link
redirect

#1

Not sure i’m using the right language here, but basically here are the steps:

  • Login with Passwordless MagicLink
  • Check email and click on the signin button
  • the Access token and all params are GET’d in the URL and are sent to the redirect host.

But the url just sits there in the address bar. If i manually focus the Address Bar and hit enter, then boom, i’m in. But if I don’t notice then it looks like nothing has happened; my users obviously click the login button again, which restarts the loop. I should mention that I have my login button on my home page; not sure if that’s relevant, but I am hitting the root every time. Client side I’m using the ember-simple-auth-auth0 library found here:

And just to make things particularly nasty, this is an intermittent problem. It doesn’t happen with any discernible regularity on platform or browser.

I don’t even know how to debug this one. pretty random and very frustrating.

Update:

Thanks @prashant HAR attached along with some screenshots. However, I don’t think the HAR will help but the problem might be more obvious when i describe the following:

I opened a tab and was going to save the HAR from there. Then i clicked on the login and fired off the link. When i clicked the link it then opened a new tab – not the original one i had opened – with the payload in the URL sitting there, but otherwise just opening the home page content, giving the impression that nothing had happened. If I then hit enter the login completes and i’m in. Of course, the user doesn’t do that and simply sends another email, which produces a race condition with the inbound links and it’s just a mess.

https://www.dropbox.com/s/y6dmlunxvj3oxek/login_bug.pdf?dl=0
https://www.dropbox.com/s/6yc62bdgyf9uqjg/localhost.har?dl=0


#2

Would it be possible to capture a HAR file of this behaviour: https://auth0.com/docs/har. Please remove any sensitive information from the file before sending it through.


#3

From your screenshots, it seems that:

  1. Upon clicking the link, your application is redirected to in a new tab.
  2. The hash in the URL is not immediately parsed, hence user is not logged in.

In your application, you need to handle this using the parseHash method from Lock, or Auth0.js

//parse hash on page load
$(document).ready(function(){
  var hash = lock.parseHash(window.location.hash);

  if (hash && hash.error) {
    alert('There was an error: ' + hash.error + '\n' + hash.error_description);
  } else if (hash && hash.id_token) {
    //use id_token for retrieving profile.
    localStorage.setItem('id_token', hash.id_token);
    //retrieve profile
    lock.getProfile(hash.id_token, function (err, profile) {
      if (err){
        //handle err
      } else {
        //use user profile
      }
    });
  }
});

You will need to ensure that this function runs on page load, in order to login the user when they are redirected to this page after clicking the link.


#4

@prashant , thank you for your pointer. I’m using the following library, which has the relevant code at this location: https://github.com/seawatts/ember-simple-auth-auth0/blob/develop/addon/mixins/application-route-mixin.js#L86

My particular version of Auth0.js is ^8.2.0, so it is using the new parsing method. However, I must confess that my knowledge is otherwise limited. I was able to find what should be working, but can’t articulate why it isn’t.

Again, this is an intermittent problem, and I can’t figure out any particular reason why it works on some browsers but not others. I can’t replicate locally, so tracking this down is beyond my skills. Can you provide any further direction given that library?

Best, Dave


#5

Here is a HAR with the offending behavior in a single tab (captured through the Cut and Paste link method)

https://www.dropbox.com/s/791cjyxlhjwaj0j/barberscore.com.har?dl=0


#6

Roadmap Changes: What about passwordless ?
Roadmap Changes: What about passwordless ?
#7