Chapter15 Adding Authentication

[ShotaroHirose59]

In the previous chapter, you finished building the invoices routes by adding form validation and improving accessibility. In this chapter, you'll be adding authentication to your dashboard. https://nextjs.org/learn/dashboard-app/adding-authentication

Topics

• What is authentication.
• How to add authentication to your app using NextAuth.js.
• How to use Middleware to redirect users and protect your routes.
• How to use React's useFormStatus and useFormState to handle pending states and form errors.

キーワード

• NextAuth.js
• Middleware
• useFormStatus
• useFormState

[ShotaroHirose59]

What is authentication?

• 認証はユーザーが本人であるかどうかをシステムがチェックする方法
• 2FAはセキュリティの向上に役立つ --> 誰かがあなたのパスワードを知ったとしても、あなたの固有のトークンがなければあなたのアカウントにアクセスすることはできません。

Authentication vs. Authorization

Web 開発では、認証と認可は次のような異なる役割を果たす。

• 認証とは、ユーザーが本人であることを確認することです。ユーザー名やパスワードなど、自分が持っているもので自分の身元を証明することになります。
• 次のステップは承認です。ユーザーの身元が確認されると、認可によってアプリケーションのどの部分の使用が許可されるかが決定されます。

つまり。。。認証によってユーザーが誰であるかが確認され、承認によってアプリケーション内で実行できる内容やアクセスできる内容が決まる

[ShotaroHirose59]

NextAuth.js

NextAuth.js は、セッション、サインインとサインアウト、および認証のその他の側面の管理に伴う複雑さの多くを抽象化してくれるr

NextAuth.js のセットアップ

1. next-auth@betaをinstall
2. アプリケーションの秘密キーを生成 openssl rand -base64 32
3. .envファイル内で、生成されたキーをAUTH_SECRET変数に追加 AUTH_SECRET=your-secret-key 実稼働環境で認証を機能させるには、Vercel プロジェクトの環境変数も更新する必要がある。

ページオプションの追加

import type { NextAuthConfig } from 'next-auth';

export const authConfig = {
  pages: {
    signIn: '/login',
  },
};

ページ オプションを使用して、カスタム サインイン、サインアウト、エラー ページのルートを指定できます。 これは必須ではありませんが、signIn: '/login' をページ オプションに追加すると、ユーザーは NextAuth.js のデフォルト ページではなく、カスタム ログイン ページにリダイレクトされます。

Protecting your routes with Next.js Middleware

NextAuthを使う場合のmiddlewareのファイルはauth.config.tsになるっぽい？middleware.tsの使い所もあるのかな？

このタスクにミドルウェアを採用する利点は、ミドルウェアが認証を検証するまで保護されたルートのレンダリングが開始されず、アプリケーションのセキュリティとパフォーマンスの両方が向上することです。

ページのレンダリングよりも前にミドルウェアが先に実行される