Add Session Helper Function

Set up a session helper function to assist in retrieving user sessions.

In this step, you'll create a helper function to access your user's session data in API routes and server-side rendering functions.

Configure Session Options

First, you'll need to configure a SessionOptions object in your src/wristband.ts file. The SessionOptions object allows you to control how the session cookie is created and managed. As part of the configuration, you'll need to provide a secret at least 32 characters long. This secret will be used to encrypt the session data stored within the cookie. To generate the secret, you can use: https://1password.com/password-generator.

⚙️
Disabling Secure Session Cookies in Local Development
By default, session cookies are marked as secure, meaning they are only sent over HTTPS connections. Most browsers make an exception for localhost and allow secure cookies to be sent over HTTP (e.g., http://localhost). However, some browsers, such as Safari, enforce stricter rules and never send secure cookies over HTTP, even for localhost.
If you need to disable the secure flag for local development, set secure: false in your session options. However, be sure to restore secure: true in production to protect session data.

// src/wristband.ts

import { createWristbandAuth, SessionOptions } from '@wristband/nextjs-auth';

export const wristbandAuth = createWristbandAuth({
  clientId: '<WRISTBAND_CLIENT_ID>',
  clientSecret: '<WRISTBAND_CLIENT_SECRET>',
  wristbandApplicationVanityDomain: '<WRISTBAND_APPLICATION_VANITY_DOMAIN>',
});

// NEW: Configure session options for encrypted, cookie-based sessions.
const sessionOptions: SessionOptions = {
  secrets: '<your-generated-secret>'
};

// src/wristband.ts

import { createWristbandAuth, SessionOptions } from '@wristband/nextjs-auth';

export const wristbandAuth = createWristbandAuth({
  clientId: '<WRISTBAND_CLIENT_ID>',
  clientSecret: '<WRISTBAND_CLIENT_SECRET>',
  wristbandApplicationVanityDomain: '<WRISTBAND_APPLICATION_VANITY_DOMAIN>',
});

/* NEW: Configure session options for encrypted, cookie-based sessions. */
const sessionOptions: SessionOptions = {
  secrets: '<your-generated-secret>',
  secure: false,
};

Create Get Session Helper Function

Next, create a getSession() helper function in src/wristband.ts as shown below. This function can be used to access user session data in your Pages Router API routes and server-side rendering (SSR) functions.

// src/wristband.ts

import * as http from 'http';
import { createWristbandAuth, getPagesRouterSession, SessionOptions } from '@wristband/nextjs-auth';

export const wristbandAuth = createWristbandAuth({
  clientId: '<WRISTBAND_CLIENT_ID>',
  clientSecret: '<WRISTBAND_CLIENT_SECRET>',
  wristbandApplicationVanityDomain: '<WRISTBAND_APPLICATION_VANITY_DOMAIN>',
});

const sessionOptions: SessionOptions = {
  secrets: '<your-generated-secret>'
};

// NEW: Helper function that can be used to retrieve user session 
// data in API routes and SSR functions.
export function getSession(req: http.IncomingMessage, res: http.ServerResponse) {
  return getPagesRouterSession(req, res, sessionOptions);
}

Updated about 10 hours ago

What’s Next

Next, you'll use the Wristband SDK to create the necessary authentication endpoints in your Next.js server.

Add Auth Endpoints