npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kikiutils/nitro-session

v2.0.3

Published

Easy-to-use nitro session.

Downloads

236

Readme

@kikiutils/nitro-session

npm version npm downloads License

Easy-to-use nitro session.

Features

  • 🔄 Continuous session between requests using a cookie or header
  • 💾 Auto-save session
  • 📦 Store session data using a cookie, header, or unjs/unstorage drivers
  • 🔒 Optional strict IP validation to ensure session security
  • 🛠️ TypeScript support

Environment Requirements

  • ESM (ECMAScript Modules) only
  • Nitro version 2.6.x or higher
  • Node.js version 18 or higher

Installation

  1. Add dependency (example using pnpm).
pnpm add @kikiutils/nitro-session

You can also use yarn, npm, or bun to add the dependency.

  1. Create a server/plugins/session.ts file and add the following code:
import nitroSession from '@kikiutils/nitro-session';

export default defineNitroPlugin((nitroApp) => nitroSession(nitroApp, useRuntimeConfig().nitroSession));
  1. Create a server/utils/session.ts file and add the following code:
export * from '@kikiutils/nitro-session/runtime/utils';

[!IMPORTANT] If you encounter warning messages such as [unimport] failed to resolve ..., skip scanning during runtime, updating the unimport version to 3.9.0 or higher will resolve the issue. If updating is not possible, use the following code instead:

export {
    clearH3EventContextSession,
    deleteH3EventContextSessionStorageData,
    getH3EventContextSessionToken,
    popH3EventContextSession
} from '@kikiutils/nitro-session/runtime/utils';

However, if you use this method, you will need to manually update the files whenever new utils are added. Using wildcard exports (*) will automatically export all utils, so it's recommended to use the latest version of unimport to support wildcard exports.

  1. Create a session.d.ts file in the project folder and add the following code:
declare module '@kikiutils/nitro-session' {
    interface H3EventContextSession {
        // Define the session data here.
    }
}

export {};

That's it! You're ready to use sessions in your Nitro app. Check out the configuration and usage instructions below ✨.

Configuration

Configure using runtimeConfig in nitro.config.ts.

export default defineNitroConfig({
    // Configure options here
    runtimeConfig: { nitroSession: {} }
});

For detailed options, refer to the PluginOptions interface in this file.

When using this session module, there are two types of data involved:

  1. Stored Data: This refers to data such as user login information, login time, etc., which can be stored in memory or other specified storage.

  2. Data Token: This refers to the token used to retrieve the corresponding data after the frontend sends a request to the server. This token can be transmitted using cookie or header.

Stored Data

The available storage types are:

  • azure-app-configuration
  • azure-cosmos
  • azure-key-vault
  • azure-storage-blob
  • azure-storage-table
  • cloudflare-kv-binding
  • cloudflare-kv-http
  • cloudflare-r2-binding
  • cookie/header
  • fs
  • fs-lite
  • http
  • lru-cache
  • memory (default)
  • mongodb
  • netlify-blobs
  • planetscale
  • redis
  • vercel-kv

[!IMPORTANT] If the driver you are using is not cookie/header or memory, please visit here for additional dependencies and considerations.

When using cookie/header for storage, data will be encrypted and transmitted in requests based on the token type. In this case, no data is stored on the server. Please be aware of potential security risks such as interception, session hijacking, XSS, CSRF, and unauthorized access. Ensure that proper security measures are in place to protect your data.

Example configuration for using Redis as the data storage:

export default defineNitroConfig({
    runtimeConfig: {
        nitroSession: {
            storage: {
                data: {
                    driver: 'redis',
                    // Options for the corresponding driver
                    options: { url: 'redis://127.0.0.1:6379' }
                }
            }
        }
    }
});

Data Token

The available transmission types are:

  • cookie (default)
  • header

Example configuration for using header as the token transmission method:

export default defineNitroConfig({
    runtimeConfig: {
        nitroSession: {
            storage: {
                token: {
                    driver: 'header',
                    // Options for the corresponding method
                    options: {
                        name: 'session',
                        setName: 'set-session'
                    }
                }
            }
        }
    }
});

When using cookie, the browser will automatically handle the set-cookie in the response and include the cookie in subsequent requests (in most cases).

When using header, you need to handle it manually. Set the token as the value of the key specified by nitroSession.storage.token.options.name when sending a request.

If the response contains a header with the name specified by nitroSession.storage.token.options.setName, you need to save this value and include it as the token in subsequent requests.

The following is an example code using Axios and storing the token in sessionStorage:

import axios from 'axios';

const axiosInstance = axios.create();
axiosInstance.interceptors.request.use((request) => {
    request.headers.session = window.sessionStorage.getItem('session');
    return request;
});

axiosInstance.interceptors.response.use((response) => {
    const sessionToken = response.headers['set-session'];
    if (sessionToken !== undefined) sessionToken ? window.sessionStorage.setItem('session', sessionToken) : window.sessionStorage.removeItem('session');
    return response;
});

Usage

You can use event.context.session to access sessions.

The on-change package is used internally to detect changes to the session object. If no changes are detected, no data will be stored and no cookie/header will be set.

server/api/test.ts

export default defineEventHandler((event) => {
    event.context.session.account = 'account';
    event.context.session.username = 'name';
    // Remaining operations...
    return 'success';
});

server/middleware/auth.ts

export default defineEventHandler((event) => {
    const loginedUserId = event.context.session.userId;
    // Remaining operations...
});

[!IMPORTANT] The session can only store serializable data.

Persist session on error

[!IMPORTANT] This will replace the default Nitro error page.

Due to a bug in one or more of the packages (h3/hookable/nitro), to ensure that the session can still be properly handled after an error occurs during API processing, you need to modify the errorHandler setting in the nitro.config:

export default defineNitroConfig({ errorHandler: './error-handler' });

Contents of error-handler.ts without using send function:

export default () => {};

Contents of error-handler.ts using send function:

import { processResponseEvent } from '@kikiutils/nitro-session';
import type {
    H3Error,
    H3Event
} from 'h3';

export default async (_: H3Error, event: H3Event) => {
    await processResponseEvent(event);
    send(event, 'internal server error'); // Or other error message
};

Visit this page for more information about the error handler.

Runtime Utils

During runtime, the following utils are available for manipulating the session. Related comments and examples are provided in this file.

  • clearH3EventContextSession
  • deleteH3EventContextSessionStorageData
  • getH3EventContextSessionToken
  • popH3EventContextSession

License

MIT License