Auth0 Home Blog Docs

Parse Hash not working for Angular.js in IE 11 & Edge

lock
jwt
login

#1

We are experiencing an unusual issue with the parse hash functionality in our angular.js apps in IE 11 and Edge.

After being redirected back from the Auth0 hosted login page on successful login we are calling the parseHash function

angularAuth0.parseHash({ hash: window.location.hash }, function (err, authResult) {

but before the callback is executed the app is redirecting back to the Auth0 login page. This same behavior does not occur in other browsers (Chrome, Firefox).

We are using the parse hash functionality copied directly from the quickstart Angular.js SPA quickstart.

    function handleAuthentication() {
        angularAuth0.parseHash({ hash: window.location.hash }, function (err, authResult) {
            if (authResult && authResult.accessToken && authResult.idToken) {
                setSession(authResult);
                $window.location.href = '/';
            } else if (!isAuthenticated()) {
                login();
            } else if (err) {
                $timeout(function () {
                   $window.location.href = '/';
                });
                console.log(err);
            }
        });
    }
	
	function login() {
        angularAuth0.authorize();
    }
	
	
function setSession(authResult) {
  // Set the time that the access token will expire at
  let expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
  localStorage.setItem('access_token', authResult.accessToken);
  localStorage.setItem('id_token', authResult.idToken);
  localStorage.setItem('expires_at', expiresAt);
}

function logout() {
  // Remove tokens and expiry time from localStorage
  localStorage.removeItem('access_token');
  localStorage.removeItem('id_token');
  localStorage.removeItem('expires_at');
  $state.go('home');
}

function isAuthenticated() {
  // Check whether the current time is past the 
  // access token's expiry time
  let expiresAt = JSON.parse(localStorage.getItem('expires_at'));
  return new Date().getTime() < expiresAt;
}



	  .run(function ($rootScope, $stateParams, authService) {
        authService.handleAuthentication();
		$rootScope.$on('$stateChangeStart',
            function (event, toState, toParams, fromState) {
		...
		});
	});

#2

Issue seems to be related to the way Angular.js routing was rewriting the url in Edge and IE causing the parseHash function to be called twice.

Updating the location provider seems to have fixed the issue.

  $locationProvider.html5Mode({
            enabled: true,
            requireBase: false,
            rewriteLinks: false
        });