Manitej66

const Rooms = () => {
  const [rooms, setRooms] = useState([]);
  const [loading, setLoading] = useState(true);
  const { currentUser } = useContext(AuthContext);
  const [load, setLoad] = useState(false);

  const deleteRoom = async (id) => {
    setLoad(true);
    deleteDoc(doc(db, "rooms", id))
      .then(() => setLoad(false))

Manitej66

 client.on("token-privilege-will-expire", async (token) => {
  const new_token = await getToken(name);
  client.renewToken(new_token);
});

Manitej66

...
let UID = 0;
let URL = "YOUR_SERVER_URL";

const getToken = async (name) => {
  const data = await (
    await fetch(URL + "/rtc/" + name + "/publisher/uid/" + UID)
  ).json();
  return data.rtcToken;
};

Manitej66

const join = async () => {
    setLoad(true);
    const { token, uid } = await (
      await fetch(
        `https://agora-token.azurewebsites.net/api/trigger?name=${room}`
      )
    ).json();
    client.join(token, room, uid, async (userId) => {
      setStreamId(userId);
      localStorage.setItem("ID", id);

Manitej66

const Modal_ = ({ state, title, setState }) => {
  const { currentUser } = useContext(AuthContext);
  const [loading, setLoading] = useState(false);
  const [name, setName] = useState("");
  const history = useHistory();
  const [hidden, setHidden] = useState(false);
const createRoom = async () => {
    if (name.trim().length > 0) {
      setLoading(true);
const room = await addDoc(collection(db, "rooms"), {

Manitej66

const Home = () => {
  const [state, setState] = useState(false);
  const [title, setTitle] = useState("");
return (
    <>
      <Modal_ state={state} setState={setState} title={title} />
<Button
        onClick={() => {
          setTitle("create room");
          setState(true);

Manitej66

import Button from "@geist-ui/react/esm/button";
import { signInWithPopup } from "firebase/auth";
import { auth, provider } from "../firebase";
import { useHistory } from "react-router";
import { useContext, useEffect } from "react";
import { AuthContext } from "../AuthContext";
const Login = () => {
  const history = useHistory();
  const { currentUser } = useContext(AuthContext);
  useEffect(() => {

Manitej66

import React, { useEffect, useState } from "react";
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "./firebase";
import Loading from "@geist-ui/react/esm/loading";

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [pending, setPending] = useState(true);

Manitej66

import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { AuthContext } from "../AuthContext";
const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  const { currentUser } = useContext(AuthContext);
  return (
    <Route
      {...rest}
      render={(routeProps) =>
        currentUser ? (

Manitej66

import { BrowserRouter as Router, Route } from "react-router-dom";
import { AuthProvider } from "./AuthContext";
import Page from "@geist-ui/react/esm/page";
import Home from "./components/Home";
import Login from "./components/Login";
import PrivateRoute from "./utils/PrivateRoute";
import Navbar from "./utils/Navbar";
import Join from "./components/Join";
const App = () => {
  return (