Function setDoc() called with invalid data. Unsupported field value: a custom UserImpl object (found in field owner in document CreatedClasses)

Question

This is the first time I'm asking a question here and also a newbie to coding. I'm trying to clone google classroom.

I am trying to use firestore to make a db collection when creating the class. But when I click create it doesn't create the class and create the db in firestore. It shows that the setDoc() function is invalid. Im using firestore version 9 (modular)

Here is my Form.js file. (The firestore related code is also included here)

import { DialogActions, TextField , Button} from "@material-ui/core"
import React, {useState} from 'react'
import { useLocalContext, useAuth } from '../../../context/AuthContext'
import { v4 as uuidV4 } from 'uuid'
import { db} from '../../../firebase'
import {  collection, doc, setDoc } from "firebase/firestore"

const Form = () => {
    const [className, setClassName] = useState('')
    const [Level, setLevel] = useState('')
    const [Batch, setBatch] = useState('')
    const [Institute, setInstitute] = useState('')

    const {setCreateClassDialog} = useLocalContext();
    const {currentUser} = useAuth();

    const addClass = async (e) => {
        e.preventDefault()
        const id = uuidV4()

        // Add a new document with a generated id
        const createClasses = doc(collection(db, 'CreatedClasses'));

        await setDoc(createClasses, {
            owner:currentUser,
            className: className,
            level: Level,
            batch: Batch,
            institute: Institute,
            id: id
        }).then (() => {
            setCreateClassDialog(false);
        })

    }

  return (
    <div className='form'>
      <p className="class__title">Create Class</p>
      
      <div className='form__inputs'>
        <TextField
          id="filled-basic"
          label="Class Name (Required)"
          className="form__input"
          variant="filled"
          value={className}
          onChange={(e) => setClassName(e.target.value)}
        />

        <TextField
          id="filled-basic"
          label="Level/Semester (Required)"
          className="form__input"
          variant="filled"
          value={Level}
          onChange={(e) => setLevel(e.target.value)}
        />

        <TextField
          id="filled-basic"
          label="Batch (Required)"
          className="form__input"
          variant="filled"
          value={Batch}
          onChange={(e) => setBatch(e.target.value)}
        />

        <TextField
          id="filled-basic"
          label="Institute Name"
          className="form__input"
          variant="filled"
          value={Institute}
          onChange={(e) => setInstitute(e.target.value)}
        />
      </div>
      <DialogActions>
        <Button onClick={addClass} color='primary'>
          Create
        </Button>

      </DialogActions>
        
    </div>
  )
}

export default Form

And also (I don't know whether this is helpful but my context file is below)

import React, { createContext, useContext, useEffect, useState } from "react";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  onAuthStateChanged,
  signOut,
  GoogleAuthProvider,
  signInWithPopup
} from "firebase/auth";
import { auth } from "../firebase";

const AuthContext = createContext();

const AddContext = createContext()

export function useAuth() {
  return useContext(AuthContext);
}

export function useLocalContext(){
    return useContext(AddContext)
}

export function ContextProvider({children}){
  const [createClassDialog,setCreateClassDialog] = useState(false);
  const [joinClassDialog, setJoinClassDialog] = useState(false);

  const value = { createClassDialog, setCreateClassDialog, joinClassDialog, setJoinClassDialog };

  return <AddContext.Provider value={value}> {children} </AddContext.Provider>;
}


export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true)

  function signup(email, password) {
    return createUserWithEmailAndPassword(auth,email, password);
  }

  function login(email, password) {
    return signInWithEmailAndPassword(auth, email, password);
  }
  
  function logout() {
    return signOut(auth);
  }

  function resetPassword(email) {
    return auth.sendPasswordResetEmail(email)
  }

  function googleSignIn() {
    const googleAuthProvider = new GoogleAuthProvider();
    return signInWithPopup(auth, googleAuthProvider);
  }

  function updateEmail(email) {
    return currentUser.updateEmail(email)
  }

  function updatePassword(password) {
    return currentUser.updatePassword(password)
  }

  useEffect(() => {
    const unsubscribe = onAuthStateChanged( auth, (user) => {
      setCurrentUser(user);
      setLoading(false)
    });

    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <AuthContext.Provider
      value={{ currentUser, login, signup, logout, googleSignIn, resetPassword,updateEmail, updatePassword }}
    >
      {!loading && children}
    </AuthContext.Provider>
  );
}

The console error message:

Answer 1

Try something like this, excluding the collection function from setting the document.

// Add a new document with a generated id
await setDoc(doc(db, 'CreatedClasses'), {
  owner:currentUser,
  className: className,
  level: Level,
  batch: Batch,
  institute: Institute,
  id: classId
}).then (() => {
  setCreateClassDialog(false);
})