FOUC when I try the getServerSideProps example

[corysimmons]

If I follow the example here https://next-auth.js.org/tutorials/securing-pages-and-api-routes#server-side using this specific code:

import { useSession, getSession } from "next-auth/react"
import { useRouter } from 'next/router'
import { GetServerSideProps } from 'next'

import { LandingPage } from '@/components'

export default function PageIndex() {
  const { data: session } = useSession()
  const router = useRouter()

  if (session && typeof window !== 'undefined') {
    router.push('/dashboard')
  }

  if (!session) return <LandingPage />
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: {
      session: await getSession(context),
    },
  }
}

And I am logged in. The app will redirect me to / and I'll see the landing page for a second before useSession has time to kick in and then I get redirected to /dashboard.

I can do something like this:

export default function PageIndex({ isLoggedIn }) {
  // ...
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const session = await getSession(context)
  return {
    props: {
      session,
      isLoggedIn: Boolean(session),
    },
  }
}

I've also tried the Foo.auth = true pattern described here https://next-auth.js.org/getting-started/client#custom-client-session-handling but it doesn't seem to properly intercept the session before it hits clientside.

Not sure if my implementation is messed up:

function Auth({ children }: AuthProps) {
  const { status } = useSession()
  const router = useRouter()

  if (status === 'loading') return null

  if (status !== 'authenticated') {
    router.replace('/')
  }

  return children
}

Any help would be appreciated. Love this plugin but this little route flash is driving me crazy. 😄

[hanbrandon]

I also had the same problem and this is how I did it.

export const getServerSideProps = async (ctx) => {
	const session = await getSession(ctx);
	const headers = ctx.req.headers;
	try {
		if (session) {
			const projects = (
				await axios.get(`${process.env.NEXTAUTH_URL}/api/projects`, {
					headers: { Cookie: headers.cookie },
				})
			).data;
			return {
				props: {
					projects,
				},
			};
		} else {
			return {
				redirect: {
					destination: `/login`,
					permanent: false,
				},
			};
		}
	} catch {
		return {
			redirect: {
				destination: '/error/403',
				permanent: false,
			},
		};
	}
};

`

[corysimmons]

Thank you so much @hanbrandon

I was doing the same thing, but apparently we are doing it wrong. I found some nextjs.org docs yesterday (can't them now but they exist) where Next.js officially recommends you just request the data you need directly from within getServerSideProps

So instead of

// pages/projects.jsx
export const getServerSideProps = async (ctx) => {
  const session = await getSession(ctx);

  // ONE fetch
	const {data} = await axios(`${process.env.NEXTAUTH_URL}/api/projects`, {
	  headers: { Cookie: ctx.req.headers.cookie }
  })

  return {
    props: { projects }
  }
};

// pages/api/projects.js
export default function handler(req, res) {
  const session = getSession({req})
  
  // ANOTHER fetch
  const projects = getProjectsByUserIdFromSomeCloudDb({
    userId: session.user_id
  })

  res.status(200).json({ projects })
}

You would just call the getProjectsByUserIdFromSomeCloudDb(...) from directly within getServerSideProps. And if you wanted to also expose it from your API for some reason, you could break it into its own function and use it in both places.

// pages/projects.jsx
import { getProjectsByUserIdFromSomeCloudDb } from '~/pages/api/projects'

export const getServerSideProps = async (ctx) => {
  const session = await getSession(ctx);
  
  const projects = await getProjectsByUserIdFromSomeCloudDb({
    userId: session.user_id
  })

  return {
    props: { projects }
  }
};

// pages/api/projects.js
export const getProjectsByUserIdFromSomeCloudDb = ({ userId }) => { ... }

export default function handler(req, res) {
  const session = getSession({req})
  
  const projects = await getProjectsByUserIdFromSomeCloudDb({
    userId: session.user_id
  })

  res.status(200).json({ projects })
}

It seems like a purposeful limitation meant to cut down on extra requests, but I'm not sure it makes sense in the context of needing to pluck some data (like a user_id) off the session.

[hanbrandon]

Oh. Thank you so much for the information.