supabase-community · silentworks · May 9, 2023 · May 9, 2023
diff --git a/.changeset/unlucky-jobs-walk.md b/.changeset/unlucky-jobs-walk.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
+---
+
+Add additional data to component to store in user_metadata
diff --git a/packages/react/src/components/Auth/Auth.tsx b/packages/react/src/components/Auth/Auth.tsx
@@ -28,6 +28,8 @@ function Auth({
   theme = 'default',
   localization = { variables: {} },
   otpType = 'email',
+  additionalData,
+  children,
 }: AuthProps): JSX.Element | null {
   /**
    * Localization support
@@ -159,6 +161,8 @@ function Auth({
             magicLink={magicLink}
             showLinks={showLinks}
             i18n={i18n}
+            additionalData={additionalData}
+            children={children}
           />
         </Container>
       )

diff --git a/packages/react/src/components/Auth/interfaces/EmailAuth.tsx b/packages/react/src/components/Auth/interfaces/EmailAuth.tsx
@@ -28,9 +28,11 @@ export interface EmailAuthProps {
   supabaseClient: SupabaseClient
   showLinks?: boolean
   redirectTo?: RedirectTo
+  additionalData?: { [key: string]: any }
   magicLink?: boolean
   i18n?: I18nVariables
   appearance?: Appearance
+  children?: React.ReactNode
 }
 
 function EmailAuth({
@@ -43,9 +45,11 @@ function EmailAuth({
   supabaseClient,
   showLinks = false,
   redirectTo,
+  additionalData,
   magicLink,
   i18n,
   appearance,
+  children,
 }: EmailAuthProps) {
   const isMounted = useRef<boolean>(true)
   const [email, setEmail] = useState(defaultEmail)
@@ -78,15 +82,19 @@ function EmailAuth({
         if (signInError) setError(signInError.message)
         break
       case 'sign_up':
+        let options: { emailRedirectTo: RedirectTo; data?: object } = {
+          emailRedirectTo: redirectTo,
+        }
+        if (additionalData) {
+          options.data = additionalData
+        }
         const {
           data: { user: signUpUser, session: signUpSession },
           error: signUpError,
         } = await supabaseClient.auth.signUp({
           email,
           password,
-          options: {
-            emailRedirectTo: redirectTo,
-          },
+          options,
         })
         if (signUpError) setError(signUpError.message)
         // Check if session is null -> email confirmation setting is turned on
@@ -127,7 +135,6 @@ function EmailAuth({
               id="email"
               type="email"
               name="email"
-              autoFocus
               placeholder={labels?.email_input_placeholder}
               defaultValue={email}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
@@ -156,6 +163,7 @@ function EmailAuth({
               appearance={appearance}
             />
           </div>
+          {children}
         </Container>
 
         <Button

diff --git a/packages/react/src/components/Auth/ui/index.tsx b/packages/react/src/components/Auth/ui/index.tsx
@@ -45,7 +45,7 @@ export const SignUp = (
 }
 
 export const SignIn = (
-  props: Omit<AuthProps, 'view' | 'onlyThirdPartyProviders'>
+  props: Omit<AuthProps, 'view' | 'onlyThirdPartyProviders' | 'additionalData'>
 ) => {
   return (
     <Auth
@@ -60,7 +60,11 @@ export const SignIn = (
 export const MagicLink = (
   props: Omit<
     AuthProps,
-    'view' | 'onlyThirdPartyProviders' | 'magicLink' | 'showLinks'
+    | 'view'
+    | 'onlyThirdPartyProviders'
+    | 'magicLink'
+    | 'showLinks'
+    | 'additionalData'
   >
 ) => {
   return <Auth {...props} view="magic_link" showLinks={false} />
@@ -69,7 +73,11 @@ export const MagicLink = (
 export const SocialAuth = (
   props: Omit<
     AuthProps,
-    'view' | 'onlyThirdPartyProviders' | 'magicLink' | 'showLinks'
+    | 'view'
+    | 'onlyThirdPartyProviders'
+    | 'magicLink'
+    | 'showLinks'
+    | 'additionalData'
   >
 ) => {
   return (
@@ -82,11 +90,26 @@ export const SocialAuth = (
   )
 }
 
-export const ForgottenPassword = (props: Omit<AuthProps, 'view'>) => {
+export const ForgottenPassword = (
+  props: Pick<
+    AuthProps,
+    | 'supabaseClient'
+    | 'appearance'
+    | 'localization'
+    | 'theme'
+    | 'showLinks'
+    | 'redirectTo'
+  >
+) => {
   return <Auth showLinks={false} {...props} view="forgotten_password" />
 }
 
-export const UpdatePassword = (props: Omit<AuthProps, 'view'>) => {
+export const UpdatePassword = (
+  props: Pick<
+    AuthProps,
+    'supabaseClient' | 'appearance' | 'localization' | 'theme'
+  >
+) => {
   return <Auth {...props} view="update_password" />
 }
 

diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
@@ -93,6 +93,7 @@ export interface BaseAuth {
   magicLink?: boolean
   showLinks?: boolean
   otpType?: OtpType
+  additionalData?: { [key: string]: any }
 
   /**
    * This will toggle on the dark variation of the theme

diff --git a/packages/solid/src/components/Auth/Auth.tsx b/packages/solid/src/components/Auth/Auth.tsx
@@ -246,7 +246,10 @@ function Auth(props: AuthProps): JSX.Element | null {
             magicLink={mergedProps().magicLink}
             showLinks={mergedProps().showLinks}
             i18n={i18n()}
-          />
+            additionalData={mergedProps().additionalData}
+          >
+            {props.children}
+          </EmailAuth>
         </Container>
       </Match>
 

diff --git a/packages/solid/src/components/Auth/interfaces/EmailAuth.tsx b/packages/solid/src/components/Auth/interfaces/EmailAuth.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-case-declarations */
 import { SupabaseClient } from '@supabase/supabase-js'
-import { createEffect, createSignal, Setter } from 'solid-js'
+import { createEffect, createSignal, JSXElement, Setter } from 'solid-js'
 import {
   I18nVariables,
   RedirectTo,
@@ -22,9 +22,11 @@ export interface EmailAuthProps {
   supabaseClient: SupabaseClient
   showLinks?: boolean
   redirectTo?: RedirectTo
+  additionalData?: { [key: string]: any }
   magicLink?: boolean
   i18n: I18nVariables
   appearance?: Appearance
+  children?: JSXElement
 }
 
 const VIEWS: ViewsMap = {
@@ -66,15 +68,19 @@ function EmailAuth(props: EmailAuthProps) {
         if (signInError) setError(signInError.message)
         break
       case 'sign_up':
+        let options: { emailRedirectTo: RedirectTo; data?: object } = {
+          emailRedirectTo: props.redirectTo,
+        }
+        if (props.additionalData) {
+          options.data = props.additionalData
+        }
         const {
           data: { user: signUpUser, session: signUpSession },
           error: signUpError,
         } = await props.supabaseClient.auth.signUp({
           email: email(),
           password: password(),
-          options: {
-            emailRedirectTo: props.redirectTo,
-          },
+          options,
         })
         if (signUpError) setError(signUpError.message)
         // Check if session is null -> email confirmation setting is turned on
@@ -148,6 +154,7 @@ function EmailAuth(props: EmailAuthProps) {
               appearance={props.appearance}
             />
           </div>
+          {props.children}
         </Container>
 
         <Button

diff --git a/packages/solid/src/components/Auth/ui/index.tsx b/packages/solid/src/components/Auth/ui/index.tsx
@@ -40,12 +40,14 @@ export const SignUp = (
       {...props}
       onlyThirdPartyProviders={false}
       view="sign_up"
-    />
+    >
+      {props.children}
+    </Auth>
   )
 }
 
 export const SignIn = (
-  props: Omit<AuthProps, 'view' | 'onlyThirdPartyProviders'>
+  props: Omit<AuthProps, 'view' | 'onlyThirdPartyProviders' | 'additionalData'>
 ) => {
   return (
     <Auth
@@ -60,7 +62,11 @@ export const SignIn = (
 export const MagicLink = (
   props: Omit<
     AuthProps,
-    'view' | 'onlyThirdPartyProviders' | 'magicLink' | 'showLinks'
+    | 'view'
+    | 'onlyThirdPartyProviders'
+    | 'magicLink'
+    | 'showLinks'
+    | 'additionalData'
   >
 ) => {
   return <Auth {...props} view="magic_link" showLinks={false} />
@@ -69,7 +75,12 @@ export const MagicLink = (
 export const SocialAuth = (
   props: Omit<
     AuthProps,
-    'view' | 'onlyThirdPartyProviders' | 'magicLink' | 'showLinks' | 'children'
+    | 'view'
+    | 'onlyThirdPartyProviders'
+    | 'magicLink'
+    | 'showLinks'
+    | 'children'
+    | 'additionalData'
   >
 ) => {
   return (

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 additionalData: { [key: string]: any } | undefined;
 
 	onMount(() => {
 		const { data: authListener } = supabaseClient.auth.onAuthStateChange((event) => {
@@ -93,6 +94,7 @@
 				{magicLink}
 				{showLinks}
 				{i18n}
+				{additionalData}
 			/>
 		{/if}
 	{/if}
@@ -105,8 +107,9 @@
 				{redirectTo}
 				{magicLink}
 				{showLinks}
-				{i18n}
-			/>
+				{additionalData}
+				{i18n}><slot /></EmailAuth
+			>
 		{/if}
 	{/if}
 	{#if view === VIEWS.FORGOTTEN_PASSWORD}

diff --git a/packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte b/packages/svelte/src/lib/Auth/interfaces/EmailAuth.svelte
@@ -6,14 +6,20 @@
 	import Input from '$lib/UI/Input.svelte';
 	import Label from '$lib/UI/Label.svelte';
 	import Message from '$lib/UI/Message.svelte';
-	import { VIEWS, type I18nVariables, type ViewType } from '@supabase/auth-ui-shared';
+	import {
+		VIEWS,
+		type I18nVariables,
+		type ViewType,
+		type RedirectTo
+	} from '@supabase/auth-ui-shared';
 	import type { Appearance } from '$lib/types';
 
 	export let authView: ViewType = 'sign_in';
 	export let email = '';
 	export let password = '';
 	export let supabaseClient: SupabaseClient;
-	export let redirectTo: string | undefined = undefined;
+	export let redirectTo: RedirectTo = undefined;
+	export let additionalData: { [key: string]: any } | undefined = undefined;
 	export let showLinks = false;
 	export let magicLink = true;
 	export let i18n: I18nVariables;
@@ -40,15 +46,19 @@
 				loading = false;
 				break;
 			case VIEWS.SIGN_UP:
+				let options: { emailRedirectTo: RedirectTo; data?: object } = {
+					emailRedirectTo: redirectTo
+				};
+				if (additionalData) {
+					options.data = additionalData;
+				}
 				const {
 					data: { user: signUpUser, session: signUpSession },
 					error: signUpError
 				} = await supabaseClient.auth.signUp({
 					email,
 					password,
-					options: {
-						emailRedirectTo: redirectTo
-					}
+					options
 				});
 
 				if (signUpError) error = signUpError.message;
@@ -88,8 +98,11 @@
 					{appearance}
 				/>
 			</div>
+			<slot />
 		</Container>
-		<Button type="submit" color="primary" {loading} {appearance}>{i18n?.[lngKey]?.button_label}</Button>
+		<Button type="submit" color="primary" {loading} {appearance}
+			>{i18n?.[lngKey]?.button_label}</Button
+		>
 
 		{#if showLinks}
 			<Container direction="vertical" gap="small" {appearance}>

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 additionalData: { [key: string]: any } | undefined = undefined;
 </script>
 
 <Auth
@@ -36,4 +37,7 @@
 	{appearance}
 	{theme}
 	{localization}
-/>
+	{additionalData}
+>
+	<slot />
+</Auth>