Rooms - Authentication with Firebase

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

Quickstart

1. Install the @liveblocks/node package

   Let’s first install the @liveblocks/node package in your Firebase functions project.

   $npm install @liveblocks/node

2. Setup authentication endpoint

   Create a new Firebase callable function as shown below. This is where you will implement your security and define if the current user has access to a specific room.

   const functions = require("firebase-functions");const { authorize } = require("@liveblocks/node");
   exports.auth = functions.https.onCall((data, context) => {  /**   * 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.   */  return authorize({    room: data.room,    secret: "sk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",    userId: "123",    groupIds: ["456"], // Optional    userInfo: {      // Optional, corresponds to the UserMeta[info] info defined in liveblocks.config.ts      name: "Ada Lovelace",      color: "red",    },  }).then((authResult) => {    if (authResult.status !== 200) {      throw new functions.https.HttpsError(authResult.status, authResult.body);    }    return JSON.parse(authResult.body);  });});

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";import firebase from "firebase";import "firebase/functions";
   firebase.initializeApp({  /* Firebase config */});
   const auth = firebase.functions().httpsCallable("auth");
   // Create a Liveblocks clientconst client = createClient({  authEndpoint: async (room) => (await auth({ room })).data,});

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);