useSupabaseClient() returns undefined

Question

I'm currently following Antonio's Spotify clone tutorial (at 2:08:00), but I've hit a stumbling block, useSupabaseClient() returns undefined, which causes this line <Auth supabaseClient={supabaseClient} /> to crash.

Here's the crash message:

Unhandled Runtime Error
TypeError: undefined is not an object (evaluating 't.auth.onAuthStateChange')

Here's the full code that I am currently on in AuthModal.tsx for more info:

"use client";

import {
  useSessionContext,
  useSupabaseClient,
} from "@supabase/auth-helpers-react";
import { useRouter } from "next/navigation";
import { Auth } from "@supabase/auth-ui-react";

import Modal from "./Modal";

const AuthModal = () => {
  const supabaseClient = useSupabaseClient();
  const router = useRouter();
  const { session } = useSessionContext();

  return (
    <Modal
      title="Welcome back"
      description="Login to your account"
      isOpen
      onChange={() => {}}
    >
      <Auth supabaseClient={supabaseClient} />
    </Modal>
  );
};

export default AuthModal;

You need to preset the `` somewhere in your code before this AuthModal component. That is where you would insert the Supabase client instance. — Andrew Smith, Aug 13 '23 at 13:06

score 0 · Answer 1 · answered Aug 17 '23 at 22:13

Turns out my mistake is in layout.tsx:

import Sidebar from "@/components/Sidebar";
import "./globals.css";
import type { Metadata } from "next";
import { Figtree } from "next/font/google";
import SupabaseProvider from "@/providers/SupabaseProviders";
import UserProvider from "@/providers/UserProvider";
import ModalProvider from "@/providers/ModalProvider";

const font = Figtree({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Spotify Clone",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={font.className}>
        <UserProvider>
          <ModalProvider />
          <SupabaseProvider>
            <Sidebar>{children}</Sidebar>
          </SupabaseProvider>
        </UserProvider>
      </body>
    </html>
  );
}

<SupabaseProvider> needs to surround <UserProvider>

useSupabaseClient() returns undefined

1 Answers1