next-app-session
所属分类：系统/网络安全
开发工具：TypeScript
文件大小：0KB
下载次数：0
上传日期：2023-07-22 14:09:16
上 传 者：
sh-1993
说明： Next.js应用程序路由器安全服务器端会话库，
(A Next.js App router secure server-side session library,)
文件列表:
.eslintrc.json (604, 2023-10-30)
.prettierrc (216, 2023-10-30)
LICENSE (1103, 2023-10-30)
dist/ (0, 2023-10-30)
dist/index.cjs (5061, 2023-10-30)
dist/index.cjs.map (90, 2023-10-30)
dist/index.d.ts (193, 2023-10-30)
dist/index.esm.js (83, 2023-10-30)
dist/index.esm.js.map (93, 2023-10-30)
dist/index.modern.js (4933, 2023-10-30)
dist/index.modern.js.map (96, 2023-10-30)
dist/index.umd.js (5373, 2023-10-30)
dist/index.umd.js.map (93, 2023-10-30)
dist/memory.d.ts (396, 2023-10-30)
dist/session.d.ts (1210, 2023-10-30)
dist/types.d.ts (1934, 2023-10-30)
dist/utils.d.ts (101, 2023-10-30)
example/ (0, 2023-10-30)
example/.env (26, 2023-10-30)
example/app/ (0, 2023-10-30)
example/app/api/ (0, 2023-10-30)
example/app/api/increment/ (0, 2023-10-30)
example/app/api/increment/route.ts (364, 2023-10-30)
example/app/api/update/ (0, 2023-10-30)
example/app/api/update/route.ts (274, 2023-10-30)
example/app/children/ (0, 2023-10-30)
example/app/children/SessionCounter.tsx (1140, 2023-10-30)
example/app/children/SessionStringPreview.tsx (1555, 2023-10-30)
example/app/favicon.ico (25931, 2023-10-30)
example/app/globals.css (2206, 2023-10-30)
example/app/layout.tsx (461, 2023-10-30)
example/app/page.module.css (1418, 2023-10-30)
example/app/page.tsx (1388, 2023-10-30)
example/docker-compose.yml (89, 2023-10-30)
example/lib/ (0, 2023-10-30)
example/lib/session.ts (690, 2023-10-30)
... ...
# Next-App-Session
 
This package is built to work with Next.js v13 App router and Server Components & Actions, additionally it also supports Pages router and middleware.
This Next.js package enables secure storage of sessions in a server side store like `express-session` or `redis` or others, the package uses the next.js dynamic function [cookies()](https://nextjs.org/docs/app/api-reference/functions/cookies) to store the session id on the client side and that session id is then associated with user data on the server store.
Package was inspired by [express-session](https://www.npmjs.com/package/express-session) & [next-session](https://www.npmjs.com/package/next-session).
## Setup
1. Install package in your Next.js project
```
npm i next-app-session
```
2. Create an initialisation file, for example: `lib/session.ts`, and write an exportable session variable like follows:
```typescript
import nextAppSession from 'next-app-session';
// Your session data type
type MySessionData = {
access_token?: string;
counter?: number;
}
// Setup the config for your session and cookie
export const session = nextAppSession({
// Options
name: 'SID',
secret: 'secret goes here' ,
...
});
```
3. You can now use `session()` or `session(req)` in your App router & Page router i that order
#### App router: Route Handler/Server Components/Server Actions
```typescript
await session().get()
```
#### Pages router/middleware:
```typescript
await session(req).get() // where req is the IncomingMessage/NextApiRequest object
```
> Note: in App router, `session` can only read data in [Server Components](https://nextjs.org/docs/getting-started/react-essentials) while it can read+write data in [Route Handler](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) and [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions). It follows the same usage rules as the [cookies() dynamic function](https://nextjs.org/docs/app/api-reference/functions/cookies)
**A Router handler usage example:**
```typescript
// Example for route handler
import { session } from '../lib/session'; //We import it from the initialisation file we created earlier
// Increment counter
export async function POST(request: Request) {
// Read counter value froms session
const current = await session().get('counter');
//Increment value or assign 1 if no value exists
const newValue = current ? Number(current) + 1 : 1;
// Update counter session
await session().set('counter', newValue);
}
```
**Page router usage example:**
```typescript
// Example for route handler
import { session } from '../lib/session'; //We import it from the initialisation file we created earlier
// Serve session as props
export async function getServerSideProps({ req }) {
// Get data from session
const data = await session(req).all();
// Pass data to the page via props
return { props: { ...data } };
}
```
---
## Options
| Property | Description | Default |
|:-----------|:----------|:----------|
| **name** | Name of the client cookie that holds the session ID |'sid' |
| **secret** | This is the secret used to sign the session cookie which will hold the user session ID. If left empty the session ID is not signed/encoded | |
| **store** | The session store instance, defaults to a new `MemoryStore` instance which is for dev purposes only, other production compatible stores can be used, more on how to use them below | new MemoryStore() |
| **genid** | This callback can be used to override the unique session id creation allowing you to set your own, By default nanoid package is used to generate new session IDs | nanoid |
| **cookie** | An object can be passed here to control the configuration of the client cookie | |
---
## Methods
#### `await session().get('key')`
This will fetch the session and return the stored property that matches the key passed to it.
#### `await session().all()`
This will fetch all session data
#### `await session().set('key', value)`
This will set the data with the property key passed
#### `await session().setAll(object)`
This will set all session data
> **Notice:** The session set methods work the same way as the next.js cookies dynamic function, it will only work in the context of Route Handlers & Server Actions. while the get methods will additionally work on the Server Components.
---
## Stores
As we mentioned before by default the package will use `MemoryStore`, which is an express session singleton that lasts until the node process is killed, because of that `MemoryStore` is not recommended for production use. and instead you should consider using other stores such as Redis or a database service.
### How to use a Redis store
1. First setup a redis instance, for exmaple using docker you can add this to your `docker-compose.yml` file
```yaml
version: '3.8'
services:
redis:
image: redis:latest
ports:
- '6379:6379'
```
2. Run the docker container, in your terminal naviaget to your project and run:
```
docker-compose up
```
3. Install redis packages in your project:
```
npm i ioredis connect-redis
```
3. Update the session config so its like follows with the port you're redis instance is running on:
```typescript
import nextAppSession, {promisifyStore} from 'next-app-session';
import Redis from 'ioredis';
import RedisStoreFactory from 'connect-redis';
export const session = nextAppSession({
name: 'EXAMPLE_SID',
secret: 'secret goes here' ,
// Assign Redis store with connection details
store: promisifyStore(
new RedisStore({
client: new Redis({
host: 'localhost',
port: 6381
}),
prefix: 'exampleapp:'
})
)
});
```
### Other compatible stores
Any [express session store package](https://github.com/expressjs/session/tree/master#compatible-session-stores) should be supported as long as they're passed through `promisifyStore` utility function
## Example
a Next.js demo app is located under `./example` of this repo.
## Contribution
Feedback, Issue reports, suggestions and contributions are welcome and appreciated.
[https://github.com/sweetscript/next-app-session/issues](https://github.com/sweetscript/next-app-session/issues)
[https://github.com/sweetscript/next-app-session/discussions](https://github.com/sweetscript/next-app-session/discussions)
[majid@sweetscript.com](mailto:majid@sweetscript.com)
近期下载者：
相关文件：
收藏者：