How to add Magic Link to a SvelteKit application

What is SvelteKit?

SvelteKit is a framework for building extremely high-performance web apps.

There are two basic concepts in SvelteKit:

• Each page of your app is a Svelte component
• You create pages by adding files to the src/routes directory of your project. These will be server-rendered so that a user's first visit to your app is as fast as possible, then a client-side app takes over

Building an app with all the modern best practices — code-splitting, offline support, server-rendered views with client-side hydration — is fiendishly complicated. SvelteKit does all the boring stuff for you so that you can get on with the creative part.

Getting started

The easiest way to start building a SvelteKit app is to run npm init:

npm init svelte@next sveltekit-magic

The above command will ask you some questions about how you'd like to set the template. Choose the 'SvelteKit demo app'. This comes with a Todo list application built-in. We'll make changes to the app, so the user needs to log in using Magic to access the todos.

cd sveltekit-magic
npm install
npm run dev

This will scaffold a new project in the sveltekit-magic directory, install its dependencies, and start a server on http://localhost:3000.

Open up http://localhost:3000 on a browser, and you should see something that looks like this...

{WIP} - This guide will not be using the Cookies, @hapi/iron or session with cookies as show in this Guide.

To read the full guide, please visit https://magic.link/posts/magic-svelte