How do I authenticate separately in two different front-end apps with the same API using Okta, Web API 2, and Angular2?

How do I authenticate separately in two different front-end apps using the same API?

TL;DR - Is it possible to whitelist a subdirectory in a project, so that when a request comes from there, the passive redirect settings in my web.config will be ignored and a client user would be allowed to hit a login page in that subdirectory to get authenticated as a client instead of an employee, and then only have access to that portion of the application/those web api endpoints via role-based authorization?

This is my first ever question asked on StackOverflow in almost exactly two years of entry level software development, so I apologize ahead of time if I ramble a bit. I need some help! I’m hoping that just writing this out will help me think out the problem - I have looked for answers to my questions but haven’t found exactly what I need yet.

This is mainly for anyone with .NET WEB API 2 experience using OKTA authentication.

I’m developing an application that needs to have two ways to login (from two separate Angular2 front-end web apps) and become an authenticated user in order to access the same .NET WEB API 2 server (not necessarily the same exact endpoints, just the same server).

We have an organization’s SSO system currently configured in the server project (via web.config settings) to redirect any unauthenticated users to go sign in using their company’s credentials (this uses OKTA authentication http://ift.tt/1qkhgl5 ) and once they do that, OKTA returns a principal that I can easily use to compare against some user records in my app’s database and grant Authorization based on user roles, etc. That is all working well in my multiple deployed environments. The redirect happens on app startup, whenever an API endpoint is called (this happens on every page of the app).

My issue now is that we need to allow a client (NOT an employee using SSO) to log into a separate Angular2 web app located in a separate directory that’s at something like http://ift.tt/1UGRTGL to go through their own, simpler authentication process so they can access the client API endpoints in my server project.

(Repeated/Continued from TL;DR) Is it possible to whitelist a subdirectory in a project, so that when a request comes from there, the passive redirect settings in my web.config will be ignored and a client user would be allowed to hit a login page in that subdirectory to get authenticated as a client instead of an employee (I will write the logic for that), and then only have access to that portion of the application/those web api endpoints via role-based authorization?

If they navigate outside of that subdirectory I want the redirect to trigger as it does now, so that they don’t see any employee-only features.

Here are the relevant lines in my Web.Config.cs:

<configuration>
  <system.identityModel>
    <identityConfiguration>
      <audienceUris>
        <add value="http://ift.tt/1q4EOKd" />
      </audienceUris>
      <certificateValidation certificateValidationMode="None" />
      <issuerNameRegistry type="System.IdentityModel.Tokens.ConfigurationBasedIssuerNameRegistry, System.IdentityModel, Version=4.0.0.0, Culture=neutral, PublicKeyToken=NotForSharingOnStackoverflow">
        <trustedIssuers>
          <add thumbprint="NotForSharingOnStackoverflow" name="Okta" />
        </trustedIssuers>
      </issuerNameRegistry>
      <securityTokenHandlers>
        <add type="System.IdentityModel.Services.Tokens.MachineKeySessionSecurityTokenHandler,System.IdentityModel.Services, Version=4.0.0.0, Culture=neutral, PublicKeyToken=NotForSharingOnStackoverflow" />
        <remove type="System.IdentityModel.Tokens.SessionSecurityTokenHandler, System.IdentityModel, Version=4.0.0.0, Culture=neutral, PublicKeyToken=NotForSharingOnStackoverflow" />
      </securityTokenHandlers>
    </identityConfiguration>
  </system.identityModel>
  <system.identityModel.services>
    <federationConfiguration>
      <wsFederation name="WSFederationConfig" passiveRedirectEnabled="true" issuer="http://ift.tt/1q4EOKd" realm="urn:okta:app:NotForSharingOnStackoverflow" requireHttps="false" />
      <cookieHandler requireSsl="false" name="NotForSharingOnStackoverflow" />
    </federationConfiguration>
  </system.identityModel.services>
  <system.web>
    <authorization>
      <deny users="?" />
    </authorization>
    <machineKey compatibilityMode="Framework45" validationKey="NotForSharingOnStackoverflow" decryptionKey="NotForSharingOnStackoverflow" validation="SHA1" decryption="AES" />
  </system.web>
  <system.webServer>
    <modules>
      <add name="WSFederationAuthenticationModule" type="System.IdentityModel.Services.WSFederationAuthenticationModule, System.IdentityModel.Services, Version=4.0.0.0, Culture=neutral, PublicKeyToken=NotForSharingOnStackoverflow" preCondition="managedHandler" />
    </modules>
  </system.webServer>
</configuration>

---

Has anyone tried this before? Is my approach even possible? I’m new to Angular2 and Okta, and still am an entry level dev doing .NET stuff, so any advice or links to articles would be greatly appreciated. Thanks! :)