import { Provider as AuthProvider } from "next-auth/client" doesnt work in _app.js

Question

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.

Answer 1

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

Answer 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

Answer 3

-First you should change your import like below. 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