How to add user authentication with Next.js

Below is some code I used to implement user authentication on my Deck pages.

const router = useRouter();
  const { deckName } = router.query;

  const { data: session, status } = useSession();

  //if session doesnt exist then redirect to home page
  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [status]);

  if (status === "loading") {
    <div className="mt-20">
      <LoadingSpinner width="w-20" height="w-20" />
    </div>;
  }

  if (status === "authenticated") {
    return <Deck deckName={deckName as string} />;