title: OWIN and Forms Authentication with WEB API 2 with SPA
body: <p>I have a Web API 2 Project that is referenced by a SPA JavaScript application.</p>
  
  <p>I'm using OWIN to authenticate the requests and upon login with Forms authentication, however, on each send back to the server my resources are not authenticated after I login.</p>
  
  <p>App_Start/WebApiConfig.cs</p>
  
  <pre><code>namespace API
  {
      public static class WebApiConfig
      {
          public static void Register(HttpConfiguration config)
          {
              // Web API configuration and services
              // Configure Web API to use only bearer token authentication.
              config.SuppressDefaultHostAuthentication();
              config.Filters.Add(new HostAuthenticationFilter(Startup.OAuthBearerOptions.AuthenticationType));
  
              config.EnableCors(new EnableCorsAttribute(
                  origins: "*", headers: "*", methods: "*"));
  
              // Web API routes
              config.MapHttpAttributeRoutes();
  
              config.Routes.MapHttpRoute(
                  name: "DefaultApi",
                  routeTemplate: "api/{controller}/{id}",
                  defaults: new { id = RouteParameter.Optional }
              );
  
              // Use camel case for JSON data.
              config.Formatters.JsonFormatter.SerializerSettings.ContractResolver =
                  new CamelCasePropertyNamesContractResolver();
          }
      }
  }
  </code></pre>
  
  <p>/Startup.cs</p>
  
  <pre><code>[assembly: OwinStartup(typeof(API.Startup))]
  
  namespace API
  {
      public partial class Startup
      {
          public void Configuration(IAppBuilder app)
          {
              ConfigureAuth(app);
          }
      }
  }
  </code></pre>
  
  <p>App_Start/Startup.Auth.cs</p>
  
  <pre><code>namespace API
  {
      public partial class Startup
      {
          static Startup()
          {
              OAuthBearerOptions = new OAuthBearerAuthenticationOptions();
          }
  
          public static OAuthBearerAuthenticationOptions OAuthBearerOptions { get; private set; }
  
          public void ConfigureAuth(IAppBuilder app)
          {
              app.UseCookieAuthentication(new CookieAuthenticationOptions());
              app.UseOAuthBearerAuthentication(OAuthBearerOptions);
          }
      }
  }
  </code></pre>
  
  <p>Controllers/AccountController.cs</p>
  
  <pre><code>namespace API.Controllers
  {
      public class AccountController : ApiController
      {
  
          public AccountController()
          {
              HttpContext.Current.Response.SuppressFormsAuthenticationRedirect = true;
          }
  
          [HttpPost]
          [AllowAnonymous]
          [Route("api/account/login")]
          [EnableCors(origins: "*", headers: "*", methods: "*", SupportsCredentials = true)]
          public HttpResponseMessage Login(LoginBindingModel login)
          {
              var authenticated = false;
              if (authenticated || (login.UserName == "a" &amp;&amp; login.Password == "a"))
              {
                  var identity = new ClaimsIdentity(Startup.OAuthBearerOptions.AuthenticationType);
                  identity.AddClaim(new Claim(ClaimTypes.Name, login.UserName));
  
                  AuthenticationTicket ticket = new AuthenticationTicket(identity, new AuthenticationProperties());
                  var currentUtc = new SystemClock().UtcNow;
                  ticket.Properties.IssuedUtc = currentUtc;
                  ticket.Properties.ExpiresUtc = currentUtc.Add(TimeSpan.FromMinutes(30));
  
                  var token = Startup.OAuthBearerOptions.AccessTokenFormat.Protect(ticket);
                  var response = new HttpResponseMessage(HttpStatusCode.OK)
                  {
                      Content = new ObjectContent&lt;object&gt;(new  
                      { 
                          UserName = login.UserName,
                          AccessToken = token
                      }, Configuration.Formatters.JsonFormatter)
                  };
  
                  FormsAuthentication.SetAuthCookie(login.UserName, true);
  
                  return response;
              }
  
              return new HttpResponseMessage(HttpStatusCode.BadRequest);
          }
  
          [HttpGet]
          [Route("api/account/profile")]
          [Authorize]
          public HttpResponseMessage Profile()
          {
              return new HttpResponseMessage(HttpStatusCode.OK)
              {
                  Content = new ObjectContent&lt;object&gt;(new
                  {
                      UserName = User.Identity.Name
                  }, Configuration.Formatters.JsonFormatter)
              };
          }
      }
  }
  </code></pre>
  
  <p>Then I invoke it with JavaScript like:</p>
  
  <pre><code>       $httpProvider.defaults.withCredentials = true;
  
         login: function(user, success, error) {
              return $http.post('/api/account/login', user);
          },
  
          profile:function(){
              return $http.get('/api/account/profile');
          }
  </code></pre>
  
  <p>My cookies are set on the browser:</p>
  
  <p>ASPXAUTH
  040E3B4141C86457CC0C6A10781CA1EFFF1A32833563A6E7C0EF1D062ED9AF079811F1600F6573181B04FE3962F36CFF45F183378A3E23179E89D8D009C9E6783E366AF5E4EDEE39926A39E64C76B165</p>
  
  <p>but after login, further requests are deemed unauthorized...</p>
  
  <p>Status Code:401 Unauthorized</p>
  
  <p>I feel like I'm REALLY close just missing one little piece, anyone got any ideas?</p>