diff --git a/README.md b/README.md index 09805d4..6533d6e 100644 --- a/README.md +++ b/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. diff --git a/src/Auth.svelte b/src/Auth.svelte index d7e289f..8ed4bdb 100644 --- a/src/Auth.svelte +++ b/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'} - + {:else if view == 'magic_link'} {:else if view == 'forgotten_password'} diff --git a/src/EmailAuthView.svelte b/src/EmailAuthView.svelte index 2579e29..71e6719 100644 --- a/src/EmailAuthView.svelte +++ b/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'} {:else} diff --git a/src/index.d.ts b/src/index.d.ts index 28a5083..aca7a74 100644 --- a/src/index.d.ts +++ b/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 {}