View on GitHub

セッションの取得

サーバサイド

frontend/src/app/myaccount/page.tsx

import React from 'react';
import { auth } from '@/auth';

const MyAccountPage = async () => {
  const session = await auth();

  return (
    <>
      <h1>Server Side</h1>
      <pre>{JSON.stringify(session, null, 2)}</pre>
    </>
  );
};

export default MyAccountPage;

frontend/src/app/components/ui/AccountMenu.tsx

...（略）...
import { ButtonSignOut } from '../auth/ButtonSignOut';
import Link from 'next/link'; // <- 追加

export default function AccountMenu() {
...（略）...
  return (
...（略）...
        <MenuItem onClick={handleClose}>
          <Avatar />
          <Link href="/myaccount/">My account</Link> {/* <- My accountを修正 */}
        </MenuItem>
...（略）...
  );
}

サインイン後、ブラウザで下記URLにアクセスするか、アカウントメニューからMy accountをクリックすると、下記のようにアカウント情報が表示されます。

http://localhost:3000/myaccount

Server Side
{
  "user": {
    "name": "【ユーザ名】",
    "email": "【メールアドレス】",
    "image": "【画像のURL】"
  },
  "expires": "【有効期限】"
}

サインアウトした後は、下記のように表示されます。

Server Side
null

クライアントサイド

frontend/src/app/components/HelloAccount.tsx

'use client';
import React from 'react';
import { useSession } from 'next-auth/react';

const HelloAccount = () => {
  const session = useSession();

  return (
    <>
      <h1>Client Side</h1>
      <pre>{JSON.stringify(session, null, 2)}</pre>
    </>
  );
};

export default HelloAccount;

frontend/src/app/page.tsx

import { SessionProvider } from 'next-auth/react'; // <- 追加
import React from 'react';
import HelloAccount from './components/HelloAccount'; // <- 追加

const Index = () => {
  return (
    <>
      {/* ↓修正 */}
      <section>
        <SessionProvider>
          <HelloAccount />
        </SessionProvider>
      </section>
      {/* ↑修正 */}
    </>
  );
};

export default Index;

サインインした状態で下記URLにアクセスすると、下記のようにアカウント情報が表示されます。

http://localhost:3000

Client Side
{
  "data": {
    "user": {
      "name": "【ユーザ名】",
      "email": "【メールアドレス】",
      "image": "【画像のURL】"
    },
    "expires": "【有効期限】"
  },
  "status": "authenticated"
}

サインアウトした後は、下記のように表示されます。

{
  "data": null,
  "status": "unauthenticated"
}

ローディングの追加

frontend/src/app/components/HelloAccount.tsx

...（略）...
const HelloAccount = () => {
  const { data: session, status } = useSession();  // <- 修正
  
  return (
    <>
      <h1>Client Side</h1>
      {status === 'loading' ? <div>Loading...</div> : <pre>{JSON.stringify(session, null, 2)}</pre>}  {/* <- 修正 */}
    </>
  );
};

export default HelloAccount;

アカウント情報を読み込むまでに「Loading…」と表示されるようになりました。

参考

Auth.js | Get Session