Passwordless Email Sign In Recipe

• First enable passwordless email authentication in the Firebase Console
• Add the FirebaseUiAuth component:

svelte
<FirebaseUiAuth 
  signInWith={{ emailPasswordless: true }} 
  on:authresult={(e) => saveUserData(e.detail)} />

<Story name="Passwordless Email" knobs={{continueUrl: '/account'}} let:props={{continueUrl}}> {#if $user} You are logged in and here is your User document from Firestore:

{JSON.stringify($user, null, 1)}

<Button form="filled" onclick={logOut}>Log Out</Button>

{:else} <FirebaseUiAuth {continueUrl} signInWith={{ emailPasswordless: true }} on:authresult={(e) => saveUserData(e.detail)} /> {/if}

• Know that from whatever URL the user submits their email from, they will be returned to that same URL in a new tab after they click the link in their email, unless you pass in a route to the continueUrl prop, such as /account. Try adjusting the prop above then use your email and observe the continueUrl param in the link to see how it behaves with /account, ?promo=123 and an empty string.
• Wherever you bring users back to, this page will need to automatically fire up the FirebaseUiAuth component which will check the url for the appropriate redirect parameters on init and automatically sign the user in if they exist. Note that the user will also then be authenticated in the original tab from which they entered their email.
• Alternatively, if you init FirebaseUiAuth lazily from a modal only when users ask to log in, you can redirect to a page which inits FirebaseUiAuth in some fashion sort of like this:

svelte
<script>
  import { isSignInWithEmailLink, getAuth } from 'firebase/auth';
  import { getFirebaseApp, saveUserData } from 'sveltefirets';
</script>
{#if isSignInWithEmailLink(getAuth(getFirebaseApp()), window.location.href)}
  {#await import('sveltefirets') then { FirebaseUiAuth }}
    <FirebaseUiAuth signInWith={{ emailPasswordless: true }} on:authresult={(e) => saveUserData(e.detail)} />
  {/await}
{/if}

Really, it would be easiest to just subscribe to the user store to see if they are authenticated but it's helpful to know the above method exists.

• Lastly, use the passwordless login option from the [Spanish or Arabic demos] to see Firebase send you the login email in those languages - so much translation work saved.

See FirebaseUi for Web's documentation of this feature and the base Firebase documentation for this feature if curious for more information.