Vue.js and Symfony — User Authentication
Authenticating users in Symfony — with Vue.js as frontend framework.
Join the DZone community and get the full member experience.Join For Free
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 the form of 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 be implemented/solved in different ways.
Personally, I didn’t even intend to test both solutions, 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 works the way it should? Is it always like this in modern JS?”
A long story short — it doesn’t need to be this way, there is actually no magical, special token required in the authentication process — although the full SPA does require special logic, it’s still 'almost' standard Symfony logic.
The Easiest Solution — Hybrid Authentication
In this case, the login form works is the only one page that is fully rendered by Twig — no JS logic is used here, thus a normal authentication process is being used.
1. Authentication Page — simple Twig based template with a login route.
2. Authentication Route — route to return the login page.
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):
1. Handler in backend.
2. Twig with mounting #id
With this — if we open the SPA page new tab it will still work as it’s just a template, which later in the process gets 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').
1. 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 the frontend for each call.
2. Handling call in Vue.js (frontend)
3. The response
4. Logout user
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 the front, so it’s a good idea to use some BaseResponse which will always consist of user authentication status.
Published at DZone with permission of Dariusz Włodarczyk. See the original article here.
Opinions expressed by DZone contributors are their own.