DEV Community

loading...
Cover image for How to add Magic Link to a SvelteKit application
Magic Labs

How to add Magic Link to a SvelteKit application

Mohammad Shahbaz Alam
Iā€™m a Full Stack Developer, Developer Advocate @ Magic, GDG Ranchi Organizer, and Mozilla Representative.
惻2 min read

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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...

SvelteKit Welcome Page

{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

Discussion (0)