【Better Auth】NextJs & tRPC 【#13 Better Auth Protect Page】

【#13 Better Auth Protect Page】

YouTube: https://youtu.be/6n5jJYd6kKY
https://youtu.be/6n5jJYd6kKY

今回はBetter Authによるページのプロテクトを実装していきます。
※次回の動画でサインアウト後の挙動について補足を行います。

src/app/page.tsx

import { Suspense } from 'react'
import { headers } from 'next/headers'
import { redirect } from 'next/navigation'
import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
import { ErrorBoundary } from 'react-error-boundary'

import { getQueryClient, trpc } from '@/trpc/server'
import { auth } from '@/lib/auth'

import { ClientGreeting } from './client-greeting'

export default async function Home() {
  const session = await auth.api.getSession({
    headers: await headers(),
  })

  if (!session) {
    redirect('/sign-in')
  }

  const queryClient = getQueryClient()
  void queryClient.prefetchQuery(
    trpc.hello.queryOptions({
      text: 'hello',
    })
  )

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ErrorBoundary fallback={<div>Something went wrong</div>}>
        <Suspense fallback={<div>Loading...</div>}>
          <ClientGreeting />
        </Suspense>
      </ErrorBoundary>
    </HydrationBoundary>
  )
}

src/app/(auth)/sign-in/page.tsx

import { headers } from 'next/headers'
import { redirect } from 'next/navigation'
import { auth } from '@/lib/auth'

import { SignInView } from '@/components/auth/sign-in-view'

const Page = async () => {
  const session = await auth.api.getSession({
    headers: await headers(),
  })

  if (session) {
    redirect('/')
  }

  return <SignInView />
}

export default Page

src/app/(auth)/sign-up/page.tsx

import { headers } from 'next/headers'
import { redirect } from 'next/navigation'
import { auth } from '@/lib/auth'

import { SignUpView } from '@/components/auth/sign-up-view'

const Page = async () => {
  const session = await auth.api.getSession({
    headers: await headers(),
  })

  if (session) {
    redirect('/')
  }

  return <SignUpView />
}

export default Page