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