CODEWITHSUNDEEP
reactjsnext.jsprismanext-auth
Abdullah Al Nahid
Abdullah Al Nahid

Reputation: 561

Session undefined in client side although available in server side in NextAuth.js v4 beta

I am using NextAuth.js v4 beta version to set up server-side rendering and add sessions via props.

The session data gets console-logged from the getServerSideProps function in the index.js file, however, the client-side console log result of the session is undefined.

What could be the issue here? How can I fix this?

The _app.js code:

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

export default function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session} refetchInterval={5 * 60}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

[...nextauth].js code:

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.SECRET,
})

index.js code:

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { signIn, signOut, getSession } from 'next-auth/react'

export default function Home({session}) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Nextjs</title>
        <meta name="description" content="Nextjs" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        {!session && (
          <>
            <h1>
              Nextjs
            </h1>
            <h2 className={styles.subheader}>
              You're not logged in
            </h2>
            <br />
            <button onClick={() => signIn("google")}>Sign In</button>
          </>
        )}
        {session && (
          <>
            <h1>
              Dashboard
            </h1>
            <h2 className={styles.subheader}>
              Signed in as {session.user.email}
            </h2>
            <br />
            <button onClick={signOut}>Sign Out</button>
          </>
        )}
      </main>
    </div>
  )
}


export async function getServerSideProps(ctx) {
  const session = await getSession(ctx)
  return {
    props: { session },
  }
}]

Here's my dependencies:

"@next-auth/prisma-adapter": "^0.5.2-next.19",
"@prisma/client": "^3.5.0",
"next": "12.0.4",
"next-auth": "^4.0.0-beta.7",
"react": "17.0.2",
"react-dom": "17.0.2"

Upvotes: 4

Views: 8473

Answers (1)

Abdullah Al Nahid
Abdullah Al Nahid

Reputation: 561

This seem to work:

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { signIn, signOut, getSession } from 'next-auth/react'

export default function Home({user}) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Nextjs</title>
        <meta name="description" content="Nextjs" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        {!user && (
          <>
            <h1>
              Nextjs
            </h1>
            <h2 className={styles.subheader}>
              You're not logged in
            </h2>
            <br />
            <button onClick={() => signIn("google")}>Sign In</button>
          </>
        )}
        {user && (
          <>
            <h1>
              Dashboard
            </h1>
            <h2 className={styles.subheader}>
              Signed in as {user.email}
            </h2>
            <br />
            <button onClick={signOut}>Sign Out</button>
          </>
        )}
      </main>
    </div>
  )
}


export async function getServerSideProps(ctx) {
  const session = await getSession(ctx)
  if (!session) {
    return {
      props: {}
    }
  }
  const { user } = session;
  return {
    props: { user },
  }
}

Upvotes: 1

Related Questions