Auth of next-auth

index.js

// pages/index.js

import Login from '../components/login';
import { getProviders } from "next-auth/react"
import { unstable_getServerSession } from "next-auth/next"
import { authOptions } from "./api/auth/[...nextauth]";


export default function Home({ posts, Session , providers }) {

//  check status is looding or not 
  if (status === "loading") {
    return <h2> Looding </h2>
  } else if (!Session) {
    //  if session is not avilable the render login page
    return <Login providers={providers} />
  } else if (Session) {
    // main component
    return <Main />
  }


}

export async function getServerSideProps(context) {

// get serve side session
  const session = await unstable_getServerSession(context.req, context.res, authOptions)
  
// get provider from next-auth
  const providers = await getProviders()

  return {
    props: {
      Session,
      providers,
      ...
    },
  }
}