we'll im not sure if im fully correct but if you are calling a server action from a server component the cookies wont exist, there is a possibility that this causes the error.

maybe make sure that logoutUser is called from the client. this could be done in multiple ways.

if (typeof window !== "undefined") {
    // Code to execute on the client side
}

useEffect(() => {
    // Code to execute on the client side
}, []);

NOTE: im not fully sure that this fixes your problem, but its worth a try.

Thought I could mutate cookies from server actions cause of this https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#cookies

errr, I'll try to switch it over to a client component then

Erm is there no other way to mutate the cookies inside server actions?

This throws a wrench in my current design

Im really not sure, but ill look into it.

how do you use the logoutUser function in the Home page ?

It's just being used like this inside a server component

export default async function Home() {
  const isLoggedOut = verifyJWTCookieAuth();

  if (!isLoggedOut) {
    await logoutUser();
    return <Login />;
  }

  redirect("/dashboard");
}

Well you can, but the server action has to be executed from the client for it to work (since when the client executes it the clients cookies basicly gets send to the server action as context)

But according to a github issue I skimmed through, apparently I can't mutate (.set()/.delete()) but only can .get() them on server actions which is really a bummer.

(https://github.com/vercel/next.js/issues/51875#issuecomment-1610196633)

server action can only be invoked in a form or event handler and useEffect

that doesnt make sense does it?

if i had a component like it would work? (it would prob create an infinite loop tho):

"use client"

export default function TestComponent() {
    logoutUser();

    return (<></>);
}

I guess something like this can be done:

'use client'
 
import { logoutUser } from './actions'
import { useEffect } from 'react'
 
export function Test() {
  useEffect(() => {
    updateViews();
  }, [])
 
  return null;
}

I would use it in the <Login /> component directly

or maybe the actual case can be resolved in the middleware

Yeah so basicly just this.

Oh lol

I see and understand the issue, the function I'm calling is being called as a server component instead of a server action which is causing the problems, useEffect does solve this issue.

Thanks y'all, I spent an hour on this mess lol.

Actually true, I'm just gonna put this in a middleware and not look back xd

Yes, its because useEffect waits for the client to have loaded javascript, only then it will execute all the code inside the useEffect (so basicly by using useEffect you are making sure that the code inside it will be executed by the client)

Theres a small problem there i think, ofcourse you can try but the middleware is not a part of the client, i think its ran on the server so useEffect will not be available there.

cookie can be deleted in the middleware

Yes that is true, but @du_cki wants to put the useEffect example inside of the middleware (which is not possible, it will cause an error)

Yeah makes a whole lot sense now, lol thanks for the help.

All good! Good luck, i hope everything works out.

Thank you.