この記事は公開から1年以上経過しています。

TypeScript(4.9.5)＋Next.js(13.1.6)＋Auth0(2.2.1)で、SSR/CSR/Web APIで認証を行う方法についての備忘録。

サンプルソースコード

SSR

import { withPageAuthRequired } from '@auth0/nextjs-auth0'
import { UserProfile } from '@auth0/nextjs-auth0/client'
import { NextPage } from 'next'

type SecretPageProps = {
  user: UserProfile
}

const SecretPage: NextPage<SecretPageProps> = ({ user }: SecretPageProps) => {
  return <div>Authenticated({user.name})</div>
}

export const getServerSideProps = withPageAuthRequired()

export default SecretPage

認証前

認証後

CSR

import { UserProfile, withPageAuthRequired } from '@auth0/nextjs-auth0/client'
import { NextPage } from 'next'

type SecretPageProps = {
  user: UserProfile
}

const SecretPage: NextPage<SecretPageProps> = ({ user }: SecretPageProps) => {
  return <div>Authenticated({user.name})</div>
}

export default withPageAuthRequired(SecretPage)

認証前

認証後

WebAPI(API Routes)

import { getSession, withApiAuthRequired } from '@auth0/nextjs-auth0'

export default withApiAuthRequired(async (req, res) => {
  const session = await getSession(req, res)
  res.json({ status: `Authenticated(${session?.user.name})` })
})

認証前

認証後

参考ウェブサイトなど

• GitHub
  auth0/nextjs-auth0/Examples

以上です。