---
updatedAt: 2026-10-13T19:06:23.000Z
agentTools:
  projectIndex: https://docs.wristband.dev/llms.txt
---

# Install Auth SDK

Learn how to configure the Wristband SDK for your Next.js application.

## Installation

Install the Wristband Auth SDK using your preferred package manager CLI:

```shell NPM
npm install @wristband/nextjs-auth
```
```shell YARN
yarn add @wristband/nextjs-auth
```
```shell PNPM
pnpm add @wristband/nextjs-auth
```

***

## Configuration

### Prerequisites

Before you can configure the SDK, you'll need to make sure you have the following values:

* WRISTBAND\_APPLICATION\_VANITY\_DOMAIN
* WRISTBAND\_CLIENT\_ID
* WRISTBAND\_CLIENT\_SECRET

If you went through the [Set Up a Wristband Application](https://docs.wristband.dev/docs/quick-start-create-a-wristband-application) guide, you should have been presented with these three values after the application was provisioned. If you don't have the above values on hand, you can retrieve them from the Wristband dashboard by following the steps in this [guide](https://docs.wristband.dev/docs/quick-start-create-a-wristband-application#manually-retrieving-sdk-configuration-values).

### Configuring the SDK

Create an instance of `WristbandAuth` in the source root directory of your Next.js project (e.g.`src/wristband.ts`).  Update the configuration properties with the values for your application.

<Callout icon="far fa-circle-info" theme="info">
  ### Disabling Secure Cookies in Local Development

  By default, WristbandAuth creates secure cookies (for tracking login state), 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 cookies for local development, set `dangerouslyDisableSecureCookies: true` in the config properties. However, be sure to re-enable secure cookies before deploying to production.
</Callout>

```typescript Wristband Auth Config With Secure Cookies
// src/wristband.ts

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

export const wristbandAuth = createWristbandAuth({
  clientId: '<WRISTBAND_CLIENT_ID>',
  clientSecret: '<WRISTBAND_CLIENT_SECRET>',
  wristbandApplicationVanityDomain: '<WRISTBAND_APPLICATION_VANITY_DOMAIN>',
});
```
```typescript Wristband Auth Config With Secure Cookies Disabled
// src/wristband.ts

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

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

<br />

<HTMLBlock>{`
<style>
.UpdatedAt {
  display: none;
}
</style>
`}</HTMLBlock>