How to create a secure user authentication flow for a webapp? (VueJS | NodeJS | ExpressJS)

Question

Problem:

I want to create a webapp with VueJS and a custom backend with NodeJS (ExperssJS and PostgreSQL). It should be possible to login with a username and password. After a successful login, the user can access secured endpoints of the ExpressJS server.

Now I am thinking how I can securely authenticate HTTP requests after a successful login.

What I consider doing:

Using a JWT and providing it in the authentication header of every request.
When the user provides correct login data, the server creates a JWT and sends it as response to the client. The client stores the token and adds it to every HTTP request as the authorization header. Because the transport is secured with TLS (HTTPS) the token should not be visible while transporting. To provide a seamless user experience the token has to be saved at the client side, so the user does not have to authenticate for each request.
So my question is: How can I securely save a JWT token for further HTTP request authentication?

Possible options:

• LocalSotrage - BAD IDEA! (not really secure)
• Cookie - more security (but also not perfect)

Last thoughts:

Isn't there an "absolute secure" or a "best practice" method to handle authentication for such a scenario?

P.S. I am pretty new to this field, so please forgive me if i wrote something stupid :D I am also aware that there are a lot of tutorials on how to setup something like this, but what i want to know is, which technique is the best and most secure one.

Thanks in advance!

Answer 1

PassportJS also support using local strategy. You might want to take a look about it. here

Answer 2

If you are new then it's better to use already build user authentication flow like Google login, Discord Login etc.

There is a well known library called Passport JS which makes third party login system integration a breeze.