AssertionUrl for AngularJS Application

The flow of my application is that,

  1. User enter the Url and AngularJS Login page is displayed
  2. User click on Login with SAML and calls the Web API endpoint which returns the SAML login URL
  3. AngularJS UI receives the SAML Login URL and redirects the user to the Idp Login screen
  4. User is authenticated from Idp and Idp calls the AssertionUrl

The issue starts here,

  1. If I create an Assertion Url on Web API and validates the request then how the AngularJS UI will know that Login was successful or not?

In the case of MVC and Web Forms, it is pretty straightforward but what should be done in the case of AngularJS/Angular SPA?

Edit 1:

Login Flow

SPA -> API -> SPA -> Idp

(SPA calls API, API generate SAML Request and Returns it to SPA, SPA then is redirected to Idp)

Assertion Flow

Idp -> API ? SPA

(Idp calls the AssertionUrl in the API and API generates the JWT but how it will be sent to SPA?)

Answer

In a AngularJS/Angular SPA you have two possible solution to handle the subsequently user session after successfully SAML 2.0 authentication.

  1. Use a cookie like in ASP.NET MVC. Where you have to restrict the cookie to make it secure in a SPA. It require your API and SPA to be on the same domain.

  2. Create a JWT access token after successfully login. Which is handed to the SPA and validated in each API call in the backen API code.

You can create a JWT access token with the ITfoxtec.Identity package. By calling the JwtHandler.CreateToken method https://github.com/ITfoxtec/ITfoxtec.Identity/blob/master/src/Tokens/JwtHandler.cs#L38.

Edit 1

All communication between SPA, IdP and API is either redirect or post through the client browser.

After successful authentication in the assertion flow. The API can redirect to the SPA with the access token in a query or fragment in the URL