Zenn
🤒

Next.js NextAuth 覚書 ~入門編~

2022/06/01に公開
Next.js
tech

既存のプロジェクト

プロジェクト作成

npx create-next-app

API 設定

  • NextAuth パッケージをインストール
    npm install --save next-auth
  • ダイナミックルーティング設定
pages
  └ api
     └ [...nextauth].js

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"
export default NextAuth({
  // 1つまたは複数の認証プロバイダを設定する
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    // ...必要なら下記に記載
    // グーグルバージョン
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // twitter
    TwitterProvider({
      clientId: process.env.TWITTER_ID,
      clientSecret: process.env.TWITTER_SECRET
    })
  ],
})

process.env で env ファイルにアクセスできるらしい。

共有セッション

  • アプリケーションのトップレベルで useSession コンテキストである <SessionProvider />を公開する必要がある(直訳)。
  • つまり <SessionProvider />で全部を囲ってやったらいい。
pages
  └ _app.txs

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { SessionProvider } from "next-auth/react";

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

確認

http://localhost:3000/api/auth/providers
github の情報が表示される

.env.local 設定

github > settings > developer settings > github apps
http://localhost:3000 等で登録
クライアントIDと generate a new client sercret を記載

NEXTAUTH_URL=http://localhost:3000
GITHUB_ID=xxxx
GITHUB_SECRET=xxxx

http://localhost:3000/api/auth/signin/github
にアクセスし認証。
認証が終われば再度アクセスしてもセッションが継続するためフロントページにリダイレクトされる。

useSession の確認

useSessionを利用しセッション情報へアクセスができる。
index.tsx

import { useSession, signIn, signOut } from "next-auth/react";

const Home = () => {
  const { data: session } = useSession();
  // セッション情報が確認できる.
  console.log(session);

  // セッションによって表示切り替え.
  // ログインしていればここ.
  if (session) {
    return (
      <>
        Singed in as {session.user?.name} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }
  // ログインしてなかったらこれ.
  return (
    <>
      Noto signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  );
};

export default Home;

組み込みのコールバックで値追加できる

まだ使い方が想像できない

[...nextauth].js

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  // ここから.
  callbacks: {
    async jwt({ token, account }) {
      // Persist the OAuth access_token to the token right after signin
      if (account) {
        token.accessToken = account.access_token
      }
      return token
    },
    async session({ session, token, user }) {
      // Send properties to the client, like an access_token from a provider.
      session.accessToken = token.accessToken
      return session
    }
  }
});

Discussion