面倒なログインはNextAuthにやらせよう

前書き

いつからでしょうか、何か新しいサービスを試す際に、GoogleアカウントやGitHubアカウントを利用してログインするしかやらなくなった。

ユーザーネームとパスワードを設定し、メール認証を済ませて初めて利用可能になるようなサービスは自分でも嫌なので、多くの人にとっても面倒でしょう、これからサービス作る際に、いっそう認証周り全部OAuthに任せようと思いました。

いろいろ調べた結果、最終的にNextAuthに辿り着きました。

NextAuthとは

公式ドキュメント

NextAuthとは何か？とChatGPTに尋ねたら、以下のような回答が返ってきました。

大まか合ってますが、現時点ではSvelteKit, SolidStartでも利用することができるらしいです。

NextAuthの使い方

NextAuthの使い方は非常にシンプルです、Next.js制のプロジェクトでは三つのステップで基本形ができます。

• NextAuthインストール

npm install next-auth or yarn add next-auth

• 認証プロバイダーを設定する

認証プロバイダーを設定することによって、ユーザーがログインする方法を決められます。
たとえば、GitHub、Google、Facebook、TwitterなどのOAuthプロバイダーを使用できます。
次のように、pages/api/auth/[...nextauth].jsというファイルを作成して、認証プロバイダーとsecretを設定します。
secretの値は下記のコマンドで生成できます、セキュリティに関連する目的に使用されるため、設定しないとエラーになる可能性があります。

openssl rand -base64 32

pages/api/auth/[...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,
    }),
  ],
 secret: process.env.SECRET,
})

Githubのプロバイダを設定した場合、下記のURlにアクセスして、新規OAuth Appを作る必要がある、New OAuth Appから作れる。
https://github.com/settings/developers

Application name、Homepage URL とcallback URL 指定すればClient IDとClient secretsを取得できる。

Homepage URL指定したURLは.envに追加する、定義しなければhttp://localhost:3000/になる。

.env

NEXTAUTH_URL=http://localhost:3002/

他のプロバイダ使用する場合も手順が大体同じ。

• 認証機能をアプリケーションに実装する

最後に、認証機能をアプリケーションに実装する必要があります。たとえば、ユーザーがログインしているかどうかを確認するために、useSessionというNext.jsのフックを使用できます。次のように、pages/index.jsというファイルにuseSessionをインポートして使用します。

/pages/_app.jsx

import { SessionProvider } from "next-auth/react"

export default function App({
  Component, pageProps: { session, ...pageProps }
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps}/>
    </SessionProvider>
  )
}

ログインするためにsignInメソッドも用意されてます、プロバイダ指定してログインする場合、プロバイダー名をパラメーターとして渡すことができます、signIn('github')。

/pages/index.tsx

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

export default function Home() {
  const { data: session } = useSession()
  if(session) {
    return <>
      Signed in as {session.user.email} <br/>
      <button onClick={() => signOut()}>Sign out</button>
    </>
  }
  return <>
    Not signed in <br/>
    <button onClick={() => signIn()}>Sign in</button>
  </>
}

この状態でサーバーを立ち上げると、下記の画面が表示されます。

Sign inボタンをクリックすればgithub用のOAuthログイン画面が表示されます。

クリックすれば、githubのOAuthログイン画面にリダイレクトされて、許可すれば、ホームページにまたリダイレクトされます。

githubに登録されてメールアドレスが表示されることが確認できたら、実装完了です。

データベース使用する場合

先ほどのログインはセッションにユーザー情報を保存してましたが、データベースに保存することもできます。
その場合、NextAuthが期待するテーブル構造を用意してあげる必要があります。
詳細は公式ドキュメントを参照してください。

prisma使用する場合、モデルの定義は下記の記述になります。

model Account {
  id                 String  @id @default(cuid())
  userId             String
  type               String
  provider           String
  providerAccountId  String
  refresh_token      String?  @db.Text
  access_token       String?  @db.Text
  expires_at         Int?
  token_type         String?
  scope              String?
  id_token           String?  @db.Text
  session_state      String?
  oauth_token_secret String?
  oauth_token        String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}