supabaseClient.auth.user is not a function

JavaScript
1

file _app.js:

import { ChakraProvider } from "@chakra-ui/react";
import { useRouter } from "next/router";
import { useEffect } from "react";
import { supabaseClient } from "../lib/client";
import customTheme from "../lib/theme";

function MyApp({ Component, pageProps }) {
     const router = useRouter();
     const user = supabaseClient.auth.user();

     useEffect(() => {
         const { data: authListener } = supabaseClient.auth.onAuthStateChange(
             (event, session) => {
                 handleAuthSession(event, session);
                 if (event === "SIGNED_IN") {
                     const signedInUser = supabaseClient.auth.user();
                     const userId = signedInUser.id;
                     supabaseClient
                         .from("profiles")
                         .upsert({ id: userId })
                         .then((_data, error) => {
                             if (!error) {
                                 router.push("/");
                             }
                         });
                 }
                 if (event === "SIGNED_OUT") {
                     router.push("/signin");
                 }
             }
         );

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

     useEffect(() => {
         if (user) {
             if (router.pathname === "/signin") {
                 router.push("/");
             }
         }
     }, [router.pathname, user, router]);

     const handleAuthSession = async(event, session) => {
         await fetch("/api/auth", {
             method: "POST",
             headers: new Headers({ "Content-Type": "application/json" }),
             credentials: "same-origin",
             body: JSON.stringify({ event, session }),
         });
     };

     return (
         <ChakraProvider theme={customTheme}>
             <Component {...pageProps} />
         </ChakraProvider>
     );
}

export default MyApp;

And here is the file lib/client.js:

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
const SUPBASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

const client = createClient(SUPABASE_URL, SUPBASE_ANON_KEY);

export { client as supabaseClient };

Errors appear:
Server Error
TypeError: lib_client__WEBPACK_IMPORTED_MODULE_4_.supabaseClient.auth.user is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Here is the link to the original post: [Preformatted text](https://www.freecodecamp.org/news/how-to-build-a-todoapp-using-react-and-supabase/#:~:text=Now%20go%20to%20the%20_app.js%20and%20copy%20paste%20the%20following%20code%3A)

Please help me fix it!
Thank you very much everyone!

2

Check that you have the latest version of the @supabase/supabase-js library installed. You can update the library by running npm install @supabase/supabase-js@latest in your project directory

4

I already did that but it still throws the error lib_client__WEBPACK_IMPORTED_MODULE_4_.supabaseClient.auth.user() is not a function
and
authListener.unsubscribe is not a function

5

You are probably using V2 of the client lib and the tutorial is using V1.

V1

V2

I would install the version of the lib that the article was written for.

6 
const user = supabaseClient.auth?.user();

The ?. is the optional chaining operator, which checks if the auth property of supabaseClient is defined before trying to access the user() method. If auth is undefined, the expression will return undefined instead of throwing an error.

With this modification, the user variable will either hold the user object returned by supabaseClient.auth.user() or undefined if supabaseClient.auth is undefined.
You can try…

7

Hi there, encountered the same problem, I fixed “supabase.auth.user()” with this “supabase.auth.getUser()” . Use getUser() insted of user().