Why passport authentication seems to work only in local? - node.js

Question

I've a Node.js backend service and a React frontend. It was working till today when I had again an issue related to the CORS. It works fine in my local env but when I deploy this to App Engine the CORS issue is still there. What's is missing here?
Here my code:
Node.JS Backend Service:
const app = express();
/* MIDDLEWARE USER: set up cors to allow us to accept requests from our client */
app.use(
cors({
origin: process.env.CLIENT_URL || 'http://localhost:3001', // allow to server to accept request from different origin
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
credentials: true, // allow session cookie from browser to pass through
}),
);
I'm using passport to obtain credentials from Google and pass to the server
/* MIDDLEWARE USE: use Session Middleware */
const MAX_AGE = process.env.MAX_AGE || 60 * 60 * 1000;
const SECRET = process.env.SECRET || 'Our Secret';
const DEFAULT_ENV = process.env.NODE_ENV || 'development';
app.use(session({
cookie: {
maxAge: MAX_AGE,
secure: DEFAULT_ENV === 'production',
// secure: true,
httpOnly: true,
},
secret: SECRET,
resave: false,
saveUninitialized: false,
// store: new FileStore(fileStoreOptions),
store: new FirestoreStore({
dataset: new Firestore({
kind: 'express-sessions',
}),
}),
}));
/* MIDDLEWARE USE: use Passport Middleware */
app.use(passport.initialize());
app.use(passport.session());
Then I use react & redux in my frontend and here the code to obtain credentials from my endpoint.
/* RETRIEVE INFO FROM OAUTH AS SOON USER CLICK ON LOGIN WITH GOOGLE */
export const loginWithGoogle = () => {
return (dispatch) => {
dispatch({type: FETCH_START});
axios.post('/auth/login/oauth/success').then(({data}) => {
// console.log('userSignInFromGoogle: ', data);
if (data) {
const {originalMaxAge} = data.session.cookie;
const expireDate = (new Date()).getTime() + originalMaxAge;
localStorage.setItem('token', JSON.stringify(data.result.accessToken));
localStorage.setItem('token_expires_in', JSON.stringify(expireDate));
axios.defaults.headers.common['Authorization'] = 'Bearer ' +
data.result.accessToken;
dispatch({type: FETCH_SUCCESS});
// dispatch({type: USER_DATA, payload: data.result});
dispatch({type: USER_TOKEN_SET, payload: data.result.accessToken});
} else {
dispatch({type: FETCH_ERROR, payload: data.error});
}
}).catch(function(error) {
dispatch({type: FETCH_ERROR, payload: error.message});
// console.log('Error****:', error.message);
});
};
};
/* FUNCTION TO FETCH DATA FROM THE AUTHENTICATED USER */
export const getAuthenticatedUser = () => {
return (dispatch) => {
dispatch({type: FETCH_START});
isTokenExpired();
axios.post('auth/me',
).then(({data}) => {
// console.log('userSignIn: ', data);
if (data.result) {
dispatch({type: FETCH_SUCCESS});
dispatch({type: USER_DATA, payload: data.result});
} else {
dispatch({type: FETCH_ERROR, payload: data.error});
}
}).catch(function(error) {
dispatch({type: FETCH_ERROR, payload: error.message});
// console.log('Error****:', error.message);
if (error) {
dispatch({type: SIGNOUT_USER_SUCCESS});
localStorage.removeItem('token');
localStorage.removeItem('token_expires_in');
}
});
};
};
Here where I define the endpoint for axios:
import axios from 'axios';
/* TODO: Change In production with this */
export default axios.create({
withCredentials: true,
baseURL: `backend-url`,//YOUR_API_URL HERE
headers: {
'Content-Type': 'application/json',
},
});

Answer 1

After some test to figure out what the problem could be here, I finally tested this code on various browser and then only Chrome showed this issue not passing the token from the backend server to the other server. In the end I modified the code snippet related to the session store, adding the "sameSite" property to the cookie. Chrome, in the latest version, requires this property to be specified, otherwise it blocks cookies from server to server.
/* MIDDLEWARE USE: use Session Middleware */
const MAX_AGE = process.env.MAX_AGE || 60 * 60 * 1000;
const SECRET = process.env.SECRET || 'Our Secret';
const DEFAULT_ENV = process.env.NODE_ENV || 'development';
app.use(session({
cookie: {
maxAge: MAX_AGE,
secure: DEFAULT_ENV === 'production',
httpOnly: true,
/*TODO: Fix for chrome*/
sameSite: 'none',
},
secret: SECRET,
resave: false,
saveUninitialized: false,
// store: new FileStore(fileStoreOptions),
store: new FirestoreStore({
dataset: new Firestore({
kind: 'express-sessions',
}),
}),
}));