Svelte Kit Authentication workflow using JWT and Cookies

generated this image with mid-journey, cyberpunk authentication :)

I am using it in my new projects and today I’ve implemented a JWT authentication workflow and I’ve learned more about how to work with Svelte : )

In this post, I will share some ideas on how to implement a JWT workflow by integrating your SvelteKit app with an API backend that issues the JWT tokens.

Sign up

On the server side of the Svelte Kit app we do this:

Login

The Login form looks like this:

The server side of the login:

Could abstract that cookies part to a Javascript module since it’s been used both on login and sign up.

Render the navbar for user or guests

In order to have JSON web token available for all pages we can use the +hooks.server.js:

Then on the +layout.server.js we read that info and make it available to the pages, like this: