Guides / Authentication - Authentication with Nuxt.js

This guide assumes that you already have installed Liveblocks into your project and that you're already familiar with Nuxt.js.

Alternatively, you can copy this example and follow the instructions in the README:

Run the following command to install Liveblocks packages:

npm install @liveblocks/node

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

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

One way to create an API endpoint in your Nuxt app is to create a server middleware to extend Express. Modify your nuxt.config.js with the following config.

serverMiddleware: [{ path: '/api', handler: '~/api' }]

Then create a file called api.js at the root of your project and add an Express endpoint like below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { authorize } from '@liveblocks/node'
import express from 'express'
// Replace this key with your secret key provided at https://liveblocks.io/dashboard/apikeys
const secret = "sk_live_xxxxxxxxxxxxxxxxxxxxxxxx"
const app = express()
app.use(express.json())
app.post('/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: secret,
})
.then((authResponse) => {
res.send(authResponse.body)
})
.catch((er) => {
res.status(403).end();
})
})

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 option based on the path of the endpoint created earlier.

1
2
3
4
5
import { createClient } from "@liveblocks/client";
// Create a liveblocks client
const client = createClient({
authEndpoint: "/api/auth",
});

Liveblocks should now be integrated with your product!

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