Logout without a form

[caprica]

Is it possible to perform a logout without submitting a Form?

I have logout working in an action if I have a button that submits a form, this is fine.

But what's the right way to do a logout if I don't have a form or submit button? For example, I have a user menu with a logout option, that's just an li with an onClick handler, what do I do in this case?

[caprica]

This is what I ended up doing, is it OK or is there a better way?

export function UserMenu() {
  const submit = useSubmit()

  const handleLogout = (event: Event) => submit(null, { method: "post", action: "/logout" })

  return <Menu onClickLogout={handleLogout} />
}

And the action:

// app/routes/logout.tsx
export const action = async ({ request }: ActionArgs) => {
    await authenticator.logout(request, { redirectTo: '/sign-in' })
}

// a loader is needed, this simply redirects if the user navigates to this route directly
export const loader = () => redirect('/')

[sergiodxa]

This is the way, useSubmit is the same thing the Form component uses internally.