new.svelte

{#if dialogOpen}
<div class="background"/>
<div class="dialog">
  <input type="email" bind:email>
  <button on:click={dialogOpen = false}>Close</button>
<div>
{/if}

<button on:click={dialogOpen = true}>Login</button>

<script>
  
  import { onMount } from 'svelte';
  
  let dialogOpen = false;
  let email;
  
  $: {
    if (email) {
      // The client SDK will parse the code from the link for you.
      firebase.auth().signInWithEmailLink(email, window.location.href)
        .then(function(result) {
          window.localStorage.removeItem('emailForSignIn');
        })
        .catch(function(error) {
        });
    }
  }
  
  onMount( () => {
    email = window.localStorage.getItem('emailForSignIn');
  } );
  
</script>
  
  <style>
  .background {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 50;
    opacity: 0.4;
    background-color: grey;
  }
  
  .dialog {
    position: absolute;
    top: 250px;
    left: 250px;
    right: 250px;
    bottom: 250px;
  }
</style>

original.js

// Confirm the link is a sign-in with email link.
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  var email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  firebase.auth().signInWithEmailLink(email, window.location.href)
    .then(function(result) {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch(function(error) {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}