TypeError: authListener.unsubscribe is not a function NextJS/React

[axdra]

Bug report

Describe the bug

I'm trying to implmten auth into a Next.js project following the guide. But when I add the UserProvider I get an error.

TypeError: authListener.unsubscribe is not a function

To Reproduce

I only followed this guide

System information

• OS: Windows
• Browser: Edge 105.0.1343.50
• Version:
  "@supabase/auth-helpers-nextjs": "^0.2.8",
  "@supabase/auth-helpers-react": "^0.2.4",
  "@supabase/supabase-js": "^2.0.0-rc.8",
• Version of Node.js: 16.15.1

Additional context

Using TypeScript

[Desdaemon]

Ran into this issue myself in React 18, switching off strict mode or running in production works but aren't optimal solutions.

[axdra]

@Desdaemon Thanks for the reply! This kinda fixed it for me! But still some issues, but thats maybe on me 😅

[marcello-palmitessa]

the issue seems to be a breaking changes in supabase-js 2rc, while @supabase/auth-helpers-react still reference versione 1....

[caleb654]

Can confirm also had this issue and I am on supabase-js 2rc as well.

[angelocala94]

I also had this issue, temporary solved by turning off strict mode

[farid-ouachrar]

Same issue here!

[sid-js]

Same issue here as well.

[sid-js]

Problem Solved ✔️

Found why this error was showing up. The UserProvider component from the @supabase/auth-helpers-react package wasn't unsubscribing the authListener properly :

Problem

It was supposed to be authListener.subscription.unsubscribe()
instead of authListener.unsubscribe()

Fixed the issue and created a pull request. #282 Please check and review.

[thorwebdev]

For usage with supabase-js V2 RC please use the next release npm install @supabase/auth-helpers-nextjs@next npm install @supabase/auth-helpers-react@next.

You'll want dependencies to look like this:

"@supabase/auth-helpers-nextjs": "^0.4.0-next.3", 
"@supabase/auth-helpers-react": "^0.3.0-next.2",
"@supabase/supabase-js": "^2.0.0-rc.10",

You can find the migration docs here: https://github.com/supabase/auth-helpers/blob/next/packages/nextjs/MIGRATION_GUIDE.md and you can see the changes involved to an existing application here: https://github.com/vercel/nextjs-subscription-payments/pull/128/files