Guides - Authentication with Express

This guide assumes that you already have installed Liveblocks into your project and that you’re already familiar with Express.

Install the Liveblocks package

Run the following command to install Liveblocks package:

npm install @liveblocks/node

@liveblocks/node is used from the backend to setup the authentication endpoint.

Setup authentication endpoint

Users can only interact with rooms they have access to. You can configure permission access by creating a REST endpoint on your express server. You will implement your own security and define if the current user has access to a specific room.

Create a POST endpoint that will read the room from the JSON body. Ensure that the caller of this endpoint is a valid user by validating the cookies or authentication headers and that it has access to the requested room. Then use authorize to generate a token and return the body as a response.

Note that UserMeta represents static/readonly metadata on each User, as provided by your own custom auth backend (if used). Useful for data that will not change during a session, like a User's name or avatar, eg:

type UserMeta = {  id: string; // Accessible through `user.id`
  // Accessible through `user.info`  info: {    name: string;    color: string;  };};

const express = require("express");const { authorize } = require("@liveblocks/node");
// Replace this key with your secret key provided at// https://liveblocks.io/dashboard/projects/{projectId}/apikeysconst secret = "sk_prod_xxxxxxxxxxxxxxxxxxxxxxxx";
const app = express();
app.use(express.json());
app.post("/api/auth", (req, res) => {  /**   * Implement your own security here.   *   * It's your responsibility to ensure that the caller of this endpoint   * is a valid user by validating the cookies or authentication headers   * and that it has access to the requested room.   */  authorize({    room: req.body.room,    secret,    userId: "123", // Optional    groupIds: ["456"], // Optional    userInfo: {      // Optional, corresponds to the UserMeta[info] type defined in liveblocks.config.ts      name: "Ada Lovelace",      color: "red"    },  })    .then((authResponse) => {      res.send(authResponse.body);    })    .catch((er) => {      res.status(403).end();    });});

The userId used in the authorize function corresponds to userId used in our APIs when setting permissions (e.g. in create room). You can use the following example to use data from userId and userInfoon the front end.

const self = useSelf();
// "123"console.log(self.id);
// "red"console.log(self.info.color);
// ...}

Here is a diagram that shows how things work behind the scenes.

Connect to Liveblocks

To connect to Liveblocks, you need to create a Liveblocks client with [createClient][] from the front-end and set the authEndpoint option based on the path of the endpoint created earlier.

import { createClient } from "@liveblocks/client";
// Create a Liveblocks clientconst client = createClient({  authEndpoint: "/api/auth",});

Liveblocks should now be integrated with your product!