Sharing Session State #2794
-
Question 💬Hi, I'm relatively new to NextJS/React, so apologies if this is blindingly obvious. My current code looks like this: import { NextAuthProvider } from "next-auth/client"
export default class MyApp extends App {
static async getInitialProps({ Component, router, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
const Layout = Component.layout || (({ children }) => <>{children}</>);
return (
<React.Fragment>
<Head>
<title>Test</title>
</Head>
<Layout>
<Component {...pageProps} />
</Layout>
</React.Fragment>
);
}
}This works in it's current state. I'm trying to add a Session Provider as per the docs here. When I do this: import { NextAuthProvider, getSession } from "next-auth/client"
export default class MyApp extends App {
static async getInitialProps({ Component, router, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return {
pageProps: {
session: await getSession(ctx)
}
};
}
render() {
const { Component, pageProps } = this.props;
const Layout = Component.layout || (({ children }) => <>{children}</>);
return (
<React.Fragment>
<Head>
<title>Test</title>
</Head>
<Layout>
<NextAuthProvider session={pageProps.session}>
<Component {...pageProps} />
</NextAuthProvider>
</Layout>
</React.Fragment>
);
}
}I get this:
Any advice? How to reproduce ☕️import { NextAuthProvider, getSession } from "next-auth/client"
export default class MyApp extends App {
static async getInitialProps({ Component, router, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return {
pageProps: {
session: await getSession(ctx)
}
};
}
render() {
const { Component, pageProps } = this.props;
const Layout = Component.layout || (({ children }) => <>{children}</>);
return (
<React.Fragment>
<Head>
<title>Test</title>
</Head>
<Layout>
<NextAuthProvider session={pageProps.session}>
<Component {...pageProps} />
</NextAuthProvider>
</Layout>
</React.Fragment>
);
}
} |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
your import is wrong, as seen in the docs you linked to. make sure you check the correct version of the docs, depending if you use v3 or v4 |
Beta Was this translation helpful? Give feedback.
-
|
Many thanks, that fixed it! |
Beta Was this translation helpful? Give feedback.
-
|
Ah, slight snag @balazsorban44 This code: import { SessionProvider, getSession } from "next-auth/react"
export default class MyApp extends App {
static async getInitialProps({ Component, router, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return {
pageProps: {
session: await getSession(ctx)
}
};
}
render() {
const { Component, pageProps } = this.props;
const Layout = Component.layout || (({ children }) => <>{children}</>);
return (
<React.Fragment>
<Head>
<title>Test</title>
</Head>
<Layout>
<SessionProvider session={pageProps.session}>
<Component {...pageProps} />
</SessionProvider>
</Layout>
</React.Fragment>
);
}
}is throwing the following error: Is there anything there that doesn't follow a recommended pattern? |
Beta Was this translation helpful? Give feedback.
-
|
You mention that you are new to Next.js, so I would start by reading up on data fetching in Next.js: https://nextjs.org/docs/api-reference/data-fetching/getInitialProps Make sure you understand the way |
Beta Was this translation helpful? Give feedback.
your import is wrong, as seen in the docs you linked to. make sure you check the correct version of the docs, depending if you use v3 or v4