如何配置NextAuth登录成功后重定向至原受保护页面？

步骤1：重定向登录页时携带原页面地址 #

修改受保护页面的getServerSideProps，在跳转登录页的URL后追加callbackUrl参数，传递用户原本访问的页面地址：

export const getServerSideProps = async (context) => {
  const session = await getSession(context)

  if (!session) {
    return {
      redirect: {
        permanent: false,
        // 追加callbackUrl参数，编码后传递原页面地址
        destination: `${SIGN_IN_URL}?callbackUrl=${encodeURIComponent(context.resolvedUrl)}`,
      },
    }
  }

  return {
    props: {},
  }
}

步骤2：配置NextAuth的signIn回调返回回调地址 #

在NextAuth的配置选项中，修改signIn回调，当验证通过时返回传入的callbackUrl（如果存在），否则返回默认地址：

const options = {
  providers: [
    EmailProvider({...}),
  ],
  pages: {
    signIn: SIGN_IN_URL,
    verifyRequest: AUTH_URL,
  },
  callbacks: {
    async session(session) {
      return { ...session }
    },
    async signIn({ user, callbackUrl }) {
      const result = ...
      if (result) {
        // 登录成功后优先跳转到callbackUrl，默认回首页
        return callbackUrl || '/'
      } else {
        return false
      }
    },
  },
}

补充：自定义登录页的适配（若使用自定义页面） #

如果你的登录页是自定义组件，需要先获取callbackUrl参数，再在登录提交时传递给NextAuth的登录方法：

// 自定义登录页的getServerSideProps，获取url中的callbackUrl
export const getServerSideProps = async (context) => {
  const callbackUrl = context.query.callbackUrl || '/'
  return { props: { callbackUrl } }
}

// 登录表单提交逻辑
const handleSubmit = async (e) => {
  e.preventDefault()
  // 调用signIn时传入callbackUrl参数
  await signIn('email', { email: inputEmail, callbackUrl })
}

完成以上配置后，未授权用户访问/dashboard被跳转至登录页，登录成功后会自动重定向回/dashboard页面。

内容的提问来源于stack exchange，提问作者grabury