Best technique for authentication, login and register

I am learning reactjs, And I start to have a good understanding of how everythings works
Now I would like to progress into learning authentication (with a login and registrator)

I have seen a couple of old videos (from 2018) using the ‘react-router-dom’ and when i look up newer tutorial is see the use of ‘auth0’ (and some ‘OAuth2’) allot more wich seems to be the improved version if i am correct. wich also seems to be used on other front-end frameworks like angular.

before I dive to deep into learning and understanding how that works I would first like to know what the best most populair(what most companys now a days use) and what the most profesional way is too authenticate a website.

Thanks in advance

This is a good question for general knowledge. The answer isn’t specific to React. I’ll try an explain several methods.

Scenario:
Given I am a user and I want to view my profile page, I must first login before I can view my profile.

First a very basic summary of authentication:

  • Becoming Authenticated
    As a user I send the browser my login credentials, the server validates my credentials and sends back some type of proof of authentication. This proof of authentication is stored on the browser and sent to the server in subsequent requests as proof of being authenticated.
  • Validating Authentication
    There are two parts to validating authentication. The browser must send some proof of authentication to the server (typically in a cookie) and the server must validate this proof and not blindly accept it as true.

Authentication Strategies

  • Sever Side Sessions
    A simple login mechanism is server side sessions, with this method the server keeps a cache of users who have authenticated. Whenever a request comes in the server will check the cookie (which is automatically sent to the server by the browser and is typically where the proof of being authenticated is stored) and the servers cache (to validate the data from the cookie). If the user is authenticated the server will allow them to see content that would otherwise be hidden such as the users profile page.
    A limitation of this method is that the cache is stored on a single server. If there is a lot of traffic the server will struggle to handle all of the requests, slow down, and possibly crash. The only way to improve the servers performance is to upgrade physical components like RAM and CPU. This is called vertical scaling. This is in contrast to horizontal scaling which involves adding more servers to help share the load. If you tried to combine server side sessions with horizontal scaling a user may login on server #1, but the next request may be handled by server #2, that they haven’t logged into. When that happens server #2 would ask the user to login again. As you can see, that would be a very bad experience for users.

  • Database Authentication (I can’t remember if there is a better name for this method)
    Storing the users authentication data in a database is one way to overcome the limitations of server side sessions. In this scenario a user will login on server #1 and server #1 will store the authentication in the database. Now a subsequent request may be handled by server #2. Server #2 will check the database to see if the user is logged in and find the data that was stored by server #1. So now the application may be scaled horizontally as well as vertically. However, the bottleneck for scalability is now the authentication database since every server must query it for authentication.

  • JWT(Jason Web Tokens)
    A JWT is a string of characters like this eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c It contains all of the information that a server needs to authenticate a user. This makes a JWT stateless since the state of being logged in is stored in the token itself and not on the server or in a database. Whenever a user authenticates the server sends the browser the JWT, the browser will store this token and send it in all subsequent request to the server as proof of being authenticated (again, a cookie is commonly used for this purpose). Now whenever an application needs to scale horizontally it’s not dependent on looking up login information in a database it can simply validate the JWT and then allow the user to see his profile page.

  • OAuth/Auth0
    OAuth is an authentication protocol built around using JWT for authentication. Auth0 is a company/service that handles the implementation details of authentication for you. As you can see on the company website they offer Single Sign On, Multi-Factor Authentication and more.

I recommend that you spend some time learning more about JWT. However, in most scenarios you won’t be required to implement authentication yourself. You’ll just need a basic understand of how it works and the tradeoffs between various methods. You’ll also need to understand the security risks and how authentication can be compromised.

I’ve been meaning to blog about this topic. So thanks for getting me started :wink:

wow thank you so much sir.
I do have a good understanding of asp net core mvc and i have built a authentication system before with razor pages with a complete admin seeder created in the backend. but when using a front-end framework things are different thats why I asked about authO, so fo the record is authO a good thing to work with, if not the best? are there even any other options… im sorry that i dont get it completely I am trying to get started and learn about the best option for front-end frameworks for authentication but i dont want to waste time learning into a old sytem that wont be used commanly anymore

Oauth 2 and OpenID Connect are industry standard. Auth0 is for when you don’t want to be responsible for the authentication logic yourself, which is often the case. But if you are just authenticating users into your application you’ll be fine with JWT authentication. OAuth 2 and OpenID Connect have more to do with using the login info for one application as a means to login to anther application. For example, I sign into FreeCodeCamp using my GitHub account.

This is a pretty good video explanation OAuth 2.0 and OpenID Connect (in plain English) - YouTube

thank you very much sir can I know what the url to your blog is, you explained it very well

https://blockscope.dev/authentication/authentication-basics/