NextJS 認証 - AuthJS / NextAuth.js を使用した役割ベースのセキュリティ
ごめんなさい、翻訳が不十分です。翻訳機と ChatGPT を使用しています。数か月後にはもっと日本語が上達し、アイデアをより良く表現できるようになることを期待しています。
これを通じて、もっと多くの日本人が学ぶ機会を得ることができればと思っています。このプロジェクトチュートリアルは、freeCodeCamp Channelを基にしており、mongoose の代わりに Prisma を使用し、TypeScript サポートなどの追加機能があります。
特徴
- NextJS 14 を使う
- NexAuth.js プロバイダ（Github と Google）
- NextAuth.js クレデンシャル（mongoDB を使ったメールアドレスとパスワード）
- ロールのサポート
- Prisma ORM のサポート
- TypeScript のサポート
- マイナーな修正と Tailwind CSS の変更
はじめに
- ここで Github 用の OAuth App を作成する：
https://github.com/settings/developers
と
Client IDとClient Secretを安全な場所にコピーしてください。 - Google ログインの場合は、以下にアクセスしてください：
https://console.cloud.google.com/にアクセスし、
Api & Services、Credentialsの順にクリックし、OAuthクライアントIDを作成をクリックし、Webアプリケーションを選択し、ローカルホストのリダイレクト URI を入力し、ビデオのように続行しま す。 - https://mongodb.comでアカウントを作成し、ビデオの指示に従って接続 URL をコピーし
ます。接続 URL の最後にはデータベースの名前を追加してください：
mongodb://<USER>: <PASSWORD>@XXX.mongo.net/<YOUR-DATABASE-NAME-HERE>のようにします。 - コンソールで openssl rand -base64 32 を使用して、独自の NEXTAUTH_SECRET 環境変数を生成 してください。
- 新しいユーザーを作成するために、ADMIN_EMAIL 環境変数に GitHub のメールアドレスを追加してく ださい。
注意: Google OAuth の場合、Oauth App を作成する前にプロジェクトを作成する必要があります。ブラウザでhttp://localhost:3000を開くと結果が表示されます。
Vercel へのデプロイ
プロジェクトを Vercel にデプロイするには、以下を追加する必要がある： "postinstall": "prisma generate"をscripts内のpackage.json に追加する。このプロジェクトには既にありますが、自
分でやる場合は追加してください。
次に、Vercel の.env 変数をすべて Settings に入れる。
これで準備完了です :-)
注意事項
私は TypeScript を学んでいるため、いくつかのエラーや悪い構文が発生する可能性があります。プロジェ クトはテストされ、エラーがないことを確認していますが、誰もが学んでいることを考慮してください。何か 問題があれば、GitHub Issues で 報告してください。 貢献したり質問したりするのは自由です。このリポジトリは将来的に更新される可能性があります。