特定のアカウント以外はログインでエラーが出るようにする【Next.js + Auth.js】
Auth.js(NextAuth)でシングルサインオン(SSO)を実現する際，ログインできるユーザーを絞りたい場合があるかと思われます．
例えば，特定のユーザーのみにWEBアプリケーションを提供したい場合など...
Next.jsであればlibディレクトリにAuth.jsのコンフィグを記述しますが，callbacksではbooleanを返すことができるメソッドがあり，認証で失敗を返すことができるようになっています．
export const { auth, handlers, signIn, signOut } = NextAuth({
// 略
callbacks: {
async signIn({ profile }) {
return isAllowedEmail(profile?.email);
},
},
});ポートフォリオの実装では，Googleアカウントを使ったSSOにしているのでメアドが取得できます．このメアドが許可されているのかを判定しています．返却されるものはtrueまたはfalseです．
signInメソッドでは次のような挙動をします
true: サインインのフローの継続falseまたはエラーのスロー: フローを中断し，エラーページへリダイレクト
エラーページはカスタムできます．
/errorページへリダイレクト
export const { auth, handlers, signIn, signOut } = NextAuth({
// 略
pages: {
error: "/error",
},
});ちなみに執筆時点ではカスタムエラーページが無いので，また実装します．
おまけ
isAllowedEmail関数を記載
export const isAllowedEmail = (email: string | null | undefined) => {
const allowedEmailsEnv = process.env.ADMIN_ALLOWED_EMAILS || "";
const allowedEmails = allowedEmailsEnv
.split(",")
.map((e) => e.trim().toLowerCase())
.filter(Boolean);
if (!email) return false;
const normalizedEmail = email.trim().toLowerCase();
return allowedEmails.includes(normalizedEmail);
};環境変数にADMIN_ALLOWED_EMAILSを設け，カンマ区切りでメアドを読みだしています．メアドはLowerCaseへ変換した上で比較を行っています．
個人サイトなら多分これで十分だと思います
あとは間違って公開しないことだけ気を付けておけば大丈夫かと思います．
コメント
自動更新
コメントはまだありません
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.