Web Api 2 subdomain Token authentication

Question

I am creating a site using AngularJS and the out-the-box WebApi2 token authentication template (Individual User Accounts). I am trying to get two sites to be logged in at the same time, one at www.domain.com and the other at sub.domain.com

Currently I use the following code in angular to authenticate the user:

 $http({
            method: 'POST',
            url: '/Token',
            data: serializedData,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).success(function (data, status, headers, config) {
            $window.sessionStorage.token = data.access_token;
        });

and append the authorization header for every request after:

app.factory('authInterceptor', function ($rootScope, $q, $window) {
        return {
            request: function (config) {
                config.headers = config.headers || {};
                if ($window.sessionStorage.token) {
                    $window.sessionStorage.loggedIn = true;
                    config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
                }
                return config;
            }
        };
    });

    app.config(function ($httpProvider) {
        $httpProvider.interceptors.push('authInterceptor');
    });

The above code allows each site to login individually, however sessionstorage doesn't persist across other windows/tabs so it will not log the user in to the subdomain.

There are some comments in this blog post regarding this issue (half way down): http://blog.auth0.com/2014/01/07/angularjs-authentication-with-cookies-vs-token/

However it seems way too complicated to implement (and have the undesired effect of the user getting redirected). I was hoping for something as easy as setting a domain, just like with cookies:

app.UseCookieAuthentication(new CookieAuthenticationOptions()
            {
                CookieDomain = ".domain.com"
            });

I'm starting to doubt whether I should be using token authentication over cookies in the current scenario...

Answer 1

This was explained in a follow up post: Local/session storage won't work across domains, use a marker cookie .

You can create a cookie for .domain.com from javascript to store the token. Cookies, local storage and session storage are the ways the browser has to store information:

... we are not using the cookie as an authentication mechanism, just as a storage mechanism that happens to support storing information across different domains.