SvelteKit Integration with Auth0

Enter SvelteKit + Auth0

I'm just going to put the code in here.

 npm init svelte@next svelte-backpack
 cd svelte-backpack
 npm install
 git init && git add -A && git commit -m "Initial commit"
 npm run dev -- --open

Make it work with auth0 SDK

Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications. Your team and organization can avoid the cost, time, and risk that come with building your own solution to authenticate and authorize users.

First, we need to add the Auth0 SDK for Single Page Applications. Run the following, and restart your server.

npm install @auth0/auth0-spa-js

Brilliant. Now, head over to Auth0 and create your project.

  1. Login or create an account
  2. Click Create Application or navigate to your Applications
  3. Create your application and make note of your Domain & Client ID
  4. Set your Allowed Callback URLs, Allowed Logout URLs, & Allowed Web Origins to localhost:3000

Peek 2021-08-11 10-38.gif

Run the following

mkdir src/lib src/lib/config src/lib/services src/lib/stores
touch src/lib/config/auth_config.js src/lib/services/auth.js src/lib/stores/auth.js

Let's get our config setup.

// src/lib/config/auth_config.js
const config = {
  domain: 'dev-n08ck5ms.us.auth0.com',
  clientId: '4TZr5sk5mmpMi6OHOauHIoH0eafQjTnw',
};
export default config;

Next, we'll set up our Svelte stores.

// src/lib/stores/auth.js
import { writable } from 'svelte/store';

export const isAuthenticated = writable(false);
export const user = writable({});
export const popupOpen = writable(false);
export const error = writable();

Finally, we'll create our Auth Service.

// src/lib/services/auth.js
import createAuth0Client from '@auth0/auth0-spa-js';
import { user, isAuthenticated, popupOpen } from '$lib/stores/auth';
import config from '$lib/config/auth_config';

async function createClient() {
  let auth0Client = await createAuth0Client({
    domain: config.domain,
    client_id: config.clientId,
  });

  return auth0Client;
}

async function loginWithPopup(client, options) {
  popupOpen.set(true);
  try {
    await client.loginWithPopup(options);

    user.set(await client.getUser());
    isAuthenticated.set(true);
  } catch (e) {
    // eslint-disable-next-line
    console.error(e);
  } finally {
    popupOpen.set(false);
  }
}

function logout(client) {
  return client.logout();
}

const auth = {
  createClient,
  loginWithPopup,
  logout,
};

export default auth;

Recap

We just set up our client to handle login using Auth0 . We've got a config file for you to enter your own application details and a Svelte store for handling the client-side state.

We've also set up an Auth Service. This encapsulates many of the initial methods we need to run from Auth0 in a tidy package off in our lib folder.

It's time to use everything we've set up. 🤞

Come-on, just log me in

Ok, fine.

// src/routes/index.svelte
<script>
import { onMount } from 'svelte';
import auth from '$lib/services/auth';
import { isAuthenticated, user } from '$lib/stores/auth';

let auth0Client;

onMount(async () => {
    auth0Client = await auth.createClient();
    isAuthenticated.set(await auth0Client.isAuthenticated());
    user.set(await auth0Client.getUser());
});

function login() {
    auth.loginWithPopup(auth0Client);
}

function logout() {
    auth.logout(auth0Client);
}
</script>

We import our service and store, and when the page mounts we create the Auth0 Client and update our store with the Auth0 details. We also need to log in and log out.

<h1>Welcome to SvelteKit</h1>
    <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

    {#if $isAuthenticated}
<h2>Hey {$user.name}!</h2>
{#if $user.picture}
    <img src={$user.picture} alt={user.name} />
{:else}
    <img src="https://source.unsplash.com/random/400x300" alt="Random Photo" />
{/if}
<button on:click={logout}>Logout</button>
    {:else}
<button on:click={login}>Login</button>
{/if}

Svelte is incredibly readable so that should be pretty straightforward. We listen to the isAuthenticated and user stores. When they're populated we greet the user, show their picture, and offer Logout. Otherwise, we offer Login.

Let's test it out. Wish me luck!

Peek 2021-08-11 11-11.gif

That's it. We've added Auth0 Authentication to a SvelteKit application. It wasn't all that hard and frankly didn't take that long.

If you've never done it, I recommend you try rolling your own authentication just so you have an idea why you'd be happy to pay for a service like Auth0. It is such good value.

We are well on our way to making a reusable boilerplate for Svelte Kit applications. There are many more things that could go into this though.

The repo is available at https://github.com/tkssharma/blogs/tree/master/svelte-with-auth0. Feel free to fork, comment, star, etc. Heads up, this is not its final form.

Comments