Implement getSession() in NextJS 13

I implemented nextAuth in my app and faced a glitch problem on UI, when the page is reloaded I can see Signed in as ../ Not signed in for a second till a new session is fetched. I found the solution of this problem for NextJS 12 and older, and I have some difficulties to implement it in NextJS 13 without getServerSideProps().

'use client'
import './globals.css'
import { getSession, SessionProvider } from 'next-auth/react'

export default function RootLayout({ session, children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <SessionProvider session={session}>
          {children}
        </SessionProvider>
      </body>
    </html>
  )
}

How to implement this function for the code above?

export async function getServerSideProps(ctx) {
  return {
    props: {
      session: await getSession(ctx)
    }
  }
}

Source: https://stackoverflow.com/a/68942471/4655668

Solution

getServerSession : When calling from server-side i.e. in API routes or in getServerSideProps, we recommend using this function instead of getSession to retrieve the session object. This method is especially useful when you are using NextAuth.js with a database.

import { authOptions } from 'pages/api/auth/[...nextauth]'
import { getServerSession } from "next-auth/next"

export async function getServerSideProps(context) {
  const session = await getServerSession(context.req, context.res, authOptions)
//...
}