Working with Cookies in Vue and Laravel

For me personally they are a bit annoying and in 95% of the times I’m declining it(where possible) I got as far as using tools like: I don’t care about cookies YES ! this the actual name so cool, right, I admit it got me with the name.

It’s a great chrome extension to have, it basically blocks cookie requesting popups, modals, overlays and what ever they are using these days and for someone leaving in the EU like me, every website is required to show them and generally annoying. It’s not all bad sometime they can be useful.

The story is: I needed to implement functionality that creates a new cookie when a page is visited and the URL contains a particular variable when the route is accessed this value is used for some DB operations on the users table. Simple task, everything is laid out nothing to worry about.

And here I’am starting with it, the only thing that I’ve failed to mention is that it’s an SPA Vue 3 front-end and Laravel back-end, well I’ve started with the implementation and I was like: “I will set the cookie from the Vue and then in Laravel I will retrieve it and use it”.

And that I did, using very handy package vue-3-cookies which is very easy to use and it’s a breezy setting and retrieving cookies like so:

It can be installed using your favorite package manager:

npm install vue3-cookies --save

OR

yarn add vue3-cookies

// MyComponent.vue
<script>
import { useCookies } from "vue3-cookies";

export default defineComponent({
  setup() {
    const { cookies } = useCookies();
    return { cookies };
  },

  // <data, methods...>
  
  mounted() {
    let my_cookie_value = this.cookies.get("myCoookie");
    console.log(my_cookie_value);
    this.cookies.set("myCoookie", "abcdefg");
  }
}
</script>

the cookie is set I’ve checked in the browser all good, afterwards I’ve proceeded with the retrieving it from the Laravel back-end in order to use it and then I realized that I can’t…and there is a very good reason for that.

As stated in the documentation:

All cookies created by the Laravel framework are encrypted and signed with an authentication code, meaning they will be considered invalid if they have been changed by the client. To retrieve a cookie value from the request, use the cookie method on an Illuminate\Http\Request

in other words Laravel has it’s own way working with cookies and it doesn’t like someone to messing with it for security reasons of course, all the cookies used in Laravel are encrypted and signed so they can’t be changed by the client. I really like the framework keeps from shooting yourself in the leg with such things that are concerning security of your project(Thank you Taylor for looking after us ❤).

And so I wasn’t able to made the away I wanted but it’s for the best, I was able to do it with a simple axios request to the back-end which sets the cookie “The Laravel way” and then use for the functionality as intended in the beginning.

A side node: There are ways to “go over” the cookies problem, which is not recommended it maybe solves your problem for the time being but in future it can posses a thread to the project, so always be extremely cautions about: what and how you implement, always think in perspective not only for the current task and hand.

Conclusion

To be a developer means that you need to think outside of the box to solve problems, but it also means that you need to think a few steps ahead, considering what would be the best for the project in the long run.