Add resumeAuth method and autoParseHash flag

[luisrudge]

When Lock redirects to the redirect url, it puts the params after a # (eg: #id_token=foo&access_token=bar. This causes some issues with client side routers that use # to handle urls. An example is auth0-samples/auth0-angularjs2-systemjs-sample#40.

This PR adds an option to prevent parsing the hash when you instantiate lock (autoParseHash) and adds the resumeAuth method to resume the authentication steps (including all the events)

[hzalaz]

Just merge the ifs there is no need to nest them

[stefanruijsenaars]

Are there any code snippets that show how can incorporate this into an Angular 2 application with useHash = true?

[luisrudge]

@stefanruijsenaars I think @chenkie is updating our angular2 guides. For now, use this as a guide. Then replace handleRedirectWithHash with this:

private handleRedirectWithHash() {
  this.router.events.take(1).subscribe(event => {
    if (/access_token/.test(event.url) || /error/.test(event.url)) {
      this.lock.resumeAuth(window.location.hash);
    }
  });
}

I'm not sure this will work 100%, but it's something like that. Our angular2 guide will work 100% though, if you want to wait for it 😁

[chenkie]

@stefanruijsenaars the method that's going into the samples will pretty much look like this:

public handleAuthenticationWithHash(): void {
  this
    .router
    .events
    .filter(event => event.constructor.name === 'NavigationStart')
    .filter(event => (/access_token|id_token|error/).test(event.url))
    .subscribe(event => {
      this.lock.resumeAuth(window.location.hash, (error, authResult) => {
        if (error) return console.log(error);
        this.setUser(authResult);
        this.router.navigateByUrl('/');
      });
  });
}

private setUser(authResult): void {
  localStorage.setItem('access_token', authResult.accessToken);
  localStorage.setItem('id_token', authResult.idToken);
}

[mrahbar]

@chenkie For someone how tries to get auth0 working in angular 1 as well as 2 I find unfortunately lot of different examples and configuration options and can't always tell which is the correct and most up to date one.

Having said that, your code snippet should be take as the current way to implement auth0-lock on angular 2. The method handleAuthCallback() path didn't work as expected because it was called after location.hash was empty. Probably because the problems mentioned here

• How to use useHash flag for callback returns after login from Auth0 dialog auth0-samples/auth0-angularjs2-systemjs-sample#40 (comment)
• Cannot log in when {useHash: true} is used in RouterModule.forRoot() with Angular 2 #806

Now resumeAuth() which was called anyways by handleAuthCallback() has to be called directly via the above provided implementation. Which in turn will lead to the emitting of the existing events called in parseHash() callback.

So my two cents:

I kept my previous implementation of this.lock.on("authenticated", (authResult) => { ...} ) ( and added also an event listener on 'authorization_error' just in case) and used the following snippet which is based on the above code:

 this._router.events
      .filter(event => event instanceof NavigationStart)
      .filter(event => (/access_token|id_token|error/).test(event.url))
      .subscribe(event => {
        this.lock.resumeAuth(window.location.hash, (error, authResult) => {});
      });

This lets existing code the way it is as well as existing examples and tutorial snippets. And remember to set auth: { autoParseHash: false} in the config options.