Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/razshare/sveltekit-server-session
Server sessions made easy with SvelteKit
https://github.com/razshare/sveltekit-server-session
session session-management sveltekit
Last synced: about 1 month ago
JSON representation
Server sessions made easy with SvelteKit
- Host: GitHub
- URL: https://github.com/razshare/sveltekit-server-session
- Owner: razshare
- License: mit
- Created: 2024-03-31T17:50:25.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-04-26T20:23:13.000Z (8 months ago)
- Last Synced: 2024-05-28T13:28:34.831Z (7 months ago)
- Topics: session, session-management, sveltekit
- Language: JavaScript
- Homepage:
- Size: 260 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SvelteKit Server Session
This library provides an easy way to start, serve and modify server sessions.
Install with:
```sh
npm i -D sveltekit-server-session
```
# Usage
1. Open your `src/app.d.ts` file and define your _session_ key under `interface Locals`.
```ts
// See https://kit.svelte.dev/docs/types#app
import type { Session } from 'sveltekit-server-session';
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
interface Locals {
// Add type hints to "locals".
session: Session;
}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};
```
This will give you proper type hints when you access your `locals` property.
1. Create a new `src/hooks.server.js` and start the session in your `handle` function.
```js
// src/hooks.server.js
import { session } from 'sveltekit-server-session';
/**
* @type {import("@sveltejs/kit").Handle}
*/
export async function handle({ event, resolve }) {
// Start the session.
const [ sessionLocal, error ] = await session.start({
cookies: event.cookies,
})
// Check for errors.
if (error) {
return new Response(error.message, { status: 500 })
}
// Save session to `locals`.
event.locals.session = sessionLocal
// Resolve the sveltekit response.
const response = await resolve(event)
// Adding required headers to the response.
for (const [key, value] of sessionLocal.response().headers) {
response.headers.set(key, value)
}
return response
}
```
This will make sure every api request has access to the session.
1. Create an api endpoint that updates the session.
```js
// src/routes/session/quote/update/+server.js
export async function PUT({ locals, request }) {
// Get the session data and response function.
const { data, response } = locals.session
// Update the "quote".
data.set('quote', await request.text())
// Respond with the new "quote".
return response(data.get('quote'))
}
```
1. Retrieve the session and load it into the svelte page.
```js
// src/routes/+page.server.svelte
/**
* @type {import("./$types").PageServerLoad}
*/
export function load({ locals }) {
// Get the session data.
const { data } = locals.session
if (!data.has('quote')) {
// Set a default "quote".
data.set('quote', 'initial quote')
}
return {
// Load the "quote" into the page.
quote: data.get('quote'),
}
}
```
1. Create a svelte page.
```svelte
// Load session data.
/** @type {import('./$types').PageData} */
export let data
let sending = false
async function set() {
sending = true
// Update the session.
await fetch('/session/quote/update', { method: 'PUT', body: data.quote })
sending = false
}
Save
```
# Customization
Every single session related operation like validation, creation, update, deletion and so on, is described by `SessionInterface`.
You can use `session.setOperations()` to overwrite these operations by providing your own `SessionInterface` implementation
```js
session.setOperations({
async exists(id) {
return ok(map.has(id))
},
async isValid(id) {
const session = map.get(id)
if (!session) {
return ok(false)
}
return ok(session.getRemainingSeconds() > 0)
},
async has(id) {
return ok(map.has(id))
},
async get(id) {
return ok(map.get(id))
},
async set(id, session) {
map.set(id, session)
return ok()
},
async delete(id) {
map.delete(id)
return ok()
},
})
```
This is a simple in memory session implementation, but the sky is the limit, you could even fetch and persist sessions to a remote database.
# Don't Preload
SvelteKit comes with preload features baked in, however this feature may cause some inconsistent behavior when dealing with sessions.
Consider the following use case,
1. Let's say I want to modify my session in some way.
2. Then I want to destroy my session, but the act of destroying it takes a while.
3. In the meantime, by mistake, I hover over some link that preloads the previous page, with the old state.
4. Then the session is finally destroyed, in this order.
Well as you can see, when I navigate back to that page, the session state is not updated, because according to SvelteKit it has already preloaded it, and we're good to go.
Which is obviously wrong.
To fix this you need to disable preloading.
Navigate to your `src/app.html` file and disable preloading by settings `data-sveltekit-preload-data` to `false` on your `body` element.
```html
%sveltekit.head%
%sveltekit.body%
```
You could technically disable preloading for specific cases and avoid the issue in that way, but at some point your whole application will be filled with links that point to some page that depends on the server session.\
It's just simply not worth the headache.
> [!NOTE]
> Obviously you can still enable preload for resources like assets by manually adding
> the `data-sveltekit-preload-data="hover"` attribute to specific elements in your page.
# Complete Example
**You can find a [complete example leveraging the recommended usage here](https://github.com/tncrazvan/sveltekit-server-session-example).**
> [!NOTE]
> Remember to run your SvelteKit server dev at least
> once to properly generate your glue types.
> [!NOTE]
> Sessions are only directly available under `*.server.js` and `*.server.ts` files.\
> Sessions are meant to be private data, so they will never be directly available [under universal files](https://kit.svelte.dev/docs/load#universal-vs-server) like `+page.js`, for example.