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.

Why don't you use .Net Web api and react. Authenticate your Web api with json Web token jwt — NetEmmanuel
@NetEmmanuel - That's not the expertise or preference of the team/division. The Identity Server requirement was handed down to us from high-up, since the rest of the company is using it. — Tsar Bomba
Have you checked this repository : github.com/IdentityServer/IdentityServer4.Samples/tree/release/… — NetEmmanuel
@NetEmmanuel Yes. I don't feel it's self-explanatory for what I'm trying to do...specifically; using a separate MVC app w/ Identity Core (Framework) as the authentication front-end to Identity Server. — Tsar Bomba
You don't need to separate IdentityServer 4 and ASP.NET Core Identity, they can be put together into a single application. IdSrv4 can be setup to use ASP.NET Core Identity as storage and for authentication, everything else (generating tokens, user and token endpoints, OAuth/openID) will be handled by IdSrv4 — Tseng

Aeseir Aeseir · Accepted Answer · 2018-01-19T03:16:15

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:

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.

Identity Server 4 + Identity Framework + React front-end

1 Answers