diff --git a/apps/web-server/src/components/models/auth/SignIn/SignIn.tsx b/apps/web-server/src/components/models/auth/SignIn/SignIn.tsx index f83b70151..0f67bc611 100644 --- a/apps/web-server/src/components/models/auth/SignIn/SignIn.tsx +++ b/apps/web-server/src/components/models/auth/SignIn/SignIn.tsx @@ -392,12 +392,6 @@ export const SignIn: React.FC = () => { await router.push('/'); }) .catch((error: FirebaseError) => { - if (error.code === 'auth/admin-restricted-operation') { - setError( - '匿名認証は有効化されていないため、利用できません。' - ); - return; - } setError(error); }); }} @@ -410,28 +404,112 @@ export const SignIn: React.FC = () => { ); } - const authErrorToString = (error: FirebaseError | string) => { + const authErrorToAlertProps = ( + error: FirebaseError | string + ): { + message: React.ReactNode; + type: 'error' | 'warning' | 'info'; + description: string | undefined; + } | null => { if (typeof error === 'string') { - return error; + return { message: error, type: 'error', description: undefined }; } + // See https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth switch (error.code) { case 'auth/operation-not-allowed': - return '選択したログインプロバイダは有効化されていないため、利用できません。'; + return { + message: ( +
+

選択したログイン方法は有効化されていないため、利用できません。

+

+ サーバー運用者の方へ: +
+ { + 'このログイン方法を有効化する場合は、Firebase Authentication の管理画面にある「ログイン プロバイダ」から有効化できます。このログイン方法を有効化しない場合は、NEXT_PUBLIC_AUTH_PROVIDERS の設定でボタンを隠すこともできます。' + } +

+
+ ), + type: 'error', + description: error.code, + }; + case 'auth/cancelled-popup-request': + return { + message: + 'ポップアップが複数開かれました。最後に開かれたポップアップ以外は全て自動的に閉じられます。', + type: 'warning', + description: error.code, + }; + case 'auth/popup-blocked': + return { + message: + 'ポップアップがブロックされたため、処理を実行できませんでした。ポップアップブロッカーを使っている場合は、一時的に無効化してください。', + type: 'error', + description: error.code, + }; + case 'auth/popup-closed-by-user': + return { + message: 'ポップアップが閉じられたため、処理は中断されました。', + type: 'info', + description: error.code, + }; + case 'auth/unauthorized-domain': + return { + message: ( +
+

+ この Web + サーバーのドメインは承認されていないため、処理を実行できません。 +

+

+ サーバー運用者の方へ: +
+ { + 'Firebase Authentication の管理画面から、この Web サーバーのドメインを承認済みドメインに追加する必要があります。例えばこのページの URL が https://flocon.example.com/signin の場合は、flocon.example.com を承認済みドメインとして追加します。' + } +

+
+ ), + type: 'error', + description: error.code, + }; + case 'auth/wrong-password': + return { + message: 'パスワードが誤っています。', + type: 'error', + description: error.code, + }; + case 'auth/invalid-email': + return { + message: '無効なメールアドレスです。', + type: 'error', + description: error.code, + }; + case 'auth/user-not-found': + return { + message: '該当するユーザーは見つかりませんでした。', + type: 'error', + description: error.code, + }; + case 'auth/admin-restricted-operation': default: - return error.message; + return { message: error.message, type: 'error', description: error.code }; } }; + const alertProps = authError == null ? null : authErrorToAlertProps(authError); + return (
- {authError != null && ( + {alertProps != null && (
)}