72
How to add Magic Link to a SvelteKit application
SvelteKit is a framework for building extremely high-performance web apps.
There are two basic concepts in SvelteKit:
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 overBuilding 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.
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...

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