Auth0 Home Blog Docs

angularAuth0.authorize redirect issue

auth0

#1

Hi,
I’m trying to configure Auth0.js with an Angular application, following the example here: https://auth0.com/docs/quickstart/spa/angularjs/01-login#configure-angular-auth0

I’m calling the authorize method from a controller

angularAuth0.authorize({
         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)
http://localhost/mlight2/#/access_token=Yvcsb7g

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

Cheers
Rob


#2

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.


#3

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:

http://localhost/mlight2/users/callback#access_token=CGC8pV15mizuBe8pDs4bGoeW9dkFrad0&expires_in=7200&token_type=Bearer&state=90S7iRuBPtAR~yGsSR7cnpVmIJTLZv.Y&id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NwYXRpYWxhcHAuZXUuYXV0aDAuY29tLyIsInN1YiI6ImF1dGgwfDU3MWEyYTA4NGVhMDdhNDg1Zjc1M2M2NSIsImF1ZCI6ImJDOXJMZXcyaUVOSmM4OTJOMXBrQ2ZxREtkZnNjVkZSIiwiaWF0IjoxNTMzODI3OTAxLCJleHAiOjE1MzM4NjM5MDEsImF0X2hhc2giOiJ1VmFUV0E0UkRNaFhOOXlMRjg5RG53Iiwibm9uY2UiOiI2eHVESW1VOHo0ckRpLn5DdXJOVTVVdWE3UGMxa0JVNiJ9.pc1T8d9_5l3miK9myevKg9rAQAPRyFPiiKINsZjFpVk

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

This is the error message:

image


#4

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


#5

Hi Nico,

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

image

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
image

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.


#6

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.


#7

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

   // Initialization for the angular-auth0 library
    angularAuth0Provider.init({
      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:

http://localhost/mlight2/callback.

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


#8

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
angularAuth0Provider.init({
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’
});

This is because  I have a login controller like this:

//users/login.js

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

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

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

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

#9

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


#10

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.


#11

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 - http://amypeniston.com/web/htaccess-angular-hash-routing

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

	$locationProvider.html5Mode(true);

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]