Add the ability to enable the shouldCreateUser on passwordless login

examples/react/src/App.tsx

@@ -42,7 +42,9 @@ function App() {
   const [brandColor, setBrandColor] = useState(colors[0] as string)
   const [borderRadius, setBorderRadius] = useState(radii[0] as string)
   const [theme, setTheme] = useState('dark')
-  const [socialLayout, setSocialLayout] = useState<SocialLayout>(socialAlignments[1] satisfies SocialLayout)
+  const [socialLayout, setSocialLayout] = useState<SocialLayout>(
+    socialAlignments[1] satisfies SocialLayout
+  )
   const [view, setView] = useState(views[0])
 
   return (
@@ -64,6 +66,7 @@ function App() {
                 </div>
                 <Auth
                   supabaseClient={supabase}
+                  additionalData={{ shouldCreateUser: false }}
                   view={view.id}
                   appearance={{
                     theme: ThemeSupa,
@@ -210,14 +213,18 @@ function App() {
                   <div className="relative inline-flex self-center">
                     <select
                       defaultValue={view.id}
-                      onChange={(e) => { 
-                        const vw = views.filter(v => v.id === e.target.value).pop() ?? view
+                      onChange={(e) => {
+                        const vw =
+                          views.filter((v) => v.id === e.target.value).pop() ??
+                          view
                         setView(vw)
                       }}
                       className="text-lg rounded border-2 border-blue-700 text-gray-600 pl-5 pr-10 h-12 bg-white hover:border-gray-400 appearance-none"
                     >
                       {views.map((v) => (
-                        <option key={v.id} value={v.id}>{v.title}</option>
+                        <option key={v.id} value={v.id}>
+                          {v.title}
+                        </option>
                       ))}
                     </select>
                   </div>

examples/react/src/app.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -31,6 +31,7 @@
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
 */
 
 html {
@@ -47,6 +48,8 @@ html {
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
 }
 
 /*
@@ -188,6 +191,10 @@ select,
 textarea {
   font-family: inherit;
   /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
   font-size: 100%;
   /* 1 */
   font-weight: inherit;
@@ -338,6 +345,14 @@ menu {
   padding: 0;
 }
 
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */
@@ -433,6 +448,9 @@ video {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -480,6 +498,9 @@ video {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;

package.json

@@ -32,8 +32,8 @@
     "npm": ">=9.0.0",
     "node": ">=18.0.0"
   },
-  "packageManager": "pnpm@8.7.0",
+  "packageManager": "pnpm@9.1.0",
   "peerDependencies": {
     "typescript": "4.4.x || 4.5.x || 4.6.x"
   }
-}
+}

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @supabase/auth-ui-react
 
+## 0.5.0
+
+### Minor Changes
+
+- 81480885: Add the ability to createUser on passwordless login
+
 ## 0.4.7
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supabase/auth-ui-react",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "files": [

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

@@ -192,6 +192,7 @@ function Auth({
             setAuthView={setAuthView}
             redirectTo={redirectTo}
             showLinks={showLinks}
+            additionalData={additionalData}
             i18n={i18n}
           />
         </Container>

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

@@ -1,4 +1,7 @@
-import { SupabaseClient } from '@supabase/supabase-js'
+import {
+  SignInWithPasswordlessCredentials,
+  SupabaseClient,
+} from '@supabase/supabase-js'
 import React, { useState } from 'react'
 import { VIEWS, I18nVariables, RedirectTo, en } from '@supabase/auth-ui-shared'
 import { Appearance } from '../../../types'
@@ -17,13 +20,15 @@ function MagicLink({
   redirectTo,
   i18n,
   appearance,
+  additionalData,
   showLinks = false,
 }: {
   setAuthView?: any
   supabaseClient: SupabaseClient
   redirectTo?: RedirectTo
   i18n?: I18nVariables
   appearance?: Appearance
+  additionalData?: { [key: string]: any }
   showLinks?: boolean
 }) {
   const [email, setEmail] = useState('')
@@ -42,10 +47,21 @@ function MagicLink({
       setLoading(false)
       return
     }
-    const { error } = await supabaseClient.auth.signInWithOtp({
+
+    //Trying to reuse the "additionalData" object to pass the "shouldCreateUser" option; We destructure in here, therefore we don't repet into the data
+    const { shouldCreateUser, ...restData } = additionalData || {}
+
+    //We add the shouldCreateUser only when the property is present, ensuring retrocompatibility, and also adding the abiltiy to pass data.
+    const signInOptions: SignInWithPasswordlessCredentials = {
       email,
-      options: { emailRedirectTo: redirectTo },
-    })
+      options: {
+        emailRedirectTo: redirectTo,
+        data: restData,
+        ...(shouldCreateUser !== undefined && { shouldCreateUser }),
+      },
+    }
+
+    const { error } = await supabaseClient.auth.signInWithOtp(signInOptions)
     if (error) setError(error.message)
     else setMessage(i18n?.magic_link?.confirmation_text as string)
     setLoading(false)