Auth0 and angular2: how to set callbackURL and catch the token?

Question

I am trying to implement passwordless authentication with Auth0 and angular2 (2.0.0-rc.6), using angular2-webpack-starter and auth0-lock-passwordless.

The form displays normally, and the authentication e-mail is sent using this code:

this.lock.magiclink({
    callbackURL:"http://localhost:3000/#/sandbox"
    });

The issues occur after I click the magic link in the e-mail:

• Even though the redirect_uri of the magic link seems correct (redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F%23%2Fsandbox), it is ignored;

• Instead, after a successful login (checked in Auth0 logs), the url in the address bar is (briefly): http://localhost:3000/#access_token=xxxxxxxxxx&id_token=yyyyyyyyy&email=myemail@emails.com (notice the # instead of expected question mark)

• then (after a second or so) it redirects to: http://localhost:3000/#/access_token

---

My questions are:

1. How to have Auth0 actually redirect to callbackURL?
2. How can I catch the token with the new angular2 router, even though the uri is misformed? (question mark missing before the query)

Answer 1

After much struggling, I found a workaround.

TL;DR; use PathLocationStrategy (HTML 5 pushState), not the "hash URL" style.

---

Below Allowed logout URLs and Allowed origins in the Auth0 console (Clients settings), it is specified:

Notice that querystrings and hash information are not taken into account when validating these URLs.

So I figured it might apply to Allowed Callback URLs as well, even though it was not specified.

That would explain why callbackURL is ignored.

---

The trick is then to get rid of the hash (#) in the URLs; the hash is the default LocationStrategy in Angular2 Webpack Starter.

To do that, in app.modules.ts, change RouterModule.forRoot(ROUTES, { useHash: true }) to RouterModule.forRoot(ROUTES, { useHash: false })

---

Although it should have worked, I came accross yet another issue: when you reload a page, it gives a blank page with the following message:

<% if (webpackConfig.htmlElements.headTags) { %>

After a little Googling, I found a fix in this page.

The fix is to remove the carret (^) in the "webpack-dev-server": "^2.1.0-beta.2" (devDependencies, package.json), and reinstall the package:

• replace "^2.1.0-beta.2" by "2.1.0-beta.2"

then, in console/terminal, type: npm install webpack-dev-server

---

Now all I had to do was to update the callbackURL like so:

this.lock.magiclink({
  callbackURL:"http://localhost:3000/sandbox"
});

And in Auth0 Clients settings' Allowed Callback URLs, insert:

http://localhost:3000/sandbox

and save.

Now, after a successful login (when I click the magic link in the e-mail), it opens a browser window with following URL:

http://localhost:3000/sandbox#access_token=xxxxxxxxxxx&id_token=yyyyyyyyyyy&token_type=Bearer

and it stays there, as it should. Catching and saving the token should now be trivial...