angularAuth0.authorize redirect issue

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

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:

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

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

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.

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

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.

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 - 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]

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.