在 Nextjs 应用程序中使用 @auth0/nextjs-auth0 授权后如何重定向到起点答案

【问题标题】：How to redirect to starting point after authorizing with auth0 in a Nextjs application using @auth0/nextjs-auth0在 Nextjs 应用程序中使用 @auth0/nextjs-auth0 授权后如何重定向到起点
【发布时间】：2021-12-04 21:51:06
【问题描述】：

我目前正在使用 auth0 对 Next.js 应用程序中的用户进行身份验证。

我正在使用@auth0/nextjs-auth0 SDK 并遵循文档。

但是，我无法弄清楚如何根据用户访问登录表单的页面在登录后动态重定向用户。

在我目前正在尝试构建的应用程序中，用户可以从主页“/”和“/browse”中的导航栏元素登录。但是，登录后，它总是重定向回“/”，而我想将用户重定向到“/browse”或“/browse/[id]，如果他们从那里开始登录过程。

我尝试使用https://community.auth0.com/t/redirecting-to-another-page-other-than-using-nextjs-auth0/66920 作为指导，但这种方法只允许我重定向到预定义的路线。我想知道如何使重定向 URL 动态化。

提前致谢！

编辑：我现在通过深入研究 req 对象并将 returnTo 值设置为“referer”设法找到了解决方案。

import { handleAuth, handleLogin } from '@auth0/nextjs-auth0';

const getLoginState = (req, loginOptions) => {
    return {
        returnTo: req.headers.referer
    };
  };

export default handleAuth({
    async login(req, res) {
        try {
          await handleLogin(req, res, { getLoginState });
        } catch (err) {
            res.status(err.status ?? 500).end(err.message)
        }
      }
  });

到目前为止，我没有看到任何明显的问题，但我不完全确定这种方法是否有任何缺点，所以我希望得到任何反馈。

【问题讨论】：

标签： next.js auth0

【解决方案1】：

这个怎么样？

第一步：初始化 Auth0 SDK

https://auth0.github.io/nextjs-auth0/modules/instance.html#initauth0

# /lib/auth0,js
import { initAuth0 } from "@auth0/nextjs-auth0";

export default initAuth0({
  secret: process.env.SESSION_COOKIE_SECRET,
  issuerBaseURL: process.env.NEXT_PUBLIC_AUTH0_DOMAIN,
  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
  clientID: process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID,
  clientSecret: process.env.AUTH0_CLIENT_SECRET,
  routes: {
    callback:
      process.env.NEXT_PUBLIC_REDIRECT_URI ||
      "http://localhost:3000/api/auth/callback",
    postLogoutRedirect:
      process.env.NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI ||
      "http://localhost:3000",
  },
  authorizationParams: {
    response_type: "code",
    scope: process.env.NEXT_PUBLIC_AUTH0_SCOPE,
  },
  session: {
    absoluteDuration: process.env.SESSION_COOKIE_LIFETIME,
  },
});

第 2 步：配置登录

https://auth0.github.io/nextjs-auth0/modules/handlers_login.html#handlelogin

https://auth0.github.io/nextjs-auth0/interfaces/handlers_login.loginoptions.html#returnto

# /pages/api/auth/login.js

import auth0 from "../../../lib/auth0";

export default async function login(req, res) {

  let options = {
    returnTo: 'http://localhost:3000/dashboard'
  }

  try {
    await auth0.handleLogin(req, res, options);

  } catch (error) {
    console.error(error);
    res.status(error.status || 500).end(error.message);
  }
}

现在您将在成功验证后登陆仪表板页面。

第 3 步：有用的健全性检查

使用以下内容创建/pages/api/auth/callback.js

import auth0 from "../../../lib/auth0";

const afterCallback = (req, res, session, state) => {
  // console.log(session)
  console.log(state)
  return session
};

export default async function callback(req, res) {
  try {
    console.log(auth0)
    await auth0.handleCallback(req, res, { afterCallback });
  } catch (error) {
    console.error(error);
    res.status(error.status || 500).end(error.message);
  }
}

尝试登录并在控制台中查找状态，

{ returnTo: 'http://localhost:3000/dashboard' }

干杯！

【讨论】：