Auth0 Home Blog Docs

Angular access_token appending to URL and 404

lock
angular
auth0
auth0-lock
angular4

#1

Hi, I’m attemping to implement auth0-lock into my Angular 4 web application am running into some access_token issues. When I was only using the Angular development server on :4200, I was able to authenticate and everything ran smoothly. After building the app for production and running it on my node.JS web server, it is no longer authenticating correctly.

The lock appears on auth.login() and it appears as if authentication is successful, but the application then redirects to http://localhost:8888/#/access_token

My current settings in my authentication.service.ts is:

import { Router } from '@angular/router';
import { tokenNotExpired } from 'angular2-jwt';
import { Auth0Lock } from 'auth0-lock';
(window as any).global = window;

@Injectable()
export class AuthenticationService {
  // https://site.auth0.com/
  auth0Options = {
      theme: {
          primaryColor: '#DFA612'
      },
      auth: {
        redirectUrl: 'http://localhost:8888/',
        responseType: 'token id_token',
        audience: 'https://dutchesscap.auth0.com/userinfo',
        params: {
          scope: 'openid profile'
        }
      },
      autoclose: true,
      oidcConformant: true,
  };
    
  lock = new Auth0Lock(
      'AbCdEf...',
      'site.auth0.com',
      this.auth0Options
  );

  userProfile: Object;

  constructor(private router: Router) {
    this.lock.on('authenticated', (authResult: any) => {
        // Set userProfile attribute of already saved profile
        this.userProfile = JSON.parse(localStorage.getItem('profile'));

        // Add callback for lock `authenticated` event
        this.lock.on("authenticated", (authResult) => {

            //https://github.com/auth0/auth0.js/issues/241
            
            localStorage.setItem('token', authResult.idToken);

            var accessToken: string = authResult.accessToken;
            localStorage.setItem('access_token', accessToken);

            // Fetch profile information
            //Use getUserInfo as getProfile is deprecated. Also need to pass in accessToken, not idToken.
            this.lock.getUserInfo(accessToken, (error, profile) => {
                if (error) {
                    // Handle error
                    alert(error);
                    return;
                }

                localStorage.setItem('profile', JSON.stringify(profile));
                this.userProfile = profile;
            });

            // Redirect if there is a saved url to do so.
            var redirectUrl: string = localStorage.getItem('redirect_url');
            if (redirectUrl != undefined) {
                this.router.navigate([redirectUrl]);
                localStorage.removeItem('redirect_url');
            }
        });

    });
  }

  // When called, produce the lock modal that allows authentication
  login() {
    this.lock.show();
  }

  // Remove the localStorage tokens and navigate to the survey page
  logout() {
    // Remove token from localStorage
    localStorage.removeItem('id_token');
    localStorage.removeItem('access_token');
    localStorage.removeItem('profile');

    this.router.navigate(['survey']);
  }

  // Checks if the token has expired / if it exists
  isAuthenticated() {
    return tokenNotExpired('id_token');
  }

}```