Cookies auto clearing after browser refresh issue , CORS related express cookies issue

This error is a combination of CORS issues and incorrect cookie settings. To resolve you need to set your server to allow cookies and set the same origin policy to allow the frontend to make requests to your backend server.

cors

typescript

1// cors-utils.ts
2import type { Request, Response, NextFunction } from "express";
3
4export function corsHeaders(req: Request, res: Response, next: NextFunction) {
5  if (!req.headers.origin) return next();
6  if (allowedOrigins.includes(req.headers.origin)) {
7    res.setHeader("Access-Control-Allow-Credentials", "true");
8    res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
9    next();
10  }
11}
12export const allowedOrigins = [
13  "http://localhost:3000",
14  process.env.FRONTEND_URL ?? "",
15];

tsx

1//  app.ts
2app.use(corsHeaders);
3app.use(
4  cors({
5    origin: (origin, callback) => {
6      if ((origin && allowedOrigins.indexOf(origin) !== -1) || !origin) {
7        callback(null, true);
8      } else {
9        callback(new Error("Not allowed by CORS"));
10      }
11    },
12    optionsSuccessStatus: 200,
13  }),
14);

and create the cookies using the options

tsx

1import jwt from "jsonwebtoken";
2const { sign, verify } = jwt;
3
4const accessTokencookieOptions = {
5      httpOnly: true,
6      secure:true,
7      sameSite: "none",
8      path: "/",
9      maxAge: 12 * 60 * 1000, // expires in 12 minutes
10}
11
12const accessTokebCookieKey = "rfsh-token";
13  const fiftenMinutesInSeconds = Math.floor(Date.now() / 1000) + 60 * 15; // 15 minutes
14  const accessToken = await sign(
15    { ...sanitizedPayload, exp:  : fiftenMinutesInSeconds },
16    ACCESS_TOKEN_SECRET,
17  );
18  res.clearCookie(accessTokebCookieKey, accessTokencookieOptions);
19  res.cookie(accessTokebCookieKey, accessToken, accessTokencookieOptions);

Cookies auto clearing after browser refresh issue , CORS related express cookies issue

Live activity bus (Elysia SSE + pub/sub powered by nodejs event emitter)

Queues and workflows with conveyor

Understanding Discriminated Unions in TypeScript

Cookies auto clearing after browser refresh issue , CORS related express cookies issue

Live activity bus (Elysia SSE + pub/sub powered by nodejs event emitter)

Queues and workflows with conveyor

Understanding Discriminated Unions in TypeScript

More posts

Live activity bus (Elysia SSE + pub/sub powered by nodejs event emitter)

Queues and workflows with conveyor

Understanding Discriminated Unions in TypeScript

More posts

Live activity bus (Elysia SSE + pub/sub powered by nodejs event emitter)

Queues and workflows with conveyor

Understanding Discriminated Unions in TypeScript