Auth0 Home Blog Docs

angularAuth0.authorize redirect issue



I’m trying to configure Auth0.js with an Angular application, following the example here:

I’m calling the authorize method from a controller

         connection: 'Username-Password-Authentication', 
            redirectUri: 'http://localhost/mlight2/#/wapmap'

In app.js I’m using $stateprovider

.state(‘callback’, {
url: ‘/wapmap’,
templateUrl: ‘wap_tools/wap_map.html’,
controller: ‘wapMapClr’,
controllerAs: ‘vm’,
resolve: {

On login it directs to the application route (with token)

Any suggestions why this is and how to fix it please?



Hi Robert.
The fragment part of the redirection URI (i.e. #/wapmap) is ignored in the flow. This is part of the OAuth2 spec that forbids fragments in the redirection URI.

That’s why the provided http://localhost/mlight2/#/wapmap value turns into http://localhost/mlight2/#. You can either use a different path or look for the token directly in the application root.


Hi Nico,

I added $locationProvider.html5Mode(true); to the config and changed the redirection URI to ‘http://localhost/mlight2/users/callback’ and changed the callback state object to

.state(‘callback’, {
url: ‘/callback’,
templateUrl: ‘users/callback.html’,
controller: ‘CallbackContrl’,
controllerAs: ‘vm’

On login it is now returning the following URL:


Which looks ok, however it looks like ‘CallbackContrl’ is not being called.

This is the error message:



Shouldn’t either the url in the options object be /users/callback, or the callback URL be just /callback ?


Hi Nico,

I basically set up the state object as per the Auth0 tutorial


and also in the ‘Add a Callback Component’ section.

If I change the callback URL to just /callback as you suggest then the redirect fails

If I change the url in the options object to /users/callback then I just get the previous 404 error.

So it seems that the same set up used in the tutorial is not working for me for some reason.


I think possibly that we may need to configure the state to handle data/parameters in the URL - but the tutorial doesnt do this. I have to go to a meeting but will look at this later.


When initializing the Auth0 library, you need to provide the full URL (not relative):

   // Initialization for the angular-auth0 library
      clientID: 'YOUR_CLIENT_ID',
      domain: 'YOUR_AUTH0_DOMAIN',
      responseType: 'token id_token',
      audience: 'https://YOUR_AUTH0_DOMAIN/userinfo',
      redirectUri: 'http://localhost:3000/callback',
      scope: 'openid'

If your application root is at http://localhost/mlight2 and you configure the Angular router like this:

.state(‘callback’, {
  url: ‘/callback’,

then the redirectUri configuration in the angular-auth0 library will be http://localhost/mlight2/callback. Once you define a callback URL, then you need to whitelist that callback URL in the application configuration in the Auth0 Dashboard. Go to the Allowed Callback URLs setting and add:


In your application configuration, in the Auth0 dashboard, you’ll also need to make sure that you whitelist the callback URL.


That’s how I have it set up except my in config init I have the redirectUri commented out like this:
// Initialization for the angular-auth0 library
domain: ‘YOUR_AUTH0_DOMAIN’,
responseType: ‘token id_token’,
audience: ‘https://YOUR_AUTH0_DOMAIN/userinfo’,
//redirectUri: ‘http://localhost:3000/callback’,
scope: ‘openid’

This is because  I have a login controller like this:


var LoginModule = angular.module( 'LoginControllers', []);

LoginModule.controller( 'LoginCtrl', function ( $scope, angularAuth0) {
             connection: 'Username-Password-Authentication', 
             redirectUri: 'http://localhost/mlight2/callback'

...and a 'login' state like this:

      .state('login', {
         name: 'login',
         url: '/',
         //templateUrl: 'users/login.html',
            controller: 'LoginCtrl',
            controllerAs: 'vm'
    .state('callback', {
         url: '/callback',
         templateUrl: 'users/callback.html',
            controller: 'CallbackContrl',
            controllerAs: 'vm'

The login controller is working and  angularAuth0.authorize is obviously being called and redirecting to the URL (with token). I'm expecting it to then route to the callback controller and users/callback.html but this isn't happening.


I confirm that I’ve also whitelisted the callback url in ‘Allowed Callback URLs’


Where is Auth0 redirecting to when returning the token? http://localhost/mlight2/callback?
If you are still having issues, can you send a .HAR file recording a login attempt, so that I can take a closer look? You can attach it to the support ticket to avoid posting sensitive information here.


Hi Nico, thanks so much for your continued help. I’m glad to say that I’ve fixed this particular issue. The problem was that $locationProvider.html5Mode(true) wasn’t working.

I needed create a .htaccess file in the application root directory with a URL rewrite rule. This is not mentioned in the tutorial and it may be worth adding.

These are all the steps I followed which I found in this blog -

Step 1 - Set $locationProvider html5 mode to true in your route config section


Step 2 - Define a base url tag in the head of your main page

	<base href="/mlight2/" />

Note: that I am working in localhost with XAMP, so I’ve my project lives in a sub-folder called mlight2 which will become / on the server.

Step 3 - Create a .htaccess in root directory.

        RewriteEngine on
        RewriteCond %{REQUEST_FILENAME} -s [OR]
        RewriteCond %{REQUEST_FILENAME} -l [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^.*$ - [NC,L]

        RewriteRule ^(.*) /mlight2/index.html [NC,L]

When I move this project to a live server in the root of a domain, my .htaccess will become:

        RewriteEngine on
        RewriteCond %{REQUEST_FILENAME} -s [OR]
        RewriteCond %{REQUEST_FILENAME} -l [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^.*$ - [NC,L]

        RewriteRule ^(.*) /index.html [NC,L]