Authentication - Set up ID token permissions 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. Set up 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 { Liveblocks } = require("@liveblocks/node");
   const liveblocks = new Liveblocks({  secret: "sk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});
   exports.auth = functions.https.onCall(async (data, context) => {  // Get the current user from your database  const user = __getUserFromDB__(data);
     // Identify the user and return the result  const { status, body } = await liveblocks.identifyUser(    {      userId: user.id,      groupIds, // Optional    },    { userInfo: user.metadata },  );
     return JSON.parse(body);});

3. Set up 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("liveblocks-auth");
   // Create a Liveblocks clientconst client = createClient({  authEndpoint: async (room) => (await auth({ room })).data,});

4. Set permission accesses to a room

   A room can have defaultAccesses, usersAccesses, and groupsAccesses defined. Permissions are then checked when users try to connect to a room. For security purposes, the room permissions can only be set on the back-end through a REST API. For instance, you can use the create room API to create a new room with read public access levels while giving write access to specific users and groups.

   fetch("https://api.liveblocks.io/v2/rooms", {  method: "POST",  body: JSON.stringify({    id: "roomId",    defaultAccesses: ["room:read"],    usersAccesses: {      "userId": ["room:write"],    },    groupsAccesses: {      "groupId": ["room:write"],    },  }),});

More information

Both userId and userInfo can then be used in your JavaScript application as such:

const self = room.getSelf(); // or useSelf() in Reactconsole.log(self.id);console.log(self.info);