Things To Watch: Implementing Nuxt Auth Module + Cookie Universal

Get them both right from the start

0. Introduction

It’s very common in a web application where we want to “remember” user’s login state as well as his/her data. We usually achieve this by managing our cookies. In fact, it is unimaginable that we create a complex web app without using cookie implementation.

From remembering user’s login state to user’s preference, cookies play an important role.

However, many people think that cookie implementation is getting more complex. In user authentication, for example, it involves a whole of burdensome processes:
- Hit the /login API (or /signin , /signup or /register for that matter. You know what I mean)
- Get the returned JSON response and create a user profile out of it
- Create a login cookie, store it, create a getter and setter for this cookie
- Create a helper function to remember user’s login state (such as, isLoggedIn)
- Clean the login cookie upon log out

Btw, one library that’s awesome in Nuxt ecosystem is Cookie Universal. It provides you with the getter and setter, along with other awesome things.

But event then, how cookies are managed with regard to user authentication can be simplified. Nuxt Auth Module comes in handy to simplify these.

The thing is, the first time we integrated Nuxt Auth with our Cookie Universal, they didn’t play along nicely right away. We noticed three important things to watch out so you can get them right from the start.

Watchout #1: Avoid Cookie Overlap

Under the hood, both Nuxt Auth Module and Cookie Universal are using the same ‘cookie system’. Thus, we have to make sure not to have an overlap between one another because that will for sure consequently create further problems.

If we want to use Nuxt Auth, then we make sure that Cookie Universal has NOTHING to do with the authentication cookie and let the authenication be fully handled by Nuxt Auth Module.

For example, if you set your cookie specification in BOTH Cookie Universal and Nuxt Auth such as the following

this.$cookies.set(key, method(value), {
  maxAge, secure,
  path: ‘/’,
  domain: ‘.yourdomain.com’
})

And in your nuxt.config.js:

auth: 
...
  cookie: {
    options: {
      secure: true,
      domain: '.yourdomain.com'
    }
  }
...

Then Nuxt Auth won’t work properly. In our experience, Nuxt Auth will only be working for yourdomain.com but not on the subdomain blog.yourdomain.com.

Many people experienced Nuxt Auth not working on the subdomain right off the bat (you can search their GitHub issues such as this one). Even though we cannot say what exactly the problem is, but chances are that their Nuxt Auth implementation overlaps with other cookie library.

So, please watch out.

Watchout #2: Double Setting Your User Object

Without Nuxt Auth, you need to create your User object from the returned login API response. With Nuxt Auth Endpoint though, this by default is already handled. So watch out to doubly create your User object.

What we can do instead is to create our User object using Nuxt Auth Endpoint feature, which is a really cool one. You can state this in your auth within your nuxt.config.js.

endpoints: {
  ...
  user: { url: '/your/user/endpoint', method: 'get' }
}

From then, you can grab your User by this.$auth.user. Simple.

Watchout #3: Cookie Universal Still Tastes Good

I know this is a really straightforward one. But besides the authentication, Cookie Universal is still a good library for any other cookie standard purposes. So, please don’t delete them all.

That’s all folks. Hope it usefull for you all.

Keep changing the world, one line at a time!

PS:
Checkout SekolahMu tech job openings at https://jobs.talentics.id/sekolahmu?tab=jobs&page=1&function=Web%20Development