Having trouble deleting cookies

Answered

North Pacific hake posted this in #help-forum

North Pacific hakeOP

2024-01-08T08:30:30.000Z

Hi there, I am having trouble removing cookies with a server action.

I am calling the server action like so:

import { logoutUser } from "@/app/actions/auth/logoutUser";
import { redirect } from "next/navigation";

const Logout = () => {
  logoutUser();
  redirect("/");
};

export default Logout;

and the action is so:

"use server";

import constants from "@/app/lib/constants";
import { getPocketBase } from "@/app/lib/pb";
import { cookies } from "next/headers";

export const logoutUser = async () => {
  const cookieStore = cookies();
  const cookie = cookieStore.get(constants.AUTH_COOKIE_NAME);
  const pb = getPocketBase(cookie?.value || "");
  pb.authStore.clear();
  cookieStore.delete(constants.AUTH_COOKIE_NAME);
};

The error is Cookies can only be modified in a Server Action or Route Handler. however, it is a server action or not?

Also seems like the cookies might be cached or something, even if I delete them they come back.

Answered by Ray

const middleware = async (req) => {
  const cookie = req.cookies.get(constants.AUTH_COOKIE_NAME)?.value;
  const pb = getPocketBase(
    req.cookies.get(constants.AUTH_COOKIE_NAME)?.value || ""
  );

  if (cookie) {
    const res = NextResponse.next();
    pb.authStore.onChange(() => {
      res.headers.append(
        "Set-Cookie",
        `${constants.AUTH_COOKIE_NAME}=${pb.authStore.exportToCookie()}`
      );
    });
    try {
      await pb.collection("users").authRefresh();
    } catch (e) {
      const res = NextResponse.redirect(new URL("/login", req.url));
      pb.authStore.clear();
      res.cookies.delete(constants.AUTH_COOKIE_NAME);
      return res;
    }
    return res;
  }
}

View full answer

57 Replies

@North Pacific hake Hi there, I am having trouble removing cookies with a server action. I am calling the server action like so: import { logoutUser } from "@/app/actions/auth/logoutUser"; import { redirect } from "next/navigation"; const Logout = () => { logoutUser(); redirect("/"); }; export default Logout; and the action is so: "use server"; import constants from "@/app/lib/constants"; import { getPocketBase } from "@/app/lib/pb"; import { cookies } from "next/headers"; export const logoutUser = async () => { const cookieStore = cookies(); const cookie = cookieStore.get(constants.AUTH_COOKIE_NAME); const pb = getPocketBase(cookie?.value || ""); pb.authStore.clear(); cookieStore.delete(constants.AUTH_COOKIE_NAME); }; The error is `Cookies can only be modified in a Server Action or Route Handler.` however, it is a server action or not? Also seems like the cookies might be cached or something, even if I delete them they come back.

Ray

2024-01-08T08:34:23.000Z

the server action should be execute with form, event handler or inside useEffect

you can't excute in the page directly

can you do this instead?

<button onClick={logoutUser}>logout</button>

or with form in server component

<form action={logoutUser}>
 <button>logout</button>
</form>

@Ray tsx <button onClick={logoutUser}>logout</button>

North Pacific hakeOP

2024-01-08T08:39:34.000Z

this one does not seem to work

leads to this:

@North Pacific hake this one does not seem to work

Ray

2024-01-08T08:39:51.000Z

need to be in client component

North Pacific hakeOP

2024-01-08T08:39:58.000Z

ah sec let me try

@North Pacific hake ah sec let me try

Ray

2024-01-08T08:40:40.000Z

<button onClick={() => logoutUser()}>logout</button>

sorry, should be this

@Ray or with form in server component ts <form action={logoutUser}> <button>logout</button> </form>

Ray

2024-01-08T08:41:03.000Z

use with form like this if you don't want to use client component

@Ray ts <button onClick={() => logoutUser()}>logout</button> sorry, should be this

North Pacific hakeOP

2024-01-08T08:42:58.000Z

didn't cause error however the cookie is still there

@North Pacific hake didn't cause error however the cookie is still there

Ray

2024-01-08T08:43:42.000Z

cookies().delete(constants.AUTH_COOKIE_NAME);

@Ray ts cookies().delete(constants.AUTH_COOKIE_NAME);

North Pacific hakeOP

2024-01-08T08:44:44.000Z

its already as part of the function

this is how i am verifying the cookie

and it passes to the protected route

import { cookies } from "next/headers";
import constants from "../lib/constants";
import { getPocketBase } from "../lib/pb";
import { redirect } from "next/navigation";

const UserRouteProtection = () => {
  const cookieStore = cookies();
  const cookie = cookieStore.get(constants.AUTH_COOKIE_NAME);
  const pb = getPocketBase(cookie?.value || "");
  const isAuthenticated = pb.authStore.isValid;
  if (!isAuthenticated) {
    redirect("/login");
  }
  return;
};

export default UserRouteProtection;

@North Pacific hake its already as part of the function

Ray

2024-01-08T08:45:55.000Z

call the function like this

cookies().delete(constants.AUTH_COOKIE_NAME);

North Pacific hakeOP

2024-01-08T08:46:14.000Z

when i exit the db and i go to the protected route it redirects to /login and then deletes the cookie correctly

and when i start the db and i refresh the cookie remains gone

i think its cached or something

@Ray call the function like this ts cookies().delete(constants.AUTH_COOKIE_NAME);

North Pacific hakeOP

2024-01-08T08:46:53.000Z

cookieStore.delete(constants.AUTH_COOKIE_NAME);
cookies().delete(constants.AUTH_COOKIE_NAME);
i have one right after the other still same thing sadly

@North Pacific hake and when i start the db and i refresh the cookie remains gone

Ray

2024-01-08T08:47:44.000Z

rename middleware.js to _middleware.js and try the whole process again

@Ray rename middleware.js to _middleware.js and try the whole process again

North Pacific hakeOP

2024-01-08T08:48:26.000Z

that worked, howcome?

Ray

2024-01-08T08:48:46.000Z

something wrong in your middleware

@Ray something wrong in your middleware

North Pacific hakeOP

2024-01-08T08:49:38.000Z

import { NextResponse } from "next/server";
import constants from "./app/lib/constants";
import { getPocketBase } from "./app/lib/pb";

const middleware = async (req) => {
  console.log(`[middleware] ${req.method} ${req.url}`);
  const pb = getPocketBase(
    req.cookies.get(constants.AUTH_COOKIE_NAME)?.value || ""
  );

  if (req.method === "GET" && pb.authStore.isValid) {
    const res = NextResponse.next();
    pb.authStore.onChange(() => {
      res.headers.append(
        "Set-Cookie",
        `${constants.AUTH_COOKIE_NAME}=${pb.authStore.exportToCookie()}`
      );
    });
    try {
      await pb.collection("users").authRefresh();
    } catch (e) {
      const res = NextResponse.redirect(new URL("/login", req.url));
      pb.authStore.clear();
      res.cookies.delete(constants.AUTH_COOKIE_NAME);
      return res;
    }
    return res;
  }
};

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

its based of what you helped me with the other day

i commented out

    pb.authStore.onChange(() => {
      res.headers.append(
        "Set-Cookie",
        `${constants.AUTH_COOKIE_NAME}=${pb.authStore.exportToCookie()}`
      );
    });

that fixed it

Ray

2024-01-08T08:52:12.000Z

pb.authStore.isValid && (await pb.collection("users").authRefresh());

@Ray pb.authStore.isValid && (await pb.collection("users").authRefresh());

North Pacific hakeOP

2024-01-08T08:54:29.000Z

no dice

Ray

2024-01-08T08:55:19.000Z

change to this

try {
  pb.authStore.isValid && (await pb.collection("users").authRefresh());
} catch (error) {
  pb.authStore.clear();
}

@Ray change to this ts try { pb.authStore.isValid && (await pb.collection("users").authRefresh()); } catch (error) { pb.authStore.clear(); }

North Pacific hakeOP

2024-01-08T08:56:34.000Z

still same thing

@North Pacific hake i commented out pb.authStore.onChange(() => { res.headers.append( "Set-Cookie", `${constants.AUTH_COOKIE_NAME}=${pb.authStore.exportToCookie()}` ); }); that fixed it

North Pacific hakeOP

2024-01-08T08:56:42.000Z

this is the culprit i believe

@North Pacific hake this is the culprit i believe

Ray

2024-01-08T09:01:17.000Z

const middleware = async (req) => {
  const cookie = req.cookies.get(constants.AUTH_COOKIE_NAME)?.value;
  const pb = getPocketBase(
    req.cookies.get(constants.AUTH_COOKIE_NAME)?.value || ""
  );

  if (cookie) {
    const res = NextResponse.next();
    pb.authStore.onChange(() => {
      res.headers.append(
        "Set-Cookie",
        `${constants.AUTH_COOKIE_NAME}=${pb.authStore.exportToCookie()}`
      );
    });
    try {
      await pb.collection("users").authRefresh();
    } catch (e) {
      const res = NextResponse.redirect(new URL("/login", req.url));
      pb.authStore.clear();
      res.cookies.delete(constants.AUTH_COOKIE_NAME);
      return res;
    }
    return res;
  }
}

Answer

@Ray ts const middleware = async (req) => { const cookie = req.cookies.get(constants.AUTH_COOKIE_NAME)?.value; const pb = getPocketBase( req.cookies.get(constants.AUTH_COOKIE_NAME)?.value || "" ); if (cookie) { const res = NextResponse.next(); pb.authStore.onChange(() => { res.headers.append( "Set-Cookie", `${constants.AUTH_COOKIE_NAME}=${pb.authStore.exportToCookie()}` ); }); try { await pb.collection("users").authRefresh(); } catch (e) { const res = NextResponse.redirect(new URL("/login", req.url)); pb.authStore.clear(); res.cookies.delete(constants.AUTH_COOKIE_NAME); return res; } return res; } }

North Pacific hakeOP

2024-01-08T09:03:21.000Z

i ended up rewriting the whole thing

  if (pb.authStore.isValid) {
    const res = NextResponse.next();
    try {
      await pb.collection("users").authRefresh();
      res.headers.append(
        "Set-Cookie",
        `${constants.AUTH_COOKIE_NAME}=${pb.authStore.exportToCookie()}`
      );
    } catch (e) {
      const res = NextResponse.redirect(new URL("/login", req.url));
      pb.authStore.clear();
      res.cookies.clear(constants.AUTH_COOKIE_NAME);
      return res;
    }
  } else {
    return NextResponse.next();
  }

how come yours has syntax highliting?

const middleware = async (req) => {
  console.log(`[middleware] ${req.method} ${req.url}`);
  const pb = getPocketBase(
    req.cookies.get(constants.AUTH_COOKIE_NAME)?.value || ""
  );

  if (pb.authStore.isValid) {
    const res = NextResponse.next();
    try {
      await pb.collection("users").authRefresh();
      res.headers.append(
        "Set-Cookie",
        `${constants.AUTH_COOKIE_NAME}=${pb.authStore.exportToCookie()}`
      );
    } catch (e) {
      const res = NextResponse.redirect(new URL("/login", req.url));
      pb.authStore.clear();
      res.cookies.clear(constants.AUTH_COOKIE_NAME);
      return res;
    }
  } else {
    return NextResponse.next();
  }
};