0

I am watching this video: https://www.youtube.com/watch?v=uGhekiErHso&lc=UgxYeO4X60SBiKSTYyp4AaABAg.9WmWFhab7UX9WmzTutWP_V, at the 39 min of the video you can see the authentication part in _app.js.

When I import { Provider as AuthProvider } from "next-auth/client" I got the below error:

Module not found: Package path ./client is not exported from package C:\Users\saeed\Amazon-starter-template-nextjs\node_modules\next-auth (see exports field in C:\Users\saeed\Amazon-starter-template-nextjs\node_modules\next-auth\package.json)

If I change it to: import { Provider as AuthProvider } from "next-auth/react"; I got this error:

Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
S.Zahran
  • 11
  • 1
  • 2
  • 1
    Yes, you should change the import to `next-auth/react` when using `next-auth` v4. For the second error make sure you're exporting all your React components correctly. – juliomalves Jan 07 '22 at 18:57

3 Answers3

2

You need to change your import. Provider was renamed to SessionProvider on v4.0.

import { SessionProvider } from "next-auth/react";

You no longer have to use an alias, since Provider was renamed. next-auth/client is deprecated, use next-auth/react instead.

The next steps on the tutorial are also outdated. The useSession hook has been updated to return an object.

Instead of using const [session] = useSession(), it should be const { data: session } = useSession();

After that, you can easily access session.user.name

Breno
  • 21
  • 2
0

next-auth/react is correct, /client is deprecated

The follow-up error looks like you're not exporting your function/component, are you missing the export in your file? e.g.

export default MyApp
thisiswootz
  • 41
  • 5
0

First, you should change your import like below. The provider was renamed to SessionProvider on v4.0.

import { SessionProvider } from 'next-auth/react';

Second, you should change the _app.js codes like this:

const MyApp = ({ Component, pageProps }) => {
  return (
    <SessionProvider session={pageProps.session}>
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </SessionProvider>
  );
};

export default MyApp;

Finally use this code to use your session:

const { data: session } = useSession();

// use this code for print your data

session.user.name
Nabi Abdi
  • 11
  • 3