AngularJS ui-router clashes with OAuth2 access_token

Question

I have a front-end developed in AngularJS with ui-router. To consume the REST API from the backend I need to get an OAuth2 access token (implicit grant).

My problem lies in the last step of the OAuth dance, when I get the access token back from the authentication server in the url

mydomain.com/home/#access_token=hdzjkdnba89fenbjkéz38U0D903ç&...

mydomain.com/home being the redirect URI, obviously.

Just a fraction of second after the redirection, AngularJS changes the URL in something like

mydomain.com/#/my-default-view

and consequently the access token is erased from the URL.

A few things now:

• I am not allowed to define a redirect URI containing a hash ('#') for my OAuth2 client. Hence something like mydomain.com/#/auth-complete/ would not be OK.
• I use $routeProvider.otherwise('/').
• I tried to set $locationProvider.html5Mode(true); to remove the '#' in the middle but the problem is the same (the URL and the access token are erased instantly after redirection).
• As the access token is still accessible in the HTTP response even after the URL is modified by Angular, I could probably use an $http interceptor but that sounds a bit too much for this common task isn't it?

Any advice?

Answer 1

This one works for me with Google as OAuth2 provider for Client-side Applications:

$urlRouterProvider.otherwise('/');

$stateProvider.state('access_token', {
    url: '/access_token={accessToken}&token_type={tokenType}&expires_in={expiresIn}',
    template: '',
    controller: function($stateParams) {
        var token = $stateParams.accessToken;
        // do something usefull with token
    }
})