Guides / Authentication - Authentication with Firebase

This guide assumes that you already have installed Liveblocks into your project or React guide and that you're already familiar with Firebase functions.

Users can only interact with rooms they have access to. You can control permission access from an http endpoint by creating a Firebase function.

To do that, let’s first install @liveblocks/node package in your Firebase functions project.

npm install @liveblocks/node

Next, 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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_live_xxxxxxxxxxxxxxxxxxxxxxxx"
}).then((authResult) => {
if (authResult.status !== 200) {
throw new functions.https.HttpsError(authResult.status, authResult.body);
}
return JSON.parse(authResult.body);
});
});

Then, deploy your function with firebase deploy --only functions:auth.

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

Auth diagram

To connect to Liveblocks, you simply need to create a Liveblocks client with createClient from the front-end and set the authEndpoint based on the previously created "callable function":

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 client
const client = createClient({
authEndpoint: async room => (await auth({ room })).data
})

Liveblocks should now be integrated with your product!

Explore our examples below to see what you can do with Liveblocks.