---
meta:
title: "Set up access token permissions with Next.js"
parentTitle: "Authentication"
description: "Learn how to setup access token permissions with Next.js."
---
Follow the following steps to start configure your authentication endpoint and
start building your own security logic in Next.js’ `/app` directory.
## Quickstart
Install the `liveblocks/node` package
```bash
npm install @liveblocks/node
```
Add your project’s secret key
Create a new `.env.local` file and add your Liveblocks secret key from the [dashboard](/dashboard/apikeys).
```env file=".env.local"
LIVEBLOCKS_SECRET_KEY="{{SECRET_KEY}}"
```
Set up authentication endpoint
Users need permission to interact with rooms, and you can
permit access in an `api/liveblocks-auth` endpoint by
creating the following `app/api/liveblocks-auth/route.ts`
file. In here you can implement your security and define
the rooms that your user can enter.
With access tokens, you should always use a [naming pattern](/docs/api-reference/authentication/access-token#permissions)
for your room IDs, as this enables you to easily allow
access to a range of rooms at once. In the code snippet below, we’re using a naming pattern and wildcard `*`
to give the user access to every room in their organization, and every room in their group.
```ts file="app/api/liveblocks-auth/route.ts"
import { Liveblocks } from "@liveblocks/node";
const liveblocks = new Liveblocks({
secret: process.env.LIVEBLOCKS_SECRET_KEY!,
});
export async function POST(request: Request) {
// Get the current user from your database
const user = __getUserFromDB__(request);
// Start an auth session inside your endpoint
const session = liveblocks.prepareSession(
user.id,
{ userInfo: user.metadata } // Optional
);
// Use a naming pattern to allow access to rooms with wildcards
// Giving the user read access on their org, and write access on their group
session.allow(`${user.organization}:*`, ["*:read"]);
session.allow(`${user.organization}:${user.group}:*`, ["*:write"]);
// Authorize the user and return the result
const { status, body } = await session.authorize();
return new Response(body, { status });
}
```
Read
[access token permission](/docs/api-reference/authentication/access-token#permissions)
to learn more about naming rooms and granting permissions with wildcards.
Note that if a naming pattern doesn’t work for every room in your application, you can
[grant access to individual rooms too](/docs/guides/how-to-grant-access-to-individual-rooms-with-access-tokens).
Set up the client
On the front end, you can now replace the `publicApiKey`
prop on [`LiveblocksProvider`](/docs/api-reference/liveblocks-react#LiveblocksProvider)
with `authEndpoint` pointing to the endpoint you just created.
```tsx
```
If you need to pass custom headers or data to your endpoint, you can
use
[authEndpoint as a callback](/docs/api-reference/liveblocks-react#LiveblocksProviderCallback)
instead.
```tsx title="Pass custom headers" isCollapsed isCollapsable
{
// Passing custom headers and body to your endpoint
const headers = {
// Custom headers
// ...
"Content-Type": "application/json",
};
const body = JSON.stringify({
// Custom body
// ...
room,
});
const response = await fetch("/api/liveblocks-auth", {
method: "POST",
headers,
body,
});
return await response.json();
}}
/>
```
Attach metadata to users
Optionally, you can attach static metadata to each user, which will
be accessible in your app. First you need to define the types in
your config file, under `UserMeta["info"]`.
```ts file="liveblocks.config.ts" highlight="7-11"
declare global
interface Liveblocks {
UserMeta: {
id: string;
// Example, use any JSON-compatible data in your metadata
info: {
name: string;
avatar: string;
colors: string[];
}
}
// Other type definitions
// ...
}
}
```
When authenticating, you can then pass the user’s metadata to
`prepareSession` in the endpoint we’ve just created.
```ts file="app/api/liveblocks-auth/route.ts" highlight="8-12"
// Get the current user from your database
const user = __getUserFromDB__(request);
// Start an auth session inside your endpoint
const session = liveblocks.prepareSession(
user.id,
{
userInfo: {
name: user.name,
avatar: user.avatarUrl,
colors: user.colorArray,
}
}
);
```
User metadata has now been set! You can access this information in your app through
[`useSelf`](/docs/api-reference/liveblocks-react#useSelf).
```tsx highlight="4"
export { useSelf } from "@liveblocks/react/suspense";
function Component() {
const { name, avatar, colors } = useSelf((me) => me.info);
}
```
Bear in mind that if you’re using the [default Comments components](/docs/api-reference/liveblocks-react-ui#Components),
you must specify a `name` and `avatar` in `userInfo`.
## More information
Both `userId` and `userInfo` can then be used in your React application as such:
```ts
const self = useSelf();
console.log(self.id);
console.log(self.info);
```
---
For an overview of all available documentation, see [/llms.txt](/llms.txt).