Identity Server 4 + Identity Framework + React Front-end

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 fe

Solution 1:

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.