TypeError: Cannot read properties of undefined (reading 'user') when using Supabase authentication in a React app

Question

I'm developing a React application with Next.js and using Supabase for authentication. I have a custom hook called useAuthentication that checks if the user is logged in and redirects them to the login page if not. However, I'm encountering a runtime error stating "TypeError: Cannot read properties of undefined (reading 'user')" in the useAuthentication.js file.

Here is the relevant code:

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { auth } from '@supabase/supabase-js';
import { supabase } from '../supabase/supabaseConfig';

const useAuthentication = () => {
  const router = useRouter();

  useEffect(() => {
    const checkIfUserIsLoggedIn = async () => {
      const user = await auth.user();
      if (!user) {
        router.push('/login');
      }
    };

    checkIfUserIsLoggedIn();
  }, [router]);

  return null;
};

export default useAuthentication;

I have ensured that I properly initialized the supabase client in my supabaseConfig.js file and that the @supabase/supabase-js package is installed as a dependency. this is my supabaseconfig file:

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


const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASEURL
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASEKEY
export const supabase = createClient(supabaseUrl, supabaseKey);

Could someone please help me understand why I'm getting this error and how to fix it? Thank you!

auth is undefined. Are you importing the file correctly?

Cerbrus
– Cerbrus

2023-06-26 10:03:02 +00:00
Commented Jun 26, 2023 at 10:03 — Cerbrus
– Cerbrus, Commented Jun 26, 2023 at 10:03
yes these are my codes

Techlover69
– Techlover69

2023-06-26 10:06:33 +00:00
Commented Jun 26, 2023 at 10:06 — Techlover69
– Techlover69, Commented Jun 26, 2023 at 10:06

Andrew Smith · Accepted Answer · 2023-07-05 11:14:46Z

0

The import of auth is incorrect and there is no user method anymore as that was v1 of the supabase-js library, in v2 the method is getUser. You should be using the supabase you import in this file so it should be:

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { supabase } from '../supabase/supabaseConfig';

const useAuthentication = () => {
  const router = useRouter();

  useEffect(() => {
    const checkIfUserIsLoggedIn = async () => {
    const user = await supabase.auth.getUser();
      if (!user) {
        router.push('/login');
      }
    };

    checkIfUserIsLoggedIn();
  }, [router]);

  return null;
};

export default useAuthentication;

answered Jul 5, 2023 at 11:14

Andrew Smith

1,98611 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeError: Cannot read properties of undefined (reading 'user') when using Supabase authentication in a React app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related