I have integrated jitsi in my react app using this module. Here's the code:
import React, { useState } from "react";
import { Jutsu } from "react-jutsu";
const App = () => {
const [room, setRoom] = useState("");
const [name, setName] = useState("");
const [call, setCall] = useState(false);
const [password, setPassword] = useState("");
const handleClick = (event) => {
event.preventDefault();
if (room && name) setCall(true);
};
return call ? (
<div>
<h6>LoDeep Room created by host</h6>
<Jutsu
roomName={room}
displayName={name}
password={password}
onMeetingEnd={() => console.log("Meeting has ended")}
loadingComponent={<p>loading ...</p>}
errorComponent={<p>Oops, something went wrong</p>}
/>
</div>
) : (
<form>
<input
id="room"
type="text"
placeholder="Room"
value={room}
onChange={(e) => setRoom(e.target.value)}
/>
<input
id="name"
type="text"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
id="password"
type="text"
placeholder="Password (optional)"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button onClick={handleClick} type="submit">
Start / Join
</button>
</form>
);
};
export default App;
This seamlessly integrates Jitsi in the app by using the Jitsi public server.
The problem with this approach is that users who are not logged-in in my app may be able to access those jitsi rooms if the user who is logged-in shares the public jitsi room link with them. For example:
I would like to prevent the users who are not connected to my app from accessing the Jitsi rooms inside my app.
Do I have to host Jitsi in a private server in order to do this?
