👋

【Next.js】基礎から始めるNext.js API Routes【２６UseSession】

2023/01/04に公開

Next.js

Prisma

tech

【２６UseSession】

YouTube: https://youtu.be/D8t26oV2qj8

https://youtu.be/D8t26oV2qj8

今回はログインしたユーザーのデータを
クライアントサイドで使用する方法について解説します。

使用する「NextAuth」のメソッドは
下記サイトの「useSession」を使用します。

pages/login.tsx

import Layout from '../components/Layout'
import LoginForm from '../components/LoginForm'
import { useSession } from 'next-auth/react'

export default function LoginPage() {
  const { data: session, status } = useSession()

  console.log(session)
  console.log(status)

  return (
    <Layout>
      <div className="flex flex-col justify-center items-center">
        <h2 className="text-4xl font-black font-sans p-4 mt-6">Login Form</h2>
        <LoginForm />
        <h2 className="text-4xl font-black font-sans p-4 mt-6">User</h2>
        {session && (
          <div>
            {session.user?.name}: {session.user?.email}
          </div>
        )}
      </div>
    </Layout>
  )
}

【２６UseSession】

Discussion