Nextjs Reusables

Authenticated-otherwise-Redirect.js

import { useSession } from "next-auth/react"
import { useRouter } from "next/router"

// It only renders the children if user is authenticated, otherwise it will redirect to
// redirect Url.

function Auth({ children, waitContent = null, redirectUrl }) {
	const { data: session, status } = useSession()
	const loading = status === "loading"
	const router = useRouter()

	if (!loading && !session) router.push(redirectUrl)
	if (!loading && session) return children
	return waitContent
}

export default Auth

Guest-otherwise-Redirect.js

import { useSession } from "next-auth/react"
import { useRouter } from "next/router"

// It only renders the children if user is a guest(unauthenticated), otherwise it will redirect to redirect url.

function Guest({ children, waitContent = null, redirectUrl }) {
	const { data: session, status } = useSession()
	const loading = status === "loading"
	const router = useRouter()

	if (!loading && session) router.push(redirectUrl)
	if (!loading && !session) return children
	return waitContent
}

export default Guest

methods.js

export function serverErrorResponse(message: string): Response {
  return Response.json(
    {
      error: {
        type: ERROR_TYPE.ServerError,
        message,
      },
    },
    {
      status: 500,
    }
  );
}


export function jsonErrorResponse(
  errorType: ERROR_TYPE | string,
  message: string,
  status: number
): Response {
  return Response.json(
    {
      error: {
        type: errorType,
        message,
      },
    },
    {
      status,
    }
  );
}


export async function getToken(request: Request): Promise<JWT | null> {
  return (await getToken__NextAuth({
    req: request as NextRequest,
  })) as JWT | null;
}

next-session.txt

// We get session using the 'useSession' hook in 'next-auth/react':-

const { data: session, status } = useSession();
// Logging this:-  
console.log(session, status);}

// We get:-
1) For Authenticated user:
undefined loading
user loading
user authenticated

2) For Unauthenticated user:
undefined loading
null loading
null unauthenticated

session-info-waiter.js

// A component that shows "wait content" until session information is fetched (loading is finished) 
// Renders children after fetching session info
// Note: User may or may not have session, this component only waits while session info is being fetched.

import { useSession } from "next-auth/react"

function SessionInfoWaiter({ waitContent = null, children }) {
	const { status } = useSession()

	if (status === "loading") return waitContent
	return children
}

export default SessionInfoWaiter