How to sign out from a client side component

[mr-toast]

I'm a new to this repo and am stuck on how to create a sign out button from the client side.

Everything works fine using the server side signIn and signOut functions from auth() but when I create a button like this...

"use client";

import { api } from "~/trpc/react";

export function SignOutButton() {
const signOut = api.auth.signOut.useMutation();

return <button onClick={() => signOut.mutate()}>signout;
}

I can see it does the trpc post

POST /api/trpc/auth.signOut?batch=1

I get a 'success' status BUT unlike the fully server side signOut function it never clears the session from the db.

Nothing else in the repo has changed from the default install.

Now I can create a server action and call the server side signOut function just fine but my understanding is I should be going via trpc for this. Any advice would be greatly appreciated.

[dBianchii]

I would recommend just a server action exactly like the example is doing. You can export a server action like this:

"use server"

import { signOut as auth_signOut } from "@acme/auth";

export const signOut = async () => await auth_signOut();

Although, it is very strange that signOut trpc mutation is not correctly deleting your session...

[juliusmarminge]

signOut trpc mutation is for deleting the session from db and called from Expo. For web, just use signOut from next-auth which will clear out the cookie as well.