Implementing SameSite Attribute for Passport.js Session Cookie

Currently, I am authenticating against an OIDC service using Passport.js with the OAuth2Strategy strategy. The issue arises when my application needs to make cross-domain requests to services that require the connect.sid cookie set by Passport. Chrome has announced plans to discontinue support for these requests unless the SameSite attribute of the cookie is set to "Lax".

I am unsure how to adjust this setting since the cookie management is handled internally by Passport. Are there any suggestions or workarounds for this situation? Below is the relevant function call located in the callback route provided to the OIDC service:

passport.authenticate("oauth2", function (err, user, info) {
    if (err) {
      req.flash('error', err);
      res.redirect('/login_error/');
    } else if (!user) {
      req.flash('error', 'Unable to locate user account.');
      res.redirect('/login_error/');
    } else {
      req.logIn(user, (err) => {
        if (err) { return next(err); }
        return res.redirect('/user_profile/');
      });
    }
  })(req, res, next);

Answer №1

Answer: Consider using href or setting up a proxy for client-server communication.

I encountered a similar issue and conducted extensive research. Here is a summary of my findings:

Use-case and tech-stack: I utilized Passport.js for implementing Google OAuth authentication in a React-Express setup with CORS enabled. Additionally, I configured a middleware in Express to handle response headers including Access-Control-Allow-Origin, Access-Control-Allow-Headers, and Access-Control-Allow-Credentials. However, the problem persisted.

Solution: The most effective workaround seems to be either initiating an href call from the front-end to the authentication URL (e.g. /auth/google) or establishing a proxy to redirect client requests to the server (though untested).

Long-term solution: It appears that adding same-site=none to the cookies sent by Passport.js to the client is necessary for Chrome to permit request redirection via fetch.

Core issues: Challenges include axios malfunctioning due to redirects, OAuth APIs requiring redirection post-authentication, fetch encountering troubles with Chrome's same-site=lax cookie policy, and XHR facing similar hurdles. These seem to stem from a combination of redirect, cookie, and CORS complications.

P.S. Note that employing

res.header('Access-Control-Allow-Origin', '*')
in Express may not suffice for axios, as it usually requires a specific domain.

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

Replicating the functionality of findWhere() in Python

There is a useful function in Underscore called findWhere() that allows you to search for specific structures in a list like the following example: myList = [ {'name': 'Thor'}, {'name': 'Odin'}, {'name&ap ...

Discover the power of React Meteor, where reactive props and inner state work together

I am working with a component that utilizes the draft-js library for text editing. import React, { Component } from 'react' import { EditorState, convertToRaw } from 'draft-js' import { Editor } from 'react-draft-wysiwyg' imp ...

Fetching user feeds from Facebook with AngularJS is easier than you think

I have searched through multiple articles but have yet to find a solution for this particular issue. My goal is to retrieve user feeds from Facebook. How can I achieve this? Below is my code: var newMod = angular.module('newapp', []); newMod.c ...

JavaScript: Replace image title on mouse over

I am having trouble adding '_hover.jpg' to my images on mouse over. Can anyone provide assistance with this issue? Thank you in advance. <script type="text/javascript> $(document).ready(function () { $(".img").mouseover(function (e) { ...

How can I recreate this image in 3D using three.js?

I have a tower image' - but i don't know how to replicate this for3dview using thethree.js` any assistance would be greatly appreciated! Here is the image : This is my attempt : $(function () { "use strict"; var container, scene, cam ...

Encountering a blank page issue with Vue3 and Vite build deployment

I am currently working on a Vue 3 project with Vite. While the project runs smoothly in my local development environment, I encountered a problem when trying to build it using the command npm run build. Here is the content of my vite.config.js file: impor ...

Storing a blob on the server?

I have a program that can extract metadata from sound files. If the sound file contains an album image, I am able to convert it into a blob object URL and use it locally. However, I am struggling with saving this blob image to the server. Currently, I ha ...

Connecting elements within an object using VueJs

Within my object "info_login," I gather account information: async created() { try { const res = await axios.get(inscriptionURL); this.comptes = res.data; this.comptes.forEach(element => { const data = {'pseudo': ...

What is the best way to set the length of an undefined item in an object to 0 in reactjs?

I am facing a challenge keeping track of scores within each article and displaying them accurately. The issue arises when there is a missing "up" or "down" item in the object. Below is the data containing all the votes: const votes = { "1": { "up": ...

Deactivate the linear x axis labels in jQChart

I have a jQchart Linear chart that is displaying correctly and functioning properly. I am looking to remove or disable the X axis labels from the chart. ...

Executing numerous xhttp.send requests within a single webpage

Hey there, I'm facing an issue with xhttp.send(); as it keeps giving me the error message net::ERR_EMPTY_RESPONSE Here is a snippet of my code. Whenever a user clicks too quickly, they get kicked off the page. Is there a way to prevent this? docum ...

Sorting by number or date in indexedDB may lead to unexpected results due to the

I have set up an index in my database called time on the created_at field: var os = thisDB.createObjectStore(name, { keyPath : "id" }); os.createIndex("time", "created_at", {unique: false }); Instead of storing the time as a standard date format, I conv ...

Jquery assigns the value of the last output to a variable

When it comes to sending comments to a database, I have encountered an issue with my code involving jQuery and AJAX. <script type="text/javascript"> $(document).ready(function() { $('#comm1').keypress(function(event) { ...

Evaluating node.js functionality using Jasmine testing suite

I am looking to test the server side of my website using Jasmine and Node.js it("Logs you out", function (done){ request("http://localhost:43030/logout", function(error, response, body){ expect(body).toBe("You have successfully logged out); ...

Verify if any column within a JSON object has a value of undefined, null, or is empty

Hey there, I'm a newcomer here and couldn't find any information on this topic after searching. Is there a method to scan a JSON object for empty values? For example, is there something like if(json[randomInt()].hasBlanks) that can be used? Or d ...

Leveraging the post method in Ajax along with a Perl script and passing parameters

I am struggling to utilize the POST method in XMLHTTPRequest by invoking a Perl script with parameters. Despite confirming the validity of these variables (uName, uProject, etc.), and verifying that write.pl functions properly when parameters are manuall ...

Encountering difficulties resolving the dependency tree while trying to install @react-navigation/[email protected]

After creating a new project called MyProject using react-native init MyProject, I opened it in VSCode and the first task was to install navigation. Initially, when running npm install @react-navigation/native @react-navigation/stack, it threw an error. S ...

How to modify the main directory of an ExpressJS application

Currently, I am in the process of setting up the Twilio client quickstart app using nodejs. My setup involves using nginx as a reverse proxy to redirect requests made to http://example.com/calls to localhost:3000 where the Twilio nodejs quickstart is runni ...

Does Highchart offer support for drilling down into sub-categories?

I want to implement a sub-sub drill down feature in my Chart using the following code snippet. // Create the chart Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Highcharts m ...

Prevent scale animation for a specific section of the icon using CSS

I need help in preventing the scale animation of the :before part of the icon class from occurring when the button is hovered. The current behavior is causing the arrow to look distorted on hover... Link to the code on Codepen HTML <div class="se ...