Next.js 認証 - AuthJS / NextAuth を使用した役割ベースのセキュリティ

[English version]

ごめんなさい、翻訳が不十分です。翻訳機と ChatGPT を使用しています。数か月後にはもっと日本語が上達し、アイデアをより良く表現できるようになることを期待しています。

これを通じて、もっと多くの日本人が学ぶ機会を得ることができればと思っています。

このプロジェクトチュートリアルは、freeCodeCamp Channelを基にしており、mongoose の代わりに Prisma を使用し、TypeScript サポートなどの追加機能があります。

特徴

• NextJS 14 を使う
• NexAuth プロバイダ（Github と Google）
• NextAuth クレデンシャル（mongoDB を使ったメールアドレスとパスワード）
• ロールのサポート
• Prisma ORM のサポート
• TypeScript のサポート
• マイナーな修正と Tailwind CSS の変更

はじめに

1. ここで Github 用の OAuth App を作成する： https://github.com/settings/developers と Client ID と Client Secret を安全な場所にコピーしてください。
2. Google ログインの場合は、以下にアクセスしてください： https://console.cloud.google.com/にアクセスし、Api & Services、Credentialsの順にクリックし、OAuthクライアントIDを作成をクリックし、Webアプリケーションを選択し、ローカルホストのリダイレクト URI を入力し、ビデオのように続行します。
3. mongodb.comでアカウントを作成し、ビデオの指示に従って接続 URL をコピーします。接続 URL の最後にはデータベースの名前を追加してください： mongodb://:@XXX.mongo.net/`のようにします。
4. コンソールで openssl rand -base64 32 を使用して、独自の NEXTAUTH_SECRET 環境変数を生成してください。
5. 新しいユーザーを作成するために、ADMIN_EMAIL 環境変数に GitHub のメールアドレスを追加してください。

注意: Google OAuth の場合、Oauth App を作成する前にプロジェクトを作成する必要があります。

ブラウザでhttp://localhost:3000を開くと結果が表示されます。

Vercel へのデプロイ

プロジェクトを Vercel にデプロイするには、以下を追加する必要がある： "postinstall"： "prisma generate"をscripts内のpackage.json` に追加する。このプロジェクトには既にありますが、自分でやる場合は追加してください。

次に、Vercel の.env 変数をすべて Settings に入れる。

これで準備完了です :-)

注意事項

私は TypeScript を学んでいるため、いくつかのエラーや悪い構文が発生する可能性があります。プロジェクトはテストされ、エラーがないことを確認していますが、誰もが学んでいることを考慮してください。何か問題があれば、GitHub Issues で報告してください。

貢献したり質問したりするのは自由です。このリポジトリは将来的に更新される可能性があります。