1。NEXTAUTH.jsをnext.js 13 App Directoryでセットアップと使用
このチュートリアルでは、nextauth.jsを使用して、next.js 13アプリディレクトリで認証をセットアップすることを説明します。このチュートリアルでは次のAAUTHパッケージを使用している間、これを読むまでにauth.jsパッケージを使用している可能性があることは注目に値します。
カバーされているトピック
- next.js 13プロジェクトをセットアップします
- 次の認証APIルートをセットアップします
- NextAuthセッションデータを取得する3つの方法
- サーバーコンポーネントでセッションを取得します
- APIルートでセッションを取得します
- クライアントコンポーネントでセッションを取得します
- データベースを統合します
- PostgreSQLをセットアップします
- Prisma ormをセットアップします
- NextAuth認証コードを実装します
- JWTにカスタムキーを保存します
- ルートを保護するさまざまな方法
- クライアント側のルート保護
- サーバー側のルート保護
- APIルートを保護します
- ミドルウェアルート保護
- アカウント登録ロジックを実装します
- APIルートを作成して、ユーザーを登録します
- フォームコンポーネントを作成します
- アカウント登録ページを作成します
ここで記事全体を読んでください:https://codevoweb.com/setup-and-use-nextauth-in-nextjs-13-app-directory/
2。NEXT.JS -nextauth.jsにカスタムログインとサインアップページを使用します
この記事では、新しいnext.js 13アプリディレクトリでnextauth.jsとカスタムログインとサインアップページを統合する方法を学びます。プロジェクトのNextAuthを既に設定しており、カスタムログインとサインアップページを統合する方法のみを探していると仮定します。
カバーされているトピック
- コンピューターでnextAuthプロジェクトを実行します
- NextAuthプロジェクトをテストします
- アカウントを登録します
- アカウントにログインします
- 保護されたページにアクセスします
- NextAuth APIエンドポイントを構成します
- カスタムログインページを作成します
- ログインフォームを作成します
- ログインページを作成します
- カスタムサインアップページを作成します
- サインアップフォームを作成します
- アカウント登録ページを作成します
- アカウント登録用のAPIハンドラーを作成します
- 結論
記事全体をこちらをご覧ください:https://codevoweb.com/nextjs-use-custom-login-and-signup-for-nextauth-js/
3。NEXT.JS -nextauth.jsを使用してGoogleとgithub oauth2を追加します
この記事では、新しいnext.js 13 AppディレクトリでGoogleおよびGithub Oauthプロバイダーをnextauth.jsと統合する方法を学びます。新しいnext.js 13 Appディレクトリと互換性のあるNextAuthチームが推奨する特定のプルリクエストを使用していることは注目に値します。
カバーされているトピック
- NextAuthプロジェクトをローカルに実行します
- GithubとGoogle Oauthの流れを探索してください
- Google OAuth2にサインインします
- Github oauthでサインインします
- GoogleおよびGithub OauthでNextAuthを構成します
- GoogleおよびGithub OAuth2を実装します
- クライアント側のフォームを作成します
- サーバー側のページコンポーネントを作成します
- Google OAuth2資格情報を生成する方法
- Github Oauth資格情報を生成する方法
- 結論
ここで記事全体を読んでください:https://codevoweb.com/nextjs-add-google-and-github-oauth2-using-nextauth-js/