SPA(Single Page Application)の場合はJWTなどのトークンを用いてのユーザー認証を行うことが多いですが、Next.jsなどのSSR(Server Side Rendering)の場合はセッションを使ってユーザー認証管理を行うことが一般的です。

shimakaze_soft

next-auth

NextAuthライブラリは、Node.jsで最も一般的に使用される認証ライブラリであるExpressとPassportを使用して、電子メールやFacebook、Google、Twitterなどのサービスでのサインインをサポートする。

NextAuthは、クロスサイトリクエストフォージェリ(CSRF)トークンとHTTP Only cookiesを追加し、ユニバーサルレンダリングをサポートし、クライアント側のJavaScriptを必要としません。

$ yarn add next-auth

NextAuth.jsのAPIルートを作成

以下のように/pages/api/auth/[...nextauth].tsのページを作成する

重要な3つの設定ファイル

next-auth.config.js : セッションの保存時間、DBなどの設定
next-auth.functions.js : ログインの処理、セッションに保存するデータなど
next-auth.providers.js : Facebook、Twitter、GoogleなどのproviderのクライアントID,シークレットなどの情報を設定。利用しない場合は設定なしでOK。

shimakaze_soft

nookies

Cookie を扱いやすくするためのライブラリとしてnookiesがある。

$ yarn add nookies

以下のようにauth.tsというファイルを作成して、.tsxから呼び出したりする。

auth.ts

import { setCookie, destroyCookie, parseCookies } from 'nookies'
import type { NextPage, NextPageContext } from 'next'

// cookieの削除
// ServerSide cookies
export const destroyCookieToken = (ctx: NextPageContext, token: string) => {
  // console.log("token", token)
  destroyCookie(ctx, 'accessToken')
}  

// cookieにtokenをsetする
// ServerSide cookies
export const setCookieToken = (ctx: NextPageContext, token: string) => {
  console.log("token", token)
  setCookie(ctx, 'accessToken', token, {
    maxAge: 30 * 24 * 60 * 60,
    // path: '/',
  })
}

// cookieを抽出する.
export const extractCookie = (ctx: NextPageContext) => {
  const cookie = parseCookies(ctx)
  return cookie
}

setCookieのOptions

setCookie(ctx, name, value, options)かnookies.set(ctx, name, value, options)を使用できる

setCookie(ctx, 'accessToken', token, {
  maxAge: 30 * 24 * 60 * 60
})

上記のコードではmaxAgeだけを使用している

domain
encode
expires
httpOnly
maxAge
path
sameSite
secure

https://www.npmjs.com/package/nookies