認証統合

Nextyの認証機能はBetter-authベースであり、認証モジュールには豊富な箱から出してすぐに使える機能が統合されています：

• ログイン方式: Google、GitHub、Email Magic Link、Google One Tap
• セキュリティ強化: Cloudflare Turnstile検証
• メールサービス: 新規ユーザー登録時にウェルカムメールを送信
• ユーザー役割: user/admin役割を提供、内蔵のAuthGuardルート保護
• ユーザーソース追跡: ユーザーがリンクを訪問した際のURLパラメーターに基づいてユーザーソースを記録
• ユーザーブロック: 管理者はリスクのあるユーザーを簡単にブロックしてシステムセキュリティを保護
• 最後のログイン方式: ユーザーの最後のログイン方式をローカルで記録し、より高速なログイン完了を実現

Better-auth環境変数

Better-authを使用するにはBETTER_AUTH_SECRETの設定が必要で、次のコマンドで生成できます：

openssl rand -base64 32

GitHub OAuthの設定

注目すべき点

GitHub認証が不要な場合は、components/auth/LoginForm.tsxのログインボタンを単純に削除してください。

GitHubのOAuth Appsページを開き、New OAuth Appをクリックして新しいOAuthアプリの作成を開始します。

開発環境の場合：

• Homepage URLに開発環境のアドレスを入力、例：http://localhost:3000
• Authorization callback URLに指定されたAPIエンドポイントを入力、例：http://localhost:3000/api/auth/callback/github

本番環境の場合：

• Homepage URLに本番環境のアドレスを入力、例：https://demo.nexty.dev
• Authorization callback URLに指定されたAPIエンドポイントを入力、例：https://demo.nexty.dev/api/auth/callback/github

注目すべき点

開発環境と本番環境用に別々のOAuthアプリを作成することを推奨します。そうすればHomepage URLとAuthorization callback URLを変更する必要がありません。

作成後、Client IDが表示されます。Generate a new client secretをクリックしてClient Secretを生成し、環境変数NEXT_PUBLIC_GITHUB_CLIENT_IDとGITHUB_CLIENT_SECRETに追加してください。

Google OAuthの設定

注目すべき点

Google認証が不要な場合は、components/auth/LoginForm.tsxのログインボタンを単純に削除してください。

Google Cloud Consoleを開き、New Projectをクリックします。

プロジェクト名を入力してCreateをクリックします。

プロジェクトのセットアップを開始します。

Client IDを作成します。

• Application typeでWeb applicationを選択します

開発環境の場合：

• Authorized JavaScript originsに開発環境のアドレスを入力、例：http://localhost:3000とhttp://localhost
• Authorized redirect URIsに指定されたAPIエンドポイントを入力、例：http://localhost:3000/api/auth/callback/google

本番環境の場合：

• Authorized JavaScript originsに本番環境のアドレスを入力、例：https://demo.nexty.dev
• Authorized redirect URIsに指定されたAPIエンドポイントを入力、例：https://demo.nexty.dev/api/auth/callback/google

生成されたClient IDとClient secretを環境変数NEXT_PUBLIC_GOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETにコピーします。

ローカル環境変数の設定を完了した後、同じプロジェクト下で本番環境用のClientを作成できます。

上記の環境変数設定を完了した後、Google認証だけでなくGoogle One Tapログインもサポートできます。

Email Magic Linkログインの設定

Email Magic Linkログインはユーザーに認証メールを送信する必要があるため、Resendサービスが必要です。

Resend統合の手順を完了すると、Email Magic Linkログインがサポートされます。

Turnstile人間検証の設定

Cloudflareにログインし、左メニューでTurnstileを開き、Add Widgetをクリックします。

本番環境ドメインを選択し、ローカルテスト用にlocalhostを手動で入力します。

Widget Modeと事前クリアランスを選択します。

Widget Modeは訪問者がボットかどうかを識別する方法を決定します。3つのオプションの意味は：

• Managed (推奨): 訪問者の行動を知的に分析し、信頼できるユーザーは直接通過、疑わしいユーザーはクリックして検証が必要
• Non-interactive: ローディングアニメーションを表示し、バックグラウンドで自動的に検証を完了、ユーザーアクションは不要
• Invisible: 検証プロセスを完全に隠し、バックグラウンドですべてのチェックを無音で完了

Would you like to opt for pre-clearance for this site?は、検証済みユーザーが後続の訪問で一部の検証プロセスをスキップできるかどうかを決定します。

• Noを選択: 毎回の訪問で完全な検証が必要
• Yesを選択: 選択したモードに基づいて異なるレベルの検証免除を提供

作成後、Site KeyとSecret Keyが表示されます。これらをそれぞれ環境変数NEXT_PUBLIC_TURNSTILE_SITE_KEYとTURNSTILE_SECRET_KEYにコピーしてください。

設定完了後、ユーザーがメールでログインする際にTurnstile検証がトリガーされ、ボット攻撃を効果的に防止してウェブサイトのセキュリティを向上させます。