2022-11-14

TypeError: supabaseClient.auth.getSession is not a function. Error with NextJS and Supabse

I'm using supabase auth helper package to React and Next in my project. Immediately, when I start the page, I get an error message that says the following: the error

And it is that I am not calling that supabaseClient.auth.getSession() method. Which makes me believe that the error is internal. i'm just following the documentation: doc. And use the code that appears in the Basic Setup and in Server-side rendering (SSR)

Actually i have this: `


// pages/_app.js
import { useState } from 'react'
import { useRouter } from 'next/router'

import '../styles/global.css'

import ProfileContext from '../utils/context/ProfileContext'
import useProfile from '../utils/hooks/useProfile'
import ProtectedRoutes from '../utils/constants/rutas/protectedRoutes'

const MyApp = ({ Component, pageProps }) => {

  const [supabaseClient] = useState(() => createBrowserSupabaseClient())
  console.log('supabaseClient', supabaseClient)
  return (
    <SessionContextProvider
      supabaseClient={supabaseClient}
      initialSession={pageProps.initialSession}
    >
      <ProfileContext.Provider value={useProfile()}>
        <Component {...pageProps} />
      </ProfileContext.Provider>
    </SessionContextProvider>
  )
}
export default MyApp

`

`

// pages/index.js
import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
import { useState, useEffect } from "react"
import Layout from "../layout/Layout"
import List from "../components/List"
import Empty from "../components/Empty"
import { supabase } from "../utils/supabaseClient"

const Index = ({ allData }) => {

  const [session, setSession] = useState(null)

  useEffect(() => {
    setSession(supabase.auth.session())
  }, [])

  return (
        <Layout>
            {allData.length ? <List allData={allData} /> : <Empty />}
        </Layout>
  );
}

export default Index

export async function getServerSideProps(ctx) {

  let { data: receptions, error } = await supabase
        .from('receptions')
        .select('*')
        .order('id', { ascending: false })
  if (error) throw error
  return {
    props: {
      allData: receptions
    },
  };
}

` As you will notice at no time I make use of the getSession() method. I hope I explained myself well.

Try this in to see if the user is not logged in to send the user to login.



No comments:

Post a Comment