NextAuthを勉強する
じょーだんまずはこの記事読んでみる。
じょーだんOAuth？ってなったから以下の記事で確認。
じょーだんやっぱ公式
じょーだんこのtypescriptエラーに遭遇
じょーだんgithubでログインして / にリダイレクトするところまでできた！
この記事参考にログイン、ログアウトする簡単なアプリ作ってみよ！
じょーだん実際にuseSessionを使って、クライアント側でユーザーがログインしているのか、していないのか確かめる。
const data = useSession();
console.log(data);
ログインしていない状態だと
{data: undefined, status: 'loading'}
{data: null, status: 'unauthenticated'}
となり、githubを利用してログインすると以下のようになった。
{data: undefined, status: 'loading'}
{data: {…}, status: 'authenticated'}
つまりstatusの値によってログインしているのか、していないのか分かるのか。
じょーだんOAuth認証の知見を深めたいと思って記事漁ってた。
この記事の https://ritou.hatenablog.com/entry/2020/12/01/000000
よく知られているOAuth 2.0の認可コードフロー の部分が分かりやすかった
じょーだんサードパティーアプリがリソースサーバー(今回だとgithub)を操作するために必要なアクセストークンはどこにあるのと思い、以下の記事にたどり着く。
じょーだんjwtちらほら見かけるけど、分からない。
トークンの形式 って認識でokかな？
じょーだん今までのバックエンドの知識だとセッションidを基に、
サーバーにあるセッションファイルから値を取れるって認識なんだけど、
NextAuthだと違うのかな、
じょーだん
上記記事の NextAuthのセッション管理の種類 の部分が分からない
JWTトークンによるセッション管理、、、
じょーだん
セッションIDをもとにセッションファイルにある値を取得
JWTトークンをもとにセッションファイルにある値を取得
って認識かな？
じょーだんmiddlewareとnext-authを組み合わせてみたけど、すごい。 によると
middleware.tsにて、以下の記述を追加するだけでアプリのルートの保護ができる。
export { default } from "next-auth/middleware"
保護するページを指定したいときはmatcherを持つconfigをexportするだけ
export { default } from "next-auth/middleware"
export const config = { matcher: ["/"] };
すごい！
実際に使ってみましたが、しっかりと「Sign in with GitHub」の認証ページに飛びました。