OWIN middleware registration sequence matters here. The right order is to register web api after all authentication middleware. The following code should work:
public void Configuration(IAppBuilder app)
{
var config = new HttpConfiguration();
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(Startup.OAuthOptions.AuthenticationType));
config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
config.MapHttpAttributeRoutes();
app.UseCookieAuthentication(CookieOptions);
app.UseExternalSignInCookie(ExternalCookieAuthenticationType);
app.UseOAuthBearerTokens(OAuthOptions, ExternalOAuthAuthenticationType);
app.UseFacebookAuthentication(
appId: "123456", // obviously changed for this post
appSecret: "deadbeef"); // obviously changed for this post
app.UseWebApi(config);
}
BTW, I just wrote a blog to explain the security features in SPA template. http://blogs.msdn.com/b/webdev/archive/2013/09/20/understanding-security-features-in-spa-template.aspx