Rooms - Authentication with SvelteKit

Follow the following steps to start configure your authentication endpoint and start building your own security logic.

Quickstart

1. Install the @liveblocks/node package

   $npm install @liveblocks/node

2. Setup authentication endpoint

   Users can only interact with rooms they have access to. You can configure permission access in an api/auth endpoint by creating the src/routes/api/auth/+server.ts file with the following code. This is where you will implement your security and define if the current user has access to a specific room.

   src/routes/api/auth/+server.ts

   import { type RequestEvent } from "@sveltejs/kit";import { authorize } from "@liveblocks/node";
   const secret = "sk_prod_xxxxxxxxxxxxxxxxxxxxxxxx";
   export async function POST({ request }: RequestEvent) {  /**   * 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.   */  const { room } = await request.json();
     const result = await authorize({    room,    secret,    userId: "123",    groupIds: ["456"], // Optional    userInfo: {      // Optional, corresponds to the UserMeta[info] type defined in liveblocks.config.ts      name: "Ada Lovelace",      color: "red",    },  });
     return new Response(result.body, { status: response.status });}

3. Setup the client

   On the front-end, you can now replace the publicApiKey option with authEndpoint pointing to the endpoint you just created.

   import { createClient } from "@liveblocks/client";
   const client = createClient({  authEndpoint: "/api/auth",});

More information

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 userInfo on the front-end.

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