Semantics of GET v DELETE for Logging Out

[manavm1990]

I have a client component ('use client'). Actually, the code and the accompanying comment say it all:

{/**
             * Although it would be more semantically correct to use `POsT` or `DELETE` to affect the log out,
             * NextJS docs 📝 say,
             * "Use the `<Link>` component for navigation unless you have a specific requirement for using `useRouter.`"
             * @see https://nextjs.org/docs/app/api-reference/functions/use-router
             *
             * So, semantics be darned, this is more idiomatic NextJS and less code.
             */}
            <NavLink href="/api/logout">
              <ExitIcon />
              &nbsp;Logout
            </NavLink>

That works. ☝️ I'm just a little bothered by violating REST conventions/semantics!

Alternatively, to be semantically correct, I would use an onClick and trigger a fetch from the client to the DELETE route handler. Then, I would also need a useRouter in the client to refresh once the server has done its thing in the route handler. The redirect in the handler would not trigger a refresh on the client b/c all of this stays on the 'home page' (/).

In other words, to be semantically correct adds a lot more code.

[icyJoseph]

Or...

<form method="post" action="/api/logout">
  <button type="submit">
     <ExitIcon /> 
  </button>
</form>

[manavm1990]

Ah. And wire it up to a server action. It also feels weird to me to have a form that's not a form - no UI or inputs, but I suppose that's closer to being semantically correct. I can just do method="delete" as nothing is actually being sent... 💭

[icyJoseph]

Well, I did assume you had an API handler at /api/logout ~

Then you wouldn't need much more than the form UI. You can also add hidden fields for return url I guess, pre-fill some info, etc, and then validate server side of course.

[manavm1990]

🆗 @icyJoseph I did like this 1️⃣ :

 <form action={formAction} method="DELETE">
              <SubmitButton
                isValid={true}
                addlClassName="border-none normal-case text-sm text-left py-3 w-full"
              >
                <ExitIcon />
                <span className="w-60">Log Out</span>
              </SubmitButton>
            </form>{' '}

And this is the in actions.ts:

export async function logout(): Promise<void> {
  cookies().delete('token');
  cookies().delete('user');
}

I was thrown off and still having issues b/c calling: cookies().delete('user'); appears to make user an empty string - not null or undefined. I did some logging with typeof to discover this! So, that was weird, and other from the 'fake form,' this solution works.

Also, the code I did earlier with: return redirect('/'); was not working. I still had to refresh. So, your suggestion was best.

Any further feedback is welcome.