1

I am building a Vue app that uses pure PHP (no PHP framework) for its back-end. For my authentication system, I thought that using jwt(JSON Web Tokens) could help me. So I searched the web and found this article and also this one to help me build a login-register system with the help of jwt. I have no problem in implementing these articles in my front-part (Vue) and back-part (PHP) of my app. Currently I can send a request when the user register to the site and send back a jwt to the front-part with the help of firebase php-jwt library.

But the main question comes here. As I know from Vue ecosystem one of the reasons that we use Vuex is to store some data (state) globally in our apps and without calling a server we could use them anywhere (or in any route) in our Vue apps.

By reading one of that two articles, I noticed that finally the jwt is stored in Vuex and when the user wants to see an authorized page (a page that needs Authorization) the Vue app checks the Vuex to see if the token exists or not and if it exists, the app allows the user to see that page.

By reading the second one I noticed that jwt is useful when the user sends request to the back-part of site. In that case jwt is decoded and if it is valid (for example the expiration date is OK or ...), the user can access to an authorized page.

With the description above what is the benefit of using jwt in my Vue app? If I store just the id and user-name of user, it could do the same task for me. In other words, If I want to ask my question clearly, the problem is when I want to use Vuex and not send request every time to the server, I don't need and can't benefit from jwt (am I right?). Similarly when I want to use jwt, I could not benefit from Vuex. Because I must send request each time to find that the jwt is valid or not and after that decide about the user.

If I understood correctly and there is a contradiction for using both jwt and Vuex, why there are so many tutorials that speak about authentication a Vue app with jwt? Also if my understanding about jwt is correct, does that mean that when the jwt is expired I must ask the user to login again and again (regardless of using or not using Vuex)?

Could anyone please help me to have a better understanding about this problem to have better decision about my authentication system?

hamid-davodi
  • 1,602
  • 2
  • 12
  • 26

1 Answers1

1

With the description above what is the benefit of using jwt in my Vue app?

JWT is used in authentication. You could use cookie sessions if you want.

I don't think it has an impact on your app. Probably save you some few round trips if your JWT happens to contain some data you need like user id.

the problem is when I want to use Vuex and not send request every time to the server.

I am not sure how these two are related.

If you need to make a request, then why would you use Vuex?

Vuex is a state management library.

If you need to do a request, then do a request.

Vuex does not relate to JWT in any way.

If you decided to put your JWT token in Vuex then that's your decision. Some put it in browser's localStorage or cookies.

Similarly when I want to use jwt, I could not benefit from Vuex. Because I must send request each time to find that the jwt is valid or not and after that decide about the user.

There's a lot of things you can store in Vuex that you don't need to do a request first:

  • Global component states e.g Login/Signup modals, NavMenu, Audio/Video player
  • Category filters like you see in Amazon or any shop-related apps

I am not sure what you are doing that you need to send request each time to find out if jwt is valid or not.

If something needs to be done on server-side then it has to be done on server-side whether you use jwt or cookies.

Also if my understanding about jwt is correct, does that mean that when the jwt is expired I must ask the user to login again and again (regardless of using or not using Vuex)?

JWT is a format. If you use OAuth2 for example, there's "access token" and "refresh token". You can get another "access token" automatically with "refresh token" and so that might mean you don't need to show login form again.

You could also just refresh your JWT token each time if you want. I'm not sure about the implications of that but there's a lot you can do.

These links might help you:

My question for you is:

If you were not to use JWT and instead just use cookies, how would things differ? (Aside from the technical aspects like needing to refresh tokens)

You are probably approaching/thinking/using JWT the wrong way.

captainskippah
  • 1,350
  • 8
  • 16
  • I know that Vuex and jwt are two different and separate tools. But I could not understand your meaning. do you say that there is no difference between using ```localStorage``` or ```cookies``` or ```jwt``` ? Also as an additional question is there anyway to decode the returned jwt in my vue **front-part** to see the information of user? because all the tutorials decode that in the back part of site. – hamid-davodi Feb 02 '22 at 16:48
  • You can store jwt wherever you want, cookies, localStorage, or your Vuex. If you put it in Vuex then that's your decision to put it there. You can also decode jwt in frontend. – captainskippah Feb 03 '22 at 05:18
  • thanks for your help and information you gave me. Although I need to learn more about jwt and combining it in my app, but if you know any tutorials that speaks about **"access token"** and specially **"refresh token"** in pure php and **not** with the help of OAuth 2.0, please put the link for me. Also if you have some links about decoding jwt in **vue front-part**, I am so glad to learn about that. – hamid-davodi Feb 03 '22 at 10:41
  • I dont recommend reinventing the wheel when it comes to security especially if you don't know what you are doing and because it takes time. `access_token` and `refresh_token` is _kinda_ specific to OAuth2. – captainskippah Feb 03 '22 at 10:58
  • Just look for a jwt decoder to decode a jwt. If you don't have any specific reason for choosing jwt, I'll most likely recommend you sticking with session cookies until you know what you are doing. It's well-supported, documented, proven and tested. – captainskippah Feb 03 '22 at 10:59