🐷

【Better Auth】NextJs & tRPC 【#12 Better Auth Sign Out】

2025/09/28に公開

【#12 Better Auth Sign Out】

YouTube: https://youtu.be/RzlyXeT3j5I
https://youtu.be/RzlyXeT3j5I

今回はサインアウトを実装します。

src/app/client-greeting.tsx

'use client'
import { useRouter } from 'next/navigation'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useTRPC } from '@/trpc/client'

import { authClient } from '@/lib/auth-client'

import { Button } from '@/components/ui/button'

export function ClientGreeting() {
  const router = useRouter()
  const trpc = useTRPC()
  const { data } = useSuspenseQuery(trpc.hello.queryOptions({ text: 'hello' }))

  const {
    data: session,
    isPending, //loading state
    error, //error object
    refetch, //refetch the session
  } = authClient.useSession()

  const onLogout = async () => {
    await authClient.signOut({
      fetchOptions: {
        onSuccess: () => {
          router.push('/sign-in') // redirect to login page
        },
      },
    })
  }

  return (
    <>
      <div>{data.greeting}</div>
      {isPending ? (
        <p>Loading...</p>
      ) : session ? (
        <p>Username: {JSON.stringify(session.user.name, null, 2)}</p>
      ) : (
        <p>null</p>
      )}
      <Button onClick={onLogout}>Logout</Button>
    </>
  )
}

【#12 Better Auth Sign Out】

Discussion