An example SvelteKit app implementing a simple authentication system.

Overview

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

You might also like...

An Amazon Kendra REST API CDK example with an API Gateway, including authentication with AWS Cognito and AWS X-Ray Tracing

An Amazon Kendra REST API CDK example with an API Gateway, including authentication with AWS Cognito and AWS X-Ray Tracing

Amazon Kendra Web Service CDK Sample Amazon Kendra has a robust JSON API for use with the AWS SDK (software development kit), but does not expose endp

Nov 28, 2022

The Javascript library of choice for implementing commenting in your web app

The Javascript library of choice for implementing commenting in your web app

jquery-comments jquery-comments is a jQuery plugin for implementing an out-of-the-box commenting solution to any web application with an existing back

Dec 27, 2022

This is a blog built with sveltekit, tailwind and daisyUI, made to be used as my personal blog.

This is a blog built with sveltekit, tailwind and daisyUI, made to be used as my personal blog.

svelte-blogger This is a blog built with sveltekit, tailwind and daisyUI, made to be used as my personal blog. This app also use graphql and use markd

Jun 23, 2022

End-to-end typesafe APIs with tRPC.io in SvelteKit applications

✨ tRPC-SvelteKit End-to-end typesafe APIs with tRPC.io in SvelteKit applications. No code generation, run-time bloat, or build pipeline. ❤️ 🇺🇦 See b

Dec 29, 2022

Sveltekit + Tauri Template

Skitty Template for building SvelteKit + Tauri (Skitty) Warning This project is supposed to be used temporary only (until svelte-add tauri has finishe

Jul 25, 2022

Documentation integration for SvelteKit.

Documentation integration for SvelteKit.

KitDocs Documentation integration for SvelteKit. You can think of it as a VitePress alternative for Svelte. ✨ Features 📝 Vite plugin for transforming

Dec 28, 2022

A set of tools, helping you building efficient apps in a fast way. SvelteKit & GraphQL

A set of tools, helping you building efficient apps in a fast way. >> SvelteKit & GraphQL <<

KitQL KitQL, A set of tools, helping you building efficient apps in a fast way. 🌐 Infos Documentation: https://kitql.vercel.app/ Day by day progress,

Dec 27, 2022

Scaffold a full-stack SvelteKit application with tRPC and WindiCSS out of the box

create-sweet-app Interactive CLI to quickly set up an opinionated, full-stack, typesafe SvelteKit project. Inspired by the T3 Stack and create-t3-app

Dec 16, 2022

sveltekit + turborepo + histoire in a turborepo

sveltekit + turborepo + histoire in a turborepo

swyx's SvelteKit monorepo starter This is my starter for a monorepo with 2022 tech: SvelteKit Turborepo Histoire pnpm - brew install pnpm Demo Proof t

Nov 25, 2022
Comments
  • Using global writable store for session is insecure and leads to session data leak

    Using global writable store for session is insecure and leads to session data leak

    If a store is created in SSR, it will end up being a global store shared by all users. The issue is discussed here: https://github.com/sveltejs/kit/discussions/4339 Docs mention it, but only ambiguously: https://kit.svelte.dev/docs/load#shared-state

    How to reproduce

    Add a new page /leak/+page.svelte:

    <script lang="ts">
    	import { session } from "$lib/stores/session";
    	$: console.log($session);
    </script>
    
    {JSON.stringify($session)}
    
    • if another user is logged, the $session store leaks the data on SSR request

    How to fix

    • temporary solution is to wrap the store using Svelte's context API as suggested in https://github.com/sveltejs/kit/discussions/4339#discussioncomment-2372710

    See also

    • https://github.com/sveltejs/kit/issues/7105
    opened by liborvanek 1
  • Expired `auth_token` cookie doesn't require a new login

    Expired `auth_token` cookie doesn't require a new login

    I set auth_token cookie to expire in 1 second in routes/login/+page.server.ts. After a successful login, the cookie expires immediately. However, I can continue to use client side navigation to move around the app without getting prompted to re-login.

    Only after doing a hard refresh do I get prompted to login again.

    In routes/(authenticated)/+layout.ts, session_user continues to have a value so a 301 redirect to /login never throws.

    opened by weavdale 1
Owner
Dana Woodman
👨🏻‍💻 Senior full-stack software developer @parkingboss (Svelte, TypeScript, Node.js), ✈️ travel junkie and 🏕 outdoorsman.
Dana Woodman
The Frontend of Escobar's Inventory Management System, Employee Management System, Ordering System, and Income & Expense System

Usage Create an App # with npx $ npx create-nextron-app my-app --example with-javascript # with yarn $ yarn create nextron-app my-app --example with-

Viver Bungag 4 Jan 2, 2023
Perfect SvelteKit dark mode in 2 lines of code. Support System preference and any other theme with no flashing

This library is a port of next-theme for SvelteKit. All credit goes to pacocoursey and all next-themes contributors While usable, this library is stil

null 42 Sep 30, 2022
Venni backend - The backend of the Venni client apps implementing the credit card payments, matching algorithms, bank transfers, trip rating system, and more.

Cloud Functions Description This repository contains the cloud functions used in the Firebase backend of the Venni apps. Local Development Setup For t

Abrantes 1 Jan 3, 2022
Implementing various sorting algorithms in Typescript's type system

Sorta Cool I was on a 10 hour flight with no WiFi, and, bored out of my mind, I thought it would be fun to implement some sorting algorithms in the Ty

Neil Ramaswamy 7 Nov 10, 2022
We are creating a Library that would ensure developers do not reinvent the wheel anymore as far as Authentication is concerned. Developers can easily register and download authentication codes that suits their need at any point.

#AuthWiki Resource Product Documentation Figma Database Schema First Presentation Live Link API Documentation Individual Contributions User Activity U

Zuri Training 17 Dec 2, 2022
Simple starter for SvelteKit with Tailwind CSS already set up and ready to go.

Get Started Simple Sveltekit boilerplate with Tailwind CSS already set up. Just run npm install to download the dependencies. Info I use Tailwind in p

Jordan 16 Dec 23, 2022
A simple handle tap and hold action for Svelte/SvelteKit.

Svelte Tap Hold Minimalistic tap and hold component for Svelte/SvelteKit, see demo here. Installation // Using Yarn to install yarn add --dev svelte-t

Binsar Dwi Jasuma 9 Dec 8, 2022
Example auto-generated OpenAPI client library and an accompanying example Angular app.

To utilize this demo Head into petstore_frontend\petes_pets Run npm install Go to frontend_client_lib\out Run npm install Head back into petstore_fron

Alan Gross 1 Jan 21, 2022
Next.js example using Hellō for authentication

Example application using Hellō and iron-session ?? Online demo at https://next-with-hello.vercel.app This example creates an authentication system th

Thomas Smith 3 May 20, 2022
An example on how to use Solana Wallet Adapter as a Web Authentication Method.

Solana Wallet Auth: A FullStack example This example uses Solana's wallet adapter to sign messages and verifies their signatures on the backend, allow

Kevin Rodríguez 19 Dec 20, 2022