Identity Server 4 + Identity Framework + React front-end

Question

I'm looking for advice on how to properly put an environment like this together. There's a ton of info out there and a ton of material to cover in the Quickstarts, but I'm still feeling fairly lost after 3 days of trial-and-error. I'm familiar w/ Identity Framework in the .NET Framework, but have never worked with Identity Server prior to this.

We've got a microservices setup built on Node and MySql...a series of services in Docker containers which talk to their own db nodes in a MySql cluster. We have a single management UI built in React & Redux - it will run from an AWS bucket.

I've been tasked with authenticating this React front-end using Identity Server. We will NOT be doing auth on the APIs with it. I've suggested building the authentication UI in .NET Core using Identity Framework, since it gives us everything we need "out of the box".

Eventually, The two Identity apps will be our SSO for all applications written against these APIs, and even those that aren't. Furthermore, I'll need to incorporate AD at some point to allow internal company users to pass through w/o manually authenticating.

What (I think) we need is the following:

• Identity Server 4 running in its own container
• Core Identity MVC app running in own container
• Use oidc-client on front-end to authenticate

What I've done so far, is follow these two tutorials:

http://docs.identityserver.io/en/release/quickstarts/6_aspnet_identity.html#new-project-for-asp-net-identity

http://docs.identityserver.io/en/dev/quickstarts/7_javascript_client.html

My result is a running Identity Server and Identity Core MVC app running together in the same project (two different ports.) After following the JS client tutorial, I have their example code running - it redirects me to the MVC login, which authenticates against Identity Server, then returns this result:

{
  "sid": "8e60eb65960d967834cb3eb4fdcbbd49",
  "sub": "dfc90bd1-cad4-45d0-84bd-174e8a6ca891",
  "auth_time": 1516296631,
  "idp": "local",
  "amr": [
    "pwd"
  ],
  "preferred_username": "[email protected]",
  "name": "[email protected]"
}

Clicking logout fails, but that's because the controller example in the first tutorial doesn't include a GET for a logout, like the example controller buried in the JavaScriptClient example.

It feels like I'm getting somewhere but at the same time, I now fully realize how little I know. Could use advice, or even just a pointer to the correct Quickstarts to achieve what I'm looking for.

Solution

Base Setup Based on what i read ideally what you want to do is break it up into 3 components

• Identity Management component
• API Component
• MVC/MVVM component

For the Identity Management component use this quickstart as example ASPNetIdentity + IS4 EF or this one without the EF component.

Your API should be only authorizing (not authenticating) with all the authentication and registration occurring on ID4 server.

Your frontend (MVVM or MVC client) should be registered with ID4 server with all the bells and whistles as per tutorials:

• MVC
• Javascript

This should enable you to have a API(s) that is/are secured, single IdentityManagement source (basically build onto it to be a true SSO/Federated Gateway), all while separating the front end of your application(s).

Hope this helps.

Additional Info:

Further to the answer there are libraries you can use (or build yourself) for OIDC client for react that you can put into your front-end to help you achieve some results quicker.

FYI I use angular + id4 with AspCoreIdentity + AspCore API. All that i need to do is create the link between javascript client and ID4 (as per tutorial and ID4 and Web API. We used the industry library for oidc-connect in angular to put in the settings for the ID4 server and Web API.

The beauty of this is once you do the basic setup on ID4 there is not much required to build on it for more advanced features.

Just keep in mind that these are separate components and treat them exactly as that. Helped me with the confusion and lack of knowledge.

Windows and AD login (future state):

Keeping these components separate, will enable you to integrate AD into the ID4 Server much easier and quicker without having to make modifications to API or Frontend app. Example leveraging Windows login here.

Comments

[Tsar Bomba]

Thanks, this was very helpful. I've got it up and running (minus AD) and it works great! Authenticating my React app was a snap.

[Englund0110]

Links are dead. :-(