How to handle log out and redirect

Question

Created a SPA application with .NET Framework 4.5 that will use AngularJS. I implemented the System.IdentityModel per instructions to point to a third party authentication.

Web.config edits:

<configSections>
    <section name="system.identityModel" type="System.IdentityModel.Configuration.SystemIdentityModelSection, System.IdentityModel, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
    <section name="system.identityModel.services" type="System.IdentityModel.Services.Configuration.SystemIdentityModelServicesSection, System.IdentityModel.Services, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
  </configSections>
  <location path="FederationMetadata">
    <system.web>
      <authorization>
        <allow users="*" />
      </authorization>
    </system.web>
  </location>

...

<system.web>
    <authorization>
      <deny users="?" />
    </authorization>
    <authentication mode="None" />
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime requestValidationType="ourcustomvalidator, ourcustomnamespace" />
    <pages controlRenderingCompatibilityVersion="4.0" validateRequest="false" />
  </system.web>

....

<modules runAllManagedModulesForAllRequests="true">
      <remove name="FormsAuthentication" />
      <add name="WSFederationAuthenticationModule" type="System.IdentityModel.Services.WSFederationAuthenticationModule, System.IdentityModel.Services, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" preCondition="managedHandler" />
      <add name="SessionAuthenticationModule" type="System.IdentityModel.Services.SessionAuthenticationModule, System.IdentityModel.Services, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" preCondition="managedHandler" />
    </modules>

...

So on initial launch of the Single Page Application, the site redirects to the authorization site. From there you login, authorize and you're redirected back to the application.

Now I have a WebAPI Restful section being a part of the solution as well to log client errors and also to handle logging out within our application. This has lead me to a few problems that I am not grasping:

1) If I make a /api/logoff call to my WebApi, I can call FederatedAuthentication.SessionAuthenticationModule.SignOut(); and I am signed out behind the scenes. Using angular, how should I go about redirecting the user? I noticed after I issue this command, if I hit F5, my site is refreshed but I am automatically logged back in. I would prefer this go back to the login screen I get on initial page load.

2) If I make a /api/custom call to my WebApi and I was logged out behind the scenes, how do I capture that and redirect the user? Right now I am getting an error message along the lines of:

XMLHttpRequest cannot load https://mycustomloginurl.com/?wa=wsignin1.0&wtrealm=http%3a%2f%2flocalhost%3a561…%3dpassive%26ru%3d%252fwebapi%252fims%252ftesting&wct=2014-02-21T21%3a47%3a09Z. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:56181' is therefore not allowed access. 

Sorry if this confusing, I am trying to wrap my head around all of this.

Answer 1

Thanks to some more research, this post: Prevent XmlHttpRequest redirect response in .Net MVC WS-Federation Site helped me get to the right answer.

Basically I followed the same code but added the following:

resp.Clear();  // cleared the response
var fa = FederatedAuthentication.WSFederationAuthenticationModule;
var signInRequestMessage = new SignInRequestMessage(new Uri(fa.Issuer), fa.Realm);
var signInURI = signInRequestMessage.WriteQueryString();
resp.Write(signInURI);

So I cleared the response and made the body of the response contain the Sign-In URL for the authentication. In angular, I have a HTTP interceptor that checks for status code 401 and then uses the above data to redirect to the login.

app.config([
    '$httpProvider', function($httpProvider) { 

    var interceptor = ['$rootScope', '$q','$window', function (scope, $q, $window) {
        function success(response) {
            return response;
        }
        function error(response) { 
            var status = response.status;
            if (status == 401) {   
                $window.location.href = response.data.replace(/"/g, "");  
            }
            // otherwise
            return $q.reject(response);
        }
        return function (promise) {
            return promise.then(success, error);
        }
    }];
    $httpProvider.responseInterceptors.push(interceptor);
    }
]);