Search code examples
reactjsauthentication.net-corejwtasp.net-identity

Implementing authentication and authorization with React hooks, .NET Core Web API, and SQL Server

I have an application that I have built using React hooks, a SQL Server database, and a .NET Core 3.1 Web API. I'm really struggling to understand the relationships of the all the moving parts. I want to avoid reinventing the wheel and leverage existing libraries and frameworks. JWT seems like the way to go here from what I've learned and it just gets a bit confusing. Here are my requirements:

  1. Create account and log in/out with a custom site account OR use Google/Facebook/Microsoft/etc. (I can start with one or the other but don't want to box myself in and rewrite a ton of stuff to add the other)
  2. Leverage .NET Core Identity in the existing project to handle users, roles, etc. in the SQL Server database.
  3. Use React hooks pattern (I can limp my way through translating class components if I must)

I think I'm getting lost in all of the decoupling (which normally is a good thing!) I see articles about React with dummy back ends and I get lost. I see posts about .NET Core and can't figure out how to use it with React. Conceptually most of it makes sense, but I haven't found a place that helps me understand what the code should look like start to finish.

SO HERE ARE MY QUESTIONS!

  1. Are the React front end application and the React auth service the same thing? Can they be? Must they be?
  2. Is the JWT string generated on the React side or the .NET side? Best library for that?
  3. How (or does?) MS Identity Server fit into this equation?
  4. I don't full understand the concept of the refresh token despite looking at about 100 articles. Is a refresh token 100% necessary? Benefits/drawbacks to using/not using them?

It's a lot to sort through and I'm just hoping someone can help me simplify.

Solution

    1. The part in the React app that would handle the authentication should naturally be a component, which would then be imported by other parts of the app (e.g, by a login component). You can see an example tutorial here.

    2. The JWT is generated on the server side, which is .NET Core in your case. It must be created on the server side, because generating it on the client side implies having the secret in there, so that an attacker may steal it and create valid tokens. See also this answer.
      As for generating it: You can generate it by yourself, or just use an authentication framework (e.g., IdentityServer4) or a 3rd-party authentication (e.g., using Google login) so that it will be generated for you. If you do decide to generate it yourself, I don't think you need complicated things (and by that I mean, you don't even need libraries like JWT.NET). Just use a simple tutorial, like this one.

    3. IdentityServer4 is an authentication framework, which implements the OpenID Connect and OAuth 2.0 protocols, and uses JWT auth by default.
      Using it will get you the authentication behavior, including for example login and logout (it actually comes with its own login pages (Login.cshtml, Logout.cshtml)), but not registration.
      It is recommended to use it for that purpose alone, and you can advise the following two answers to understand better the separation of concerns when dealing with authentication (although the questions' titles refer to user creation, the answers specifically address authentication as well):

    4. If you want to add more security to your app, you will have an exp claim in your JWT. And if you have an exp claim and don't want legible users to have to re-login every time their JWT expired, you'll have refresh tokens. You use a refresh token to get a fresh new access token. If you'll use IdentityServer4, refresh tokens are already implemented for you, though you'll have to configure them explicitly. Advise the following sources:

      Also, I don't know what those 100 articles you read were :) but I think the following SO posts are great: