Theo's Typesafe Cult•2y ago

NextAuth credentials how to handle unauthorized user?

I have this parent component which distinguishes if the user is logged in or not and redirect the user in the specific case. I signed in to my app and deleted all my storage and cookie data which would result me being unauthorized. But the redirect / condition does not work properly in this component:

import { useSession } from 'next-auth/react'
import { AppType } from 'next/dist/shared/lib/utils'
import { MainLayout } from './main-layouts'

enum AuthStates {
  AUTHENTICATED = 'authenticated',
  UNAUTHENTICATED = 'unauthenticated',
}

const ChooseLayout: AppType = ({
  Component,
  pageProps: { ...pageProps },
  ...rest
}) => {
  const { status, data } = useSession({
    required: true,
    onUnauthenticated() {
      router.push('/sign-in')
    },
  })
  const { router } = rest

  console.log('status', status)

  if (status === AuthStates.UNAUTHENTICATED) {
    return <Component {...pageProps} {...rest} key={router.asPath} />
  }

  // Authenticated
  return (
    <MainLayout>
      <Component {...pageProps} {...rest} key={router.asPath} />
    </MainLayout>
  )
}

export default ChooseLayout

import { useSession } from 'next-auth/react'
import { AppType } from 'next/dist/shared/lib/utils'
import { MainLayout } from './main-layouts'

enum AuthStates {
  AUTHENTICATED = 'authenticated',
  UNAUTHENTICATED = 'unauthenticated',
}

const ChooseLayout: AppType = ({
  Component,
  pageProps: { ...pageProps },
  ...rest
}) => {
  const { status, data } = useSession({
    required: true,
    onUnauthenticated() {
      router.push('/sign-in')
    },
  })
  const { router } = rest

  console.log('status', status)

  if (status === AuthStates.UNAUTHENTICATED) {
    return <Component {...pageProps} {...rest} key={router.asPath} />
  }

  // Authenticated
  return (
    <MainLayout>
      <Component {...pageProps} {...rest} key={router.asPath} />
    </MainLayout>
  )
}

export default ChooseLayout

console.log('status', status) keeps returning loading why? How can I properly handle this?

9 Replies

utdevOP•2y ago

I mean I could check every page with a useSession hook, but that is a lot of repition

Unknown User•2y ago

Message Not Public

utdevOP•2y ago

@beanzii hmm but would that work with the credentials option?

Unknown User•2y ago

Message Not Public

utdevOP•2y ago

yeah I tried to use the middleware route opto option*, but that did nt not work out for me, you got a snippet of how you use it?

Unknown User•2y ago

Message Not Public

utdevOP•2y ago

I am using jwt, let me try again

Unknown User•2y ago

Message Not Public

Yiannis•2y ago

I also do what beanzil does as well. in gSSP i use getServerAuthSession and i redirect:

export const getServerSideProps = async ({
  req,
  res,
}: CreateNextContextOptions) => {
  const session = await getServerAuthSession({ req, res });

  if (!session?.user)
    return {
      redirect: {
        destination: "/",
      },
    };

export const getServerSideProps = async ({
  req,
  res,
}: CreateNextContextOptions) => {
  const session = await getServerAuthSession({ req, res });

  if (!session?.user)
    return {
      redirect: {
        destination: "/",
      },
    };

Gaming

Programming

NextAuth credentials how to handle unauthorized user?