Update i18n for confirmation messages (#152)

.changeset/ten-otters-reflect.md

@@ -0,0 +1,8 @@
+---
+'@supabase/auth-ui-react': patch
+'@supabase/auth-ui-shared': patch
+'@supabase/auth-ui-solid': patch
+'@supabase/auth-ui-svelte': patch
+---
+
+Update i18n for confirmation messages

packages/react/src/components/Auth/interfaces/EmailAuth.tsx

@@ -91,10 +91,7 @@ function EmailAuth({
         if (signUpError) setError(signUpError.message)
         // Check if session is null -> email confirmation setting is turned on
         else if (signUpUser && !signUpSession)
-          setMessage(
-            i18n?.sign_up?.confirmation_text ||
-              'Check your email for the confirmation link.'
-          )
+          setMessage(i18n?.sign_up?.confirmation_text as string)
         break
     }
 

packages/react/src/components/Auth/interfaces/ForgottenPassword.tsx

@@ -40,7 +40,7 @@ function ForgottenPassword({
       redirectTo,
     })
     if (error) setError(error.message)
-    else setMessage('Check your email for the password reset link')
+    else setMessage(i18n?.forgotten_password?.confirmation_text as string)
     setLoading(false)
   }
 

packages/react/src/components/Auth/interfaces/MagicLink.tsx

@@ -41,7 +41,7 @@ function MagicLink({
       options: { emailRedirectTo: redirectTo },
     })
     if (error) setError(error.message)
-    else setMessage('Check your email for the magic link')
+    else setMessage(i18n?.magic_link?.confirmation_text as string)
     setLoading(false)
   }
 

packages/react/src/components/Auth/interfaces/UpdatePassword.tsx

@@ -25,7 +25,7 @@ function UpdatePassword({
     setLoading(true)
     const { error } = await supabaseClient.auth.updateUser({ password })
     if (error) setError(error.message)
-    else setMessage('Your password has been updated')
+    else setMessage(i18n?.update_password?.confirmation_text as string)
     setLoading(false)
   }
 

packages/shared/src/localization/en.json

@@ -25,20 +25,23 @@
     "email_input_placeholder": "Your email address",
     "button_label": "Send Magic Link",
     "loading_button_label": "Sending Magic Link ...",
-    "link_text": "Send a magic link email"
+    "link_text": "Send a magic link email",
+    "confirmation_text": "Check your email for the magic link"
   },
   "forgotten_password": {
     "email_label": "Email address",
     "password_label": "Your Password",
     "email_input_placeholder": "Your email address",
     "button_label": "Send reset password instructions",
     "loading_button_label": "Sending reset instructions ...",
-    "link_text": "Forgot your password?"
+    "link_text": "Forgot your password?",
+    "confirmation_text": "Check your email for the password reset link"
   },
   "update_password": {
     "password_label": "New password",
     "password_input_placeholder": "Your new password",
     "button_label": "Update password",
-    "loading_button_label": "Updating password ..."
+    "loading_button_label": "Updating password ...",
+    "confirmation_text": "Your password has been updated"
   }
 }

packages/shared/src/types.ts

@@ -120,6 +120,7 @@ export type I18nVariables = {
     button_label?: string
     loading_button_label?: string
     link_text?: string
+    confirmation_text?: string
   }
   forgotten_password?: {
     email_label?: string
@@ -128,11 +129,13 @@ export type I18nVariables = {
     button_label?: string
     loading_button_label?: string
     link_text?: string
+    confirmation_text?: string
   }
   update_password?: {
     password_label?: string
     password_input_placeholder?: string
     button_label?: string
     loading_button_label?: string
+    confirmation_text?: string
   }
 }

packages/solid/src/components/Auth/interfaces/EmailAuth.tsx

@@ -79,7 +79,7 @@ function EmailAuth(props: EmailAuthProps) {
         if (signUpError) setError(signUpError.message)
         // Check if session is null -> email confirmation setting is turned on
         else if (signUpUser && !signUpSession)
-          setMessage('Check your email for the confirmation link.')
+          setMessage(props.i18n.sign_up?.confirmation_text as string)
         break
     }
 

packages/solid/src/components/Auth/interfaces/ForgottenPassword.tsx

@@ -34,7 +34,7 @@ function ForgottenPassword(props: {
       }
     )
     if (error) setError(error.message)
-    else setMessage('Check your email for the password reset link')
+    else setMessage(props.i18n.forgotten_password?.confirmation_text as string)
     setLoading(false)
   }
 

packages/solid/src/components/Auth/interfaces/MagicLink.tsx

@@ -32,7 +32,7 @@ function MagicLink(props: {
       options: { emailRedirectTo: props.redirectTo },
     })
     if (error) setError(error.message)
-    else setMessage('Check your email for the magic link')
+    else setMessage(props.i18n.magic_link?.confirmation_text as string)
     setLoading(false)
   }
 

packages/solid/src/components/Auth/interfaces/UpdatePassword.tsx

@@ -23,7 +23,7 @@ function UpdatePassword(props: {
       password: password(),
     })
     if (error) setError(error.message)
-    else setMessage('Your password has been updated')
+    else setMessage(props.i18n.update_password?.confirmation_text as string)
     setLoading(false)
   }
 

packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte

@@ -21,12 +21,14 @@
 
 	let message = '';
 	let error = '';
+	let loading = false;
 
 	let lngKey: 'sign_in' | 'sign_up' = authView === 'sign_in' ? 'sign_in' : 'sign_up';
 
 	async function handleSubmit() {
 		loading = true;
 		error = '';
+		message = '';
 
 		switch (authView) {
 			case VIEWS.SIGN_IN:
@@ -35,6 +37,7 @@
 					password
 				});
 				if (signInError) error = signInError.message;
+				loading = false;
 				break;
 			case VIEWS.SIGN_UP:
 				const {
@@ -50,10 +53,10 @@
 
 				if (signUpError) error = signUpError.message;
 				// Check if session is null -> email confirmation setting is turned on
-				else if (signUpUser && !signUpSession)
-					message = 'Check your email for the confirmation link.';
+				else if (signUpUser && !signUpSession) message = i18n.sign_up?.confirmation_text as string;
 				break;
 		}
+		loading = false;
 	}
 </script>
 

packages/svelte/src/lib/Auth/interfaces/ForgottenPassword.svelte

@@ -29,7 +29,7 @@
 			redirectTo
 		});
 		if (resetPasswordError) error = resetPasswordError.message;
-		else message = 'Check your email for the password reset link';
+		else message = i18n.forgotten_password?.confirmation_text as string;
 		loading = false;
 	}
 </script>

packages/svelte/src/lib/Auth/interfaces/MagicLink.svelte

@@ -32,7 +32,7 @@
 			}
 		});
 		if (resetPasswordError) error = resetPasswordError.message;
-		else message = 'Check your email for the magic link';
+		else message = i18n.magic_link?.confirmation_text as string;
 		loading = false;
 	}
 </script>

packages/svelte/src/lib/Auth/interfaces/UpdatePassword.svelte

@@ -29,7 +29,7 @@
 			redirectTo
 		});
 		if (resetPasswordError) error = resetPasswordError.message;
-		else message = 'Check your email for the password reset link';
+		else message = i18n.update_password?.confirmation_text as string;
 		loading = false;
 	}
 </script>