Optionally show magic link on sign-up page

README.md

@@ -71,6 +71,11 @@ Default is `medium`.
 A `string` that specifies the layout direction of the social buttons. Valid options are `horizontal` or `vertical`.
 Default is `vertical`.
 
+## `magicLink`
+
+A `boolean` that specifies whether to show the magic link option on the sign-up page. 
+Default is `false`.
+
 ## `socialColors`
 
 A `boolean` that indicates whether the social buttons should use the brand's colors.

src/Auth.svelte

@@ -14,6 +14,7 @@
   export let socialButtonSize = 'medium'
   export let providers = []
   export let view = 'sign_in'
+  export let magicLink = false;
 
   function setView(newView) {
     view = newView
@@ -32,7 +33,7 @@
     />
 
     {#if view == 'sign_in' || view == 'sign_up'}
-      <EmailAuthView {supabaseClient} {view} {setView}/>
+      <EmailAuthView {supabaseClient} {view} {setView} {magicLink}/>
     {:else if view == 'magic_link'}
       <MagicLinkView {supabaseClient} {setView}/>
     {:else if view == 'forgotten_password'}

src/EmailAuthView.svelte

@@ -7,6 +7,7 @@
   export let supabaseClient
   export let view
   export let setView
+  export let magicLink;
 
   let error = '', message = '', loading = false, email = '', password = ''
 
@@ -40,7 +41,9 @@
   {#if view == 'sign_up'}
     <Button block primary size="large" {loading} icon="inbox">Sign up</Button>
     <div class="links">
-      <LinkButton on:click={() => setView('magic_link')}>Sign in with magic link</LinkButton>
+      {#if magicLink === true}
+        <LinkButton on:click={() => setView('magic_link')}>Sign in with magic link</LinkButton>
+      {/if}
       <LinkButton on:click={() => setView('sign_in')}>Do you have an account? Sign in</LinkButton>
     </div>
   {:else}

src/index.d.ts

@@ -10,6 +10,7 @@ export interface AuthProps {
   socialLayout?: 'vertical' | 'horizontal'
   socialColors?: boolean
   socialButtonSize?: 'medium' | 'large'
+  magicLink?: boolean
 }
 
 export default class Auth extends SvelteComponentTyped<AuthProps> {}