はじめに

SSR（Server Side Rendering）の場合はセッションを使ってユーザー認証管理は一般的です。
Next.jsもいくつかのセッション管理ツールがありますので、少しまとめてみます。

next-authとは

The NextAuth library uses Express and Passport, the most commonly used authentication library for Node.js, to provide support for signing in with email and with services like Facebook, Google and Twitter.
NextAuth adds Cross Site Request Forgery (CSRF) tokens and HTTP Only cookies, supports universal rendering and does not require client side JavaScript.

next-auth: https://github.com/iaincollins/next-auth

インストール

npm install next-auth

クライアント使うサンプル

import React from 'react'
import { NextAuth } from 'next-auth/client'

export default class extends React.Component {
  static async getInitialProps({req}) {
    return {
      session: await NextAuth.init({req})
    }
  }
  render() {
    if (this.props.session.user) {
      return(
        <div>
          <p>ログイン中です。</p>
        </div>
        )
    } else {
      return(
        <div>
          <p>未ログインです。</p>
        </div>
      )
    }
  }
}

サーバ側

./pages/authフォルダーにページ作成

index.js NextAuth.signinメソッドを実行し、ログイン成功、失敗を判断
error.js　認証失敗の処理

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

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

参考：https://github.com/iaincollins/next-auth
サンプル：https://github.com/iaincollins/next-auth/blob/master/example/pages/auth/index.js

passport

passport:http://www.passportjs.org/

cookie

サンプル：https://github.com/zeit/next.js/tree/canary/examples/with-cookie-auth

firebase

サンプル：https://github.com/zeit/next.js/tree/canary/examples/with-firebase-authentication

以上

Next.js SSRのセッション管理