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

Understanding Discriminated Unions in TypeScript

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

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

Understanding Discriminated Unions in TypeScript

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

More posts

Understanding Discriminated Unions in TypeScript

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

More posts

Understanding Discriminated Unions in TypeScript

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer