Vue.js and Symfony — User Authentication
Authenticating users in Symfony — with Vue.js as frontend framework
In this article I will skip the Symfony authentication process as this can be found in the official documentation (it’s more about presenting the solutions in case of using Vue.js):
JWT Token based authentication — does it have to be this way?
Vue.js allows us to either create a SPA (Single-Page Application) or to be used in form o hybrid where we can inject the components into already existing code or use Vue.js as an extension of current frontend code (In which case I learned the hard way that it can become very messy — You can find more here) — as for both cases the authentication can implemented / solved in different ways.
Personally I didn’t even intended to test both solution, as the hybrid one works very well — but — I’ve already had a chance to see some interesting / confusing authentication in Symfony by using JWT to validate user on Angular based frontend (in this case the solution / end goal was different than simple login form).
In general the JWT solution does work, makes everything it should, there is no problem — so what’s the point? Since Vue.js is the first modern JS framework used on my own alongside with backend framework I wondered:
“Do I really need to use some tokens, as the Symfony auth no longer work the way it should? Is it always like this in modern JS?”
The long story short — it doesn’t need to be this way, there is actually no magical, special token required in the authentication process — though the full SPA does requires special logic but it’s still “almost” standard Symfony logic.
The easiest solution — Hybrid authentication
In this case the login from works is the only one page which is fully rendered by Twig — no js logic is used here, thus normal authentication process is being used.
- Authentication Page — simple Twig based template with a login route
2. Authentication Route — route to return the login page
And that’s it ( naturally assuming that project is already configured to use Symfony Authentication presented in links above ), authentication works already on this step — simply add some rules to security.yaml and everything will work as intended.
Be aware that each route added with Vue-Router must be also present in Symfony, otherwise how does the backend know what page was accessed? After all Vue.js only pushes new state in browser history, unless simple location.pathname = url is used.
Adding Vue.js routes to Symfony
Personally I’ve got a very simple solution for this, which is defining one method (with base twig template for it — it contains the mounting #id for Vue-App):
- Handler in backend
2. Twig with mountig #id
With this — if we open the SPA page new tab it will still work as it’s just template, which later in process get’s rebuilt/controlled by Vue.js.
3. Mounting Vue.js
The tricky solution — API call Authentication
In this solution everything is handled in Vue.js besides the usage of base Twig template (just scroll up to “Adding Vue.js routes to symfony”).
- Login Authenticator (backend)
So what’s so special in this authenticator?
The response — that’s the important thing, it’s a JsonResponse (BaseApiDTO) consumed in frontend for each call.
2. Handling call in Vue.js (frontend)
3. The response
4. Logout user
Summarizing
Both solutions work like a charm, but if I was to choose the faster one — then it’s definitely the Hybrid-one.
Do keep in mind — that for both solutions, it’s required to send the JsonResponse to front, so it’s a good idea to use some BaseResponse which will always consist of user authentication status.
