Utilizing HttpOnly Cookies in Nuxtjs for Enhanced Nuxt-Auth Strategy

Having previously worked with Vuejs, I decided to explore NuxtJs. In my past projects, my server would send a HttpOnly cookie that my client couldn't access. When trying out NuxtAuth for authentication strategies, I realized using a HttpOnly cookie was not possible due to the limitations of SSR. I found a workaround by only running API requests on the Client-Side where the cookie could be accessed. While this solution works, I believe there may be a better way to handle this.

Additionally, I am struggling with setting up axios for development and production environments in the nuxt.config file. When setting the baseURL attribute, I encountered CORS issues. Using a proxy resolved the issue, but cookies were rejected with an error message about invalid domain rights. I suspect this is because the proxy is localhost in the development environment. Is there a solution for this problem?

Does anyone have suggestions on how to implement HttpOnly authentication in Nuxt?

javascriptvue.jsnuxt.jsnuxt-auth

Answer №1


One way to easily set the httpOnly cookie options to true is by configuring it as follows:

auth: {
  cookie: {
    options: {
      httpOnly: true
    },
  },
}

I suggest verifying that the environment is only set to true in a production setting. When set to false on a development environment, it may lead to the token cookie being inaccessible! You can implement this check like so:

httpOnly: process.env.NODE_ENV === 'production'

The nuxt auth documentation does not include this option, but it has proven effective for me :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to executing a fetch request prior to another fetch in React Native

I am currently working on a project using React Native. One issue I have run into is that all fetch requests are being executed simultaneously. What I actually need is for one fetch to wait until the previous one has completed before using its data. Speci ...

javascriptreact-nativeasync-awaitpromise

Display/Conceal WP Submenu

Struggling to switch the behavior of my Wordpress menu. Want it to display when clicked, not when hovered: <nav> <ul> <li> <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ...

javascriptjquerywordpress

What causes the variance in behavior between the Angular-formly directive and type?

I am facing an issue with two input fields that are both generated using the same template. I have set the required attribute to true for both of them by using the following code snippet: ... templateOptions: { ... required: true } One input fiel ...

javascriptangularjsangular-formly

utilize regular JavaScript to manage Vue.js events beyond the component's scope

There is a VueJs component embedded in a regular web page. Whenever the component triggers an event, I need the regular web page to react accordingly. Is this achievable? The Sites.vue component is a single file element placed within the content of the re ...

javascriptvue.jsvuejs2

What is the proper way to input a Response object retrieved from a fetch request?

I am currently handling parallel requests for multiple fetches and I would like to define results as an array of response objects instead of just a general array of type any. However, I am uncertain about how to accomplish this. I attempted to research "ho ...

javascripttypescript

Switching classes based on the click of a link

I have a navbar that looks like this: https://i.sstatic.net/1jcRr.png Below is the relevant HTML code for the navbar: <div class = "navbar"> <a class = "active" href ="{% url 'keiji-home' %}& ...

javascripthtmlcss

Troubleshooting Angular 2 component routing issues with a malfunctioning this.router.navigate operation

Struggling with implementing routing in an Angular 2 app based on certain conditions. I am using this.router.navigate method but encountering the "Cannot read property 'navigate' of undefined" error consistently. Any assistance would be greatly a ...

javascriptangularrouter

What is the purpose of using an img tag to retrieve a URL that is not an image?

Upon investigating a slow page load, I came across something interesting in the HTML: <img src="/ajax?action=askedAboutCookies" style="display:none" width="0" height="0" alt="" /> When the page loads, it sends a request but never receives a respons ...

javascriptjqueryhtmljson

Solving the pyramid of doom with Node.js

I have been struggling to find a way to simplify my code structure. Here is what I have come up with so far: router.use('/create', function(res,req,next) { try { var data = { startDate: new Date(req.body. ...

javascriptnode.jsexpress

Issue regarding ports: deployment of a project using vue.js and node.js on Heroku encountered errors

Having issues deploying my fullstack project. It builds and runs smoothly locally, but on Heroku, I encounter a 503 Service Unavailable error after running the 'git push heroku master' command and the subsequent automatic build process. This coul ...

node.jsherokudeploymentvue.js

Pug: perform a task depending on the presence of an element within a variable

I'm currently working with Express js to create a web application. I make use of an API to fetch some data, which is then sent to a pug file in the following format. res.render('native.pug', {product_name: body.products, cart_items:body.car ...

javascriptjsonnode.jsexpresspug

angular 2 text box clearing functionality appears to be malfunctioning

I am currently working on implementing a reusable search box in Angular 2. Although the code is relatively basic, I am new to Angular 2 but have some experience with Angular 1. I am facing an issue where the value is not clearing when the text box is foc ...

javascriptangular

The UI encountered an error with updating job status in mediaconvert due to excessive requests using the javascript SDK

This platform utilizes React Js for the frontend and nodeJs for the backend. It is hosted on an AWS EKS cluster and functions as a video portal where users can upload videos. These videos are processed using AWS mediaconvert and stored in S3 once processin ...

javascriptnode.jsreactjsamazon-eksaws-media-convert

Transforming a text file into an array using fs in Node.js

My text file contains the following: {"date":"2013/06/26","statement":"insert","nombre":1} {"date":"2013/06/26","statement":"insert","nombre":1} {"date":"2013/06/26","statement":"select","nombre":4} Is there a way to convert the text file contents ...

javascriptnode.js

Creating an object based on its type in JavaScript is a simple task

In a recent project, I found myself using the following code: function foo(type, desc) { var p = new type(desc); } Although I am not a JavaScript expert, it seems to be functioning properly in Chrome. Can anyone confirm if this is valid JavaScript? Th ...

javascriptoop

Determine the total amount of pages generated from the Twitter search API

Can the Twitter search API provide a count of the pages returned? I'm curious if there is a method to determine how many pages are available for a particular query. ...

javascriptjqueryjsonapitwitter

What could be the source of the error message: "Error: .eslintrc.js: The environment key 'vue/setup-compiler-macros' is not recognized

I am currently working on a sample application using Vue 3 and Typescript. Specifically, I have opted for the new Vue v3.2 setup option within the section of the Vue SFC. Following the guidance from the Vue documentation, I included "vue/setup-compiler-ma ...

vue.jseslinteslintrc

What is the best method for integrating JavaScript into my Express.js application that is also utilizing Socket.IO?

In order to synchronize time for my countdown project, I am utilizing the timesync package. server.js const app = require('express')(); const http = require('http').Server(app); const io = require('socket.io')(http); const po ...

javascriptnode.jsexpresssocketssocket.io

The jQuery .load() method fails to retrieve a valid value from @Url.Action

Being new to MVC, I need a simple and specific explanation. I am trying to open a modal dialog using jQuery but @Url.Action is returning a null value. If I hardcode the path instead, it works fine. Here's the code snippet below. Script: <script t ...

javascriptjqueryasp.net-mvc

Problems with script-driven dynamic player loading

I am attempting to load a dynamic player based on the browser being used, such as an ActiveX plugin for Internet Explorer using the object tag and VLC plugin for Firefox and Google Chrome using the embed tag. In order to achieve this, I have included a scr ...

javascriptjqueryhtml