Merge pull request #246 from Hallidayo/187-fix

feat: password limit prop
supabase-community · Jan 30, 2024 · a70f74d · a70f74d
2 parents 46f2be1 + 3521c08
commit a70f74d
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 2 deletions.
diff --git a/packages/react/src/components/Auth/Auth.tsx b/packages/react/src/components/Auth/Auth.tsx
@@ -29,6 +29,7 @@ function Auth({
   localization = { variables: {} },
   otpType = 'email',
   additionalData,
+  passwordLimit,
   children,
 }: AuthProps): JSX.Element | null {
   /**
@@ -132,6 +133,7 @@ function Auth({
     showLinks,
     i18n,
     appearance,
+    passwordLimit,
   }
 
   /**
@@ -162,6 +164,7 @@ function Auth({
             showLinks={showLinks}
             i18n={i18n}
             additionalData={additionalData}
+            passwordLimit={passwordLimit}
             children={children}
           />
         </Container>
@@ -200,6 +203,7 @@ function Auth({
           appearance={appearance}
           supabaseClient={supabaseClient}
           i18n={i18n}
+          passwordLimit={passwordLimit}
         />
       )
     case VIEWS.VERIFY_OTP:

diff --git a/packages/react/src/components/Auth/interfaces/EmailAuth.tsx b/packages/react/src/components/Auth/interfaces/EmailAuth.tsx
@@ -32,6 +32,7 @@ export interface EmailAuthProps {
   magicLink?: boolean
   i18n?: I18nVariables
   appearance?: Appearance
+  passwordLimit?: boolean
   children?: React.ReactNode
 }
 
@@ -49,6 +50,7 @@ function EmailAuth({
   magicLink,
   i18n,
   appearance,
+  passwordLimit = false,
   children,
 }: EmailAuthProps) {
   const isMounted = useRef<boolean>(true)
@@ -82,6 +84,10 @@ function EmailAuth({
         if (signInError) setError(signInError.message)
         break
       case 'sign_up':
+        if (passwordLimit && password.length > 72) {
+          setError('Password exceeds maxmium length of 72 characters')
+          return
+        }
         let options: { emailRedirectTo: RedirectTo; data?: object } = {
           emailRedirectTo: redirectTo,
         }

diff --git a/packages/react/src/components/Auth/interfaces/UpdatePassword.tsx b/packages/react/src/components/Auth/interfaces/UpdatePassword.tsx
@@ -8,10 +8,12 @@ function UpdatePassword({
   supabaseClient,
   i18n,
   appearance,
+  passwordLimit = false,
 }: {
   supabaseClient: SupabaseClient
   i18n?: I18nVariables
   appearance?: Appearance
+  passwordLimit?: boolean
 }) {
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')
@@ -23,6 +25,11 @@ function UpdatePassword({
     setError('')
     setMessage('')
     setLoading(true)
+    if (passwordLimit && password.length > 72) {
+      setError('Password exceeds maxmium length of 72 characters')
+      setLoading(false)
+      return
+    }
     const { error } = await supabaseClient.auth.updateUser({ password })
     if (error) setError(error.message)
     else setMessage(i18n?.update_password?.confirmation_text as string)

diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
@@ -106,6 +106,7 @@ export interface BaseAuth {
     variables?: I18nVariables
   }
   theme?: 'default' | string
+  passwordLimit?: boolean
 }
 
 export type I18nVariables = {

diff --git a/packages/solid/src/components/Auth/Auth.tsx b/packages/solid/src/components/Auth/Auth.tsx
@@ -53,6 +53,7 @@ function Auth(props: AuthProps): JSX.Element | null {
         theme: 'default',
         localization: { variables: {} },
         otpType: 'email',
+        passwordLimit: false,
       },
       props
     )
@@ -214,6 +215,7 @@ function Auth(props: AuthProps): JSX.Element | null {
     magicLink: mergedProps().magicLink,
     showLinks: mergedProps().showLinks,
     i18n: i18n(),
+    passwordLimit: mergedProps().passwordLimit,
   })
 
   /**
@@ -247,6 +249,7 @@ function Auth(props: AuthProps): JSX.Element | null {
             magicLink={mergedProps().magicLink}
             showLinks={mergedProps().showLinks}
             i18n={i18n()}
+            passwordLimit={mergedProps().passwordLimit}
             additionalData={mergedProps().additionalData}
           >
             {props.children}
@@ -282,6 +285,7 @@ function Auth(props: AuthProps): JSX.Element | null {
         <UpdatePassword
           appearance={mergedProps().appearance}
           supabaseClient={mergedProps().supabaseClient}
+          passwordLimit={mergedProps().passwordLimit}
           i18n={i18n()}
         />
       </Match>

diff --git a/packages/solid/src/components/Auth/interfaces/EmailAuth.tsx b/packages/solid/src/components/Auth/interfaces/EmailAuth.tsx
@@ -26,6 +26,7 @@ export interface EmailAuthProps {
   magicLink?: boolean
   i18n: I18nVariables
   appearance?: Appearance
+  passwordLimit?: boolean
   children?: JSXElement
 }
 
@@ -68,6 +69,10 @@ function EmailAuth(props: EmailAuthProps) {
         if (signInError) setError(signInError.message)
         break
       case 'sign_up':
+        if (props.passwordLimit && password().length > 72) {
+          setError('Password exceeds maxmium length of 72 characters')
+          return
+        }
         let options: { emailRedirectTo: RedirectTo; data?: object } = {
           emailRedirectTo: props.redirectTo,
         }

diff --git a/packages/solid/src/components/Auth/interfaces/UpdatePassword.tsx b/packages/solid/src/components/Auth/interfaces/UpdatePassword.tsx
@@ -7,6 +7,7 @@ import { Button, Container, Input, Label, Message } from '../../UI'
 function UpdatePassword(props: {
   supabaseClient: SupabaseClient
   i18n: I18nVariables
+  passwordLimit: boolean
   appearance?: Appearance
 }) {
   const [password, setPassword] = createSignal('')
@@ -19,6 +20,11 @@ function UpdatePassword(props: {
     setError('')
     setMessage('')
     setLoading(true)
+    if (props.passwordLimit && password().length > 72) {
+      setError('Password exceeds maxmium length of 72 characters')
+      setLoading(false)
+      return
+    }
     const { error } = await props.supabaseClient.auth.updateUser({
       password: password(),
     })

diff --git a/packages/svelte/src/lib/Auth/Auth.svelte b/packages/svelte/src/lib/Auth/Auth.svelte
@@ -34,6 +34,7 @@
 	export let theme: 'default' | string = 'default';
 	export let localization: { variables?: I18nVariables } = {};
 	export let otpType: OtpType = 'email';
+	export let passwordLimit: boolean = false;
 	export let additionalData: { [key: string]: any } | undefined = undefined;
 
 	onMount(() => {
@@ -108,18 +109,33 @@
 				{magicLink}
 				{showLinks}
 				{additionalData}
+				{passwordLimit}
 				{i18n}><slot /></EmailAuth
 			>
 		{/if}
 	{/if}
 	{#if view === VIEWS.FORGOTTEN_PASSWORD}
-		<ForgottenPassword {i18n} {supabaseClient} bind:authView={view} {showLinks} {appearance} {redirectTo} />
+		<ForgottenPassword
+			{i18n}
+			{supabaseClient}
+			bind:authView={view}
+			{showLinks}
+			{appearance}
+			{redirectTo}
+		/>
 	{/if}
 	{#if view === VIEWS.MAGIC_LINK}
 		<MagicLink {i18n} {supabaseClient} bind:authView={view} {appearance} {redirectTo} {showLinks} />
 	{/if}
 	{#if view === VIEWS.UPDATE_PASSWORD}
-		<UpdatePassword {i18n} {supabaseClient} bind:authView={view} {appearance} {showLinks} />
+		<UpdatePassword
+			{i18n}
+			{supabaseClient}
+			bind:authView={view}
+			{appearance}
+			{passwordLimit}
+			{showLinks}
+		/>
 	{/if}
 	{#if view === VIEWS.VERIFY_OTP}
 		<VerifyOtp {i18n} {supabaseClient} bind:authView={view} {appearance} {showLinks} {otpType} />

diff --git a/packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte b/packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte
@@ -23,6 +23,7 @@
 	export let showLinks = false;
 	export let magicLink = true;
 	export let i18n: I18nVariables;
+	export let passwordLimit: boolean = false;
 	export let appearance: Appearance;
 
 	let message = '';
@@ -46,6 +47,11 @@
 				loading = false;
 				break;
 			case VIEWS.SIGN_UP:
+				if (passwordLimit && password.length > 72) {
+					error = 'Password exceeds maxmium length of 72 characters';
+					loading = false;
+					return;
+				}
 				let options: { emailRedirectTo: RedirectTo; data?: object } = {
 					emailRedirectTo: redirectTo
 				};

diff --git a/packages/svelte/src/lib/Auth/interfaces/UpdatePassword.svelte b/packages/svelte/src/lib/Auth/interfaces/UpdatePassword.svelte
@@ -13,6 +13,7 @@
 	export let supabaseClient: SupabaseClient;
 	export let authView: ViewType;
 	export let appearance: Appearance;
+	export let passwordLimit: boolean;
 	export let showLinks = false;
 
 	let password = '';
@@ -24,6 +25,11 @@
 		loading = true;
 		error = '';
 		message = '';
+		if (passwordLimit && password.length > 72) {
+			error = 'Password exceeds maxmium length of 72 characters';
+			loading = false;
+			return;
+		}
 		const { data, error: resetPasswordError } = await supabaseClient.auth.updateUser({
 			password
 		});

diff --git a/packages/svelte/src/lib/Auth/ui/SignUp.svelte b/packages/svelte/src/lib/Auth/ui/SignUp.svelte
@@ -20,6 +20,7 @@
 	export let appearance: Appearance = {};
 	export let theme: 'default' | string = 'default';
 	export let localization: { variables?: I18nVariables } = {};
+	export let passwordLimit: boolean = false;
 	export let additionalData: { [key: string]: any } | undefined = undefined;
 </script>
 
@@ -37,6 +38,7 @@
 	{appearance}
 	{theme}
 	{localization}
+	{passwordLimit}
 	{additionalData}
 >
 	<slot />

diff --git a/packages/svelte/src/lib/Auth/ui/UpdatePassword.svelte b/packages/svelte/src/lib/Auth/ui/UpdatePassword.svelte
@@ -9,6 +9,7 @@
 	export let showLinks = false;
 	export let appearance: Appearance = {};
 	export let theme: 'default' | string = 'default';
+	export let passwordLimit: boolean = false;
 	export let localization: { variables?: I18nVariables } = {};
 </script>
 
@@ -19,5 +20,6 @@
 	{redirectTo}
 	{appearance}
 	{theme}
+	{passwordLimit}
 	{localization}
 />