SvelteKit Auth Example

An example SvelteKit app implementing a variety of authentication backends

View the demo

NOTE: this is very much a work in progress!

This project is designed as a sample implementation reference for getting authentication setup using SvelteKit. At this stage, I'd recommend just using it as something to refer to when building out your own app.

Tools:

• SvelteKit
• TypeScript
• TailwindCSS
• DaisyUI for basic UI components
• svelte-fa for FontAwesome icons
• neverthrow for elegantly handling exceptions

Features:

• Form actions to login and signup
• Store the users's auth token in a cookie
• Fetch the user in the handle hook in hooks.server
• Implementation of a basic session store
• Use route (groups) to protect pages
• Authenticate API endpoints via an auth token (Authorization: Bearer <TOKEN> header)
• Log out

Setup

npm install

Development

npm run dev

# Run with debug logging:
DEBUG="app:*" npm run dev

To debug in the browser, open up the Console in DevTools and type:

localStorage.debug = "app:*";

Using auth adapters

This project is built in a way to abstract the authentication layer so that you can pick and choose which type of auth you want to use.

Right now, we support the following auth adapters:

• cookie - Stores users and the auth token in a cookie. The is purely for demo purposes as it means we don't need any backend. You should NOT use this in production.
• pocketbase - Uses PocketBase as the backend. All you need to do is follow their setup guide and then run ./pocketbase serve and you should be up and running.

You can enable the adapter you want by commenting out the adapter you want in src/lib/auth/index.ts. Make sure all other adapters are commented out.

Then just configure your adapter backend and run the dev server!

License

MIT

Credits

Copyright Dana Woodman 2022