🔥

Next.js NextAuth.js クライアントAPI 覚書

2022/06/03に公開

随時更新
セッションを簡単に操作できるらしい。

{
  user: {
    name: string
    email: string
    image: string
  },
  expires: Date // これはセッションの有効期限であり、セッション内のトークンの有効期限ではありません。
}

useSession

index.tsx
import { useSession, signIn, signOut } from "next-auth/react";
const Home = () => {
  // statu で loading authenticated unauthenticated を判別できる.
  const { data: session, status } = useSession();

  if (status === "authenticated") {
    console.log("authenticated");
  }
}
export default Home;

サーバー側でセッションが有効かどうか確認してから、SSRを生成するように要求する必要がある

サーバーの負荷増加

クライアントでセッションの有無を判断しておく
その方法が useSssion なんです。

デフォルトではユーザーをサインページにリダイレクトさせるが、他にも細かな設定ができる。

index.tsx
  const { data: session, status } = useSession({
    // 何個かプロパティがあるらしい.
    required: true,
    // ここではセッションがなかったら、a と表示させている.
    onUnauthenticated() {
      console.log("a");
    },
  });

多いから必要になったらまた調べよう

getSession

getCsrfToken

getProviders

signIn

signOut

Discussion