Authorization and authentication in web application with ASP.NET Core backend and React frontend?

Question

I have a web application, where the frontend is built with react.js and typescript and the backend is build with ASP.NET Core 3.1 and connected to a SQL Server. The SQL Server is used for saving data, which I can enter in the frontend.

Now I want to implement a custom authentication system, where I can protect different endpoints with an authorization. I know there are several ways to go for, but I don't want to use a service / library, where a user could login with his google account for example.

Jwt seems in my Opinion a good way to go here, but I really don't understand the whole system.

This article helped me already a lot: Implementing authentication and authorization with React hooks, .NET Core Web API, and SQL Server .After reading this, I don't understand the relationship between logging in and how my backend knows, that a user is logged in (for protecting my endpoints).

Of course I already read many articles about authentication and authorization for ASP.NET Core. I've read about different services like:

• Auth0 (seems not a good idea, because you can login with google etc.)
• IdentityUI (seems good, I've seen a few youtube tutorials but they are all using another project structure, where the frontend and backend isn't separated. So they are using the razor pages like Login.cshtml, but I don't want to render any pages in the backend, only in the frontend)

For authorization for my controller in the backend, I planned to use the following:

    [Authorize] // to protect endpoint
    [HttpGet]
    public async Task<IEnumerable<>> GetData()
    {
        // some code
    }

But as I already said: I don't know / understand how my backend knows if a user is logged in (and how to check it).

Could somebody provide me an appropriate tutorial or an article, where is explained, how to manage authorization and authentication for frontend and backend? Or maybe somebody knows, how to use the IdentityUI with a frontend build with react + typescript and a backend, which shouldn't render any pages.

Thanks for your attention :)

Answer 1

Well... for detailed flow how they work, here is RFC 6749, this is a pretty comprehensive collection of knowledge related to the topic and the easiest approach would be wiki page in general.

But to simplify the process, just get to know these things:

What is JWT

Jwt just a string that was generated by some algorithm from a public/private key pair(don't even care how it works, just give it a key pair, some lib on every language would do the rest). This JWT often contain all the information that needed to specify who the user is(big word right ? but actually, userId is enough for simple case).

It contain 3 different parts Header, Payload and Signature, and the string assured it cannot be interrupted(or just modify it as we wish, and the validation process would failed).

Further detail here.

What happen on server side?

The most basically flow was send user, password to server for validate who we are and our account exists. Then, server side would take some necessary info out of it to generate the JWT token. The server which generate JWT token was normally refer to Identity Provider.

Then that token was send back to client, and client save it somewhere for later use.

Client side use token to request other resource

Normally, Identity Provider would provide a .wellknow endpoint that contain all necessary info for other resources to gather for validation process.

Now, client side send a http request to these resources with the JWT token. They use info gathered from .wellknow endpoint to validate was the JWT valid. If it is, we are who we claim we are, authentication process success.

The end.

Over-simplyfied flow imagination in your specific case

React Client => Request login => Identity Provider => Jwt Token send back => React client save it somewhere.

React Client => Request some resource over http with the JWT token => Resource server validate it (through info from .wellknow endpoint) => Authentication success or fail => normal process => send response back to client.