Reauthenticate without reloading the page or losing state

Sometimes it’s helpful to reauthenticate users, for example after a logged out user has signed into your application, and you wish to display their details.

How to reauthenticate

By calling room.reconnect you can reconnect and reauthenticate your collaborative application without refreshing the page or unmounting the RoomProvider component. Using this method will preserve the current client’s state, such as the undo/redo history.

const { room, leave } = client.enterRoom("my-room", {  // ...});
room.reconnect();

In React

In our React package, you can retrieve the current room with the useRoom hook, before calling room.reconnect from there.

import { useRoom } from "../liveblocks.config";
export function App() {  const room = useRoom();
  return <button onClick={room.reconnect}>Reauthenticate</button>;}