O-clock-Kimchi/O-Coloc-front

Cookie problem for auth logout

Opened this issue · 7 comments

florianrumigny commented

Hello there! I'm encountering a problem with our authentication system and handling cookies from the backend to the frontend.

The issue I'm facing is:

When a user logs in, the cookie is set on the client side, but when the cookie expires (we're using maxAge), the user session remains active. I'm unsure if the issue lies in my frontend logic or if it's a backend problem.
Here's what we have so far:

Backend: Cookie configuration. I'm uncertain if our implementation is correct.

`
app.use(
cors({
origin: function (origin, callback) {
if (!origin) return callback(null, true);
if (allowedOrigins.indexOf(origin) === -1) {
const msg = "L'origine de cette requête n'est pas autorisée.";
return callback(new Error(msg), false);
}
return callback(null, true);
},
methods: ["GET", "POST", "PUT", "DELETE", "PATCH"], // Méthodes HTTP autorisées
allowedHeaders: ["Content-Type", "Authorization"], // En-têtes autorisés
credentials: true, // Autorise l'envoi des cookies
})
);

app.use(
session({
secret: process.env.SESSION_SECRET,
resave: false,
saveUninitialized: false,
cookie: {
maxAge: 60000, // 1H
httpOnly: true,
secure: false,
},
})
);
`

We've also implemented a middleware for authentication:

`
function authenticate(req, res, next) {
if (req.session && req.session.userId) {
// L'utilisateur est authentifié
next();
} else {
// L'utilisateur n'est pas authentifié
res.status(401).json({ message: "Vous n'êtes pas authentifié" });
}
}

module.exports = authenticate;

`

  • Frontend: I'm trying to handle the response status to either redirect or log out the user. I'm attempting to use axiosInstance and interceptors to capture the response, but nothing seems to happen.

`import axios from 'axios';
import { useAppDispatch } from '../hooks/redux';
import { logout } from './action/actions';

const axiosInstance = axios.create({
baseURL: 'http://localhost:3000',
withCredentials: true,
});

axios.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if (error.response && error.response.status === 401) {
const dispatch = useAppDispatch();
dispatch(logout());
console.log('deco session cookie');
}

return Promise.reject(error);

}
);

export default axiosInstance;`

I've come across another solution involving a setTimeout, but I prefer to use the first version if possible."

Any help or ideas are welcome; I'm stuck on this cookie problem. Thanks :)

Discord channel : Lords of Avalon

florianrumigny commented

Update : ça fonctionne à moitié. J’arrive à récupérer un console.log et donc à récupérer la réponse par l’interceptor mais pas à utiliser mon action logout. Ça me cause un problème de “Dependency cycle”.

SoleneOclock commented

Hello ! le code coté front est dans quel fichier ? Sur quelle branche ?
C'est dans un middleware ? si c'est pas dans un composant tu peux pas utiliser useAppDispatch hein, faut importer le store pour utiliser store.dispatch !

SoleneOclock commented

elle est où votre erreur de dependency cycle ? sur quel import ?
L'action logout n'est pas dispatchée ? vous la voyez passer dans les redux-dev-tools ?

florianrumigny commented

Hello!

  • On travaille sur deux dossiers séparés entre le front et le back
  • Sur develop, je l'ai laissé dans l'état pour le moment puisque "ça fonctionne"
  • J'ai essayé avec ou sans middleware, même résultat
  • J'avais fait l'erreur de base (comme sur mon post), j'ai corrigé ensuite par le store.dispatch et j'ai la même erreur
  • L'erreur se trouve sur les imports reliés au dispatch donc du store et de l'action
  • Rien dans les devs tools et même plus que ça, le consolelog qui fonctionne si on tombe sur la bonne erreur n'apparaît plus quand j'utilise dispatch. J'ai bien une erreur côté back par contre.

J'ai pas voulu m'aventurer plus loin, peut-être que j'utilise pas la bonne méthode.

SoleneOclock commented

Ah ok ! Ouais du coup c'est normal votre dépendency cycle : dans le fichier de definition de l'instance axios t'importe le store qui importe un reducer qui importe des actions qui importe l'instance axios ...
A la place du axios.interceptors, je partirais plutot sur un customHook à executer à chaque requete et ce customHook ferait la vérif de l'erreur et pour dispatch logout il pourrait utiliser useDispatch au lieu d'importer le store et t'aurai pas le probleme de dependency cycle ! Mais je vais réflechir sinon comment faire ...

florianrumigny commented

Ok je vois, je vais essayer de me pencher sur ça. Merci à toi