Next.jsでAuth0を使ったログイン機能実装

旧サイトより転記しました。

参考 Next.jsでAuth0のログイン、ログアウト機能を使うasa-prog.com

実際にWebアプリを作る際にログイン機能を実装しなければいけません。

Auth0を使えば簡単にSNSログイン機能を実装できます。

これを使えばSNSのアカウントのみで

認証することが可能でとても便利です。

今回はAuth0について勉強し

ログインページとログアウトページを実装しました。

手順について説明していきます。

Auth0のインストール

npmもしくはyarnを使ってインストールします。

npm

npm install @auth0/nextjs-auth0

yarn

yarn add @auth0/nextjs-auth0

Auth0での設定

Auth0のダッシュボードで

Regular Web Applicationを作成します。

手順は以下の通りです。

サインイン

ここのサイトからサインインします。

Auth0

step1

step1としてドメイン名、地域の入力がありますが

ドメイン名は自分の好きなもの

地域はEUで大丈夫です。

step2

step2のこちらのページでは

personalを選択しましょう。

Regular Web Applicationの作成

1.applicationへ移動

サインインが終わったらapplicationへ移動し

CREATE APPLICATIONをクリックします。

2.Regular WEB APPLICATIONを選択

選択したらCreateを押します。

3.settingへ

次にsettingに移動しNameを入力して

一連の流れは完了です！！

Client IDとClient SecretとDomainは
後で使うので控えておきましょう！

既存のプロジェクトへの実装

今回は練習用に作ってあるNext.jsの環境に

Auth0を実装していきます。

インスタンスの生成

次にインスタンスを生成します。

ファイルの場所はお任せですが

私はsrc/component/utilities/auth0.tsxで作成しました。

以下のものはAuth0のRead.meに書いてあったものです。

import { initAuth0 } from '@auth0/nextjs-auth0';
import config from './config';

export default initAuth0({
  domain: '<AUTH0_DOMAIN>',
  clientId: '<AUTH0_CLIENT_ID>',
  clientSecret: '<AUTH0_CLIENT_SECRET>',
  scope: 'openid profile',
  redirectUri: 'http://localhost:3000/api/callback',
  postLogoutRedirectUri: 'http://localhost:3000/',
  session: {
    // The secret used to encrypt the cookie.
    cookieSecret: '<RANDOMLY_GENERATED_SECRET>',
    // The cookie lifetime (expiration) in seconds. Set to 8 hours by default.
    cookieLifetime: 60 * 60 * 8,
    // (Optional) The cookie domain this should run on. Leave it blank to restrict it to your domain.
    cookieDomain: 'your-domain.com',
    // (Optional) SameSite configuration for the session cookie. Defaults to 'lax', but can be changed to 'strict' or 'none'. Set it to false if you want to disable the SameSite setting.
    cookieSameSite: 'lax',
    // (Optional) Store the id_token in the session. Defaults to false.
    storeIdToken: false,
    // (Optional) Store the access_token in the session. Defaults to false.
    storeAccessToken: false,
    // (Optional) Store the refresh_token in the session. Defaults to false.
    storeRefreshToken: false},
  oidcClient: {
    // (Optional) Configure the timeout in milliseconds for HTTP requests to Auth0.
    httpTimeout: 2500,
    // (Optional) Configure the clock tolerance in milliseconds, if the time on your server is running behind.
    clockTolerance: 10000
  }
});

もしAuth0アカウントでカスタムドメインを作ったのであれば
Auth0ドメインとしてそのカスタムドメインを使いましょう。
(例: acme.auth0.comの代わりにlogin.acme.com等)

上にあるコードは不必要なものが多いと思ったので

私は省略した以下のコードを使用しました。

import { initAuth0 } from '@auth0/nextjs-auth0';

export default initAuth0({
  domain: '<AUTH0_DOMAIN>',
  clientId: '<AUTH0_CLIENT_ID>',
  clientSecret:
    '<AUTH0_CLIENT_SECRET>',
  scope: 'openid profile',
  redirectUri: 'http://localhost:3000/api/callback',
  postLogoutRedirectUri: 'http://localhost:3000/',
  session: {
    // The secret used to encrypt the cookie.
    cookieSecret:
      '<RANDOMLY_GENERATED_SECRET>',
 },
});

ここでの

<AUTH0_DOMAIN>
<AUTH0_CLIENT_ID>
<AUTH0_CLIENT_SECRET>

では先ほどの3つを入力します。

必要な場合はログインページの設定も変えておきましょう。
https://auth0.com/docs/custom-domains/additional-configuration

Login機能実装

そしてLogin機能を実装していきます。

nextjsのアプリを作った際に
pages/apiが作成されていると思うので
この中に書いていきます。

この中に以下のように記述します。(場所は/pages/api/login.tsx)

import auth0 from '../../utils/auth0';

export default async function login(req, res) {
  try {
    await auth0.handleLogin(req, res);
  } catch (error) {
    console.error(error);
    res.status(error.status || 400).end(error.message);
  }
}

これによりAuth0へのログイン画面への遷移が可能となると思いましたが

１つ見落としているところがありました。

エラー改善１

Auth0.tsxの<RANDOMLY_GENERATED_SECRET>です。

これを設定する必要があります。

これはランダムで構いません。

３６文字以上適当に入力します。

（例）efjidjifhdfhjfhfudhurhfrujhfhfhhfhdfdbfhdbfhdbfhedfnkesdjwdiwfdkgie

loginを試す

pages/indexにて以下を入力します。

<a href="/api/login">Login</a>

実際にボタンを押してもまだ

エラーが返ってきます。

エラー改善２

まだ改善すべきエラーがありました。

Auth0側での設定です。

Auth0側でも更新が必要です。

Applicationから作ったRegular WEB APPLICATIONへ移動します。

この２つの部分が空欄になっていると思うので

写真の通りに変えておきます。

callbackはログイン後、

logoutはログアウト後の遷移先です。

この時点ではログイン後は

レスポンスとして404エラーが返ってきます。

また、認証は現時点で

googleアカウントだけとなっていますが

auth0の公式サイトで変更可能です。

※デザインなども変えれる

アプリケーションへのリダイレクト

そしてこのやり取り後
アプリケーションにリダイレクトする必要があるので
セッションクッキーを作成するコールバックルートを作成します。
(例:/pages/api/callback.tsx)

↓クッキーについてはこちら
https://ssaits.jp/promapedia/technology/cookie-session-cache.html

import auth0 from '../../../components/utilities/auth0';

export default async function callback(req, res) {
  try {
    await auth0.handleCallback(req, res, { redirectTo: '/' });
  } catch (error) {
    console.error(error);
    res.status(error.status || 400).end(error.message);
  }
}

The handleCallback functionはリクエストを終わらせ、
そのレスポンスを送ります。
他のクッキーを設定したい場合は呼び出す前に設定します。

任意で外部のパラメータを送信することもできます。

redirectToでログイン後の遷移先を指定します。

Logout

次にAPIルートを作ります。(/src/pages/api/logout.js)

import auth0 from '../../../components/utilities/auth0';

export default async function logout(req, res) {
  try {
    await auth0.handleLogout(req, res);
  } catch (error) {
    console.error(error);
    res.status(error.status || 400).end(error.message);
  }
}

これで以下のコードを入力すれば

ログアウトができるようになります。

<a href="/api/logout">Logout</a>

まとめ

これでSNS認証が可能になりました。

今回はこれで終わりますが

次はログイン後のシークレットページ、

マイページを実装していきます。

最後までお読みいただき

ありがとうございました。