SvelteKit Passkeys Usability

This tutorial forms the third part of our SvelteKit series. If you haven’t already done so, please read the first and second tutorials. In this instalment, we’ll add a loading spinner to give the user feedback that things are happening.

Provide feedback

Perceived performance is just as important as actual performance. If we’re waiting for a browser API or network call to complete, we want to give the user feedback that things are happening. We’ll go for a simple spinner. Update src/routes/register/+page.svelte:

<!-- src/routes/register/+page.svelte -->
<script lang="ts">
  import Spinner from '$lib/Spinner.svelte'
  import { enhance } from '$app/forms'
  import { register } from '@passlock/sveltekit'

  import { 
    PUBLIC_PASSLOCK_TENANCY_ID, 
    PUBLIC_PASSLOCK_CLIENT_ID
  } from '$env/static/public'

  // submitting is a Svelte boolean store
  const { onSubmit, submitting } = register({ 
    tenancyId: PUBLIC_PASSLOCK_TENANCY_ID, 
    clientId: PUBLIC_PASSLOCK_CLIENT_ID
  })
</script>

<form method="post" use:enhance={onSubmit}>
  Email:
  <input type="text" name="email" />
  <br />

  First name:
  <input type="text" name="givenName" />
  <br />

  Last name:
  <input type="text" name="familyName" />
  <br />

  <button type="submit">Register</button>

  {#if $submitting}
    <Spinner />
  {/if}
</form>

src/lib/Spinner.svelte:

<!-- src/lib/Spinner.svelte -->
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
    <animateTransform
      attributeName="transform"
      type="rotate"
      dur="0.75s"
      values="0 12 12;360 12 12"
      repeatCount="indefinite" />
  </path>
</svg>

The Passlock extension returns a boolean store. We can use this to toggle a spinner.

Add a login spinner

Now do the same for the src/routes/login route:

<!-- src/routes/login/+page.svelte -->
<script lang="ts">
  import Spinner from '$lib/Spinner.svelte'
  import { enhance } from '$app/forms'
  import { login } from '@passlock/sveltekit'

  import { 
    PUBLIC_PASSLOCK_TENANCY_ID, 
    PUBLIC_PASSLOCK_CLIENT_ID
  } from '$env/static/public'

  const { onSubmit, submitting } = login({ 
    tenancyId: PUBLIC_PASSLOCK_TENANCY_ID, 
    clientId: PUBLIC_PASSLOCK_CLIENT_ID
  })
</script>

<form method="post" use:enhance={onSubmit}>
  Email:
  <input type="text" name="email" />
  <br />

  <button type="submit">Login</button>

  {#if $submitting}
    <Spinner />
  {/if}
</form>

Next steps

Passkeys are a great alternative to passwords, but many users still prefer to sign in using a social network account. Fortunately the Passlock library also supports Social Sign In. That’s the next tutorial in this series…