index.js

// pages/index.js

import Login from '../components/login';
import { useSession, getProviders } from "next-auth/react"
// rest import here


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

//  get session from next-auth
  const { data: session, status } = useSession()

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


}

// nextjs getStaticProps help fatch data in build time  
export async function getStaticProps() {

 // get provider from next-auth
  const providers = await getProviders()

// rest code ...

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

}