Installation

Prerequisites

1. Next.js 12.2 or newer
2. An existing Next.js application. If you don’t have one, create a new application.

Installing the NextJS Enforcer

Integrate the HUMAN Enforcer into your NextJS project by setting it as a middleware in your project.

While only one middleware.ts file is supported per project, you can still organize your middleware logic modularly. Placing HUMAN Enforcer middleware first, ensures that all incoming requests are evaluated for security threats before any other processing occurs. If you have additional middleware functions, use the onPass and onResponse custom functions.

Installation

1. Install the HUMAN NextJS Enforcer NPM package into your existing NextJS project.

1
npm install --save perimeterx-nextjs

Integrate the HUMAN Enforcer into your NextJS project by setting the it as a middleware in your project.

1. In the root directory of your project, create a middleware.ts (or middleware.js if you’re using JavaScript) file to configure and set up Human middleware.

2. Integrate the HUMAN Enforcer into your NextJS project by setting the it as a middleware in your project by Initiate a configuration object contains px_app_id - Your Application ID, px_cookie_secret - Your Cookie Encryption Key, px_auth_token - Auth Token, import and use the perimeterx function.
   .

1
import { perimeterx } from "perimeterx-nextjs";
2
import { PerimeterXConfigurations } from "perimeterx-nextjs";
3
4
// define HUMAN configuration
5
const pxConfig: PerimeterXConfigurations = {
6
    px_app_id: '<APP_ID>',
7
    px_cookie_secret: '<COOKIE_SECRET>',
8
    px_auth_token: '<AUTH_TOKEN>',
9
}
10
export const middleware = perimeterx(pxConfig)

If you already use middleware in your project

Add implementation to our built it onRespnose and onPass custom functions to your configuration object, in order to execute your own middleware/logic after HUMAN verifies the request.

OnPass
Define what to do when requests pass HUMAN enforcement.

• Parameters
  • request: NextRequest
• Returns a NextResponse object (or a Promise resolving to a boolean)

1
const pxConfig: PerimeterXConfigurations = {
2
    px_app_id: '<APP_ID>',
3
    px_cookie_secret: '<COOKIE_SECRET>',
4
    px_auth_token: '<AUTH_TOKEN>',
5
    onPass: (request: NextRequest) => {
6
        const response = NextResponse.next();
7
        response.headers.set('test-header', 'test');
8
9
        // Return the customized response
10
        return response;
11
    },
12
  // ...
13
}
14
15
export const middleware = perimeterx(pxConfig)

onResponse
This function allows modification of the response when Human Security decides to return custom response for example in case of block, static resources, etc…

• Parameters
  • request: NextRequest
  • response: NextResponse
• Returns a NextResponse object (or a Promise resolving to a boolean)

1
const config: PerimeterXConfigurations = {
2
    px_app_id: '<APP_ID>',
3
    px_cookie_secret: '<COOKIE_SECRET>',
4
    px_auth_token: '<AUTH_TOKEN>',
5
    onResponse: (request: NextRequest, response: Response) => { 
6
        const nextResponse = NextResponse.next();
7
        nextResponse.headers.set('X-PX-Status', response.headers.get('test'));
8
9
        // Return the customized response
10
        return nextResponse;
11
    },
12
    // ...
13
}
14
15
export const middleware = perimeterx(pxConfig)