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 protected] (notice the # instead of expected question mark)
then (after a second or so) it redirects to: http://localhost:3000/#/access_token

My questions are:

How to have Auth0 actually redirect to callbackURL?

How can I catch the token with the new angular2 router, even though the uri is misformed? (question mark missing before the query)

Manube Manube · Accepted Answer · 2016-11-08T08:42:02

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...

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

1 Answers