Skip to content

Latest commit

 

History

History
72 lines (46 loc) · 2.07 KB

README.md

File metadata and controls

72 lines (46 loc) · 2.07 KB
Raw

SvelteKit Auth Example

image

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