将 Auth0 连接到我的后端后，如何将其连接到我的 NextJS 前端？

Posted 2023-03-09

【中文标题】将 Auth0 连接到我的后端后，如何将其连接到我的 NextJS 前端？

【英文标题】：How do I connect Auth0 to my NextJS frontend after connecting it to my backend?

【发布时间】：2021-12-11 14:47:32

【问题描述】：

所以我已将 auth0 连接到我的后端，该后端由 Node、Express 和一个 MongoDB 数据库组成。我可以使用服务器的端点（localhost:4000/login）创建帐户并登录，但这不是我想要的。我还在为我的应用程序构建一个前端，该前端将要求用户进行身份验证，然后才允许他们访问受保护的路由。我需要找到一种方法将我的 auth0 应用程序（已经连接到我的后端）连接到我的前端。

我不确定如何实现这一点，因此对此的任何帮助都会令人惊叹。如果这个问题已经得到解答或者网上是否有资源可以解决这个问题，请指点我。

【问题讨论】：

我认为你应该使用next-auth。它内置了对许多流行服务（Google、Facebook、Auth0、Apple ......）的支持。 Next-Auth

【参考方案1】：

这里有帮助。

首先，检查这个example。

其次，这里是关于 nextjs 中的任何页面如何使用 auth0 的想法

A.任何页面都可以使用 auth0 保护。默认情况下，您的页面不安全

B.要保护页面，您需要：

export const getServerSideProps = withPageAuthRequired(
  //returnTo: '/foo',
  async getServerSideProps(ctx) 
    return  props:  customProp: 'bar'  ;
  
);

C.您还可以保护 API 端点（但在这种情况下，除了您的客户端之外，它无法从任何地方访问，因此您无法从邮递员那里访问）

import  withApiAuthRequired, getAccessToken, getSession  from '@auth0/nextjs-auth0';

    export default withApiAuthRequired(async function test(req, res) 
      try 
        const session = getSession(req, res);
       catch (error) 
        res.status(error.status || 500).json(
          code: error.code,
          error: error.message
        );
      
    );

D.例如，您几乎可以在任何地方拨打getSession 以获取有关已连接“客户”的信息。

E.你还需要检查一下这个docs，这太极客了

F。您也可以保护component，例如，假设您创建了一个“安全”组件作为SecuredLayout。每次使用SecuredLayout 页面嵌入内容时，都会触发“登录”页面以进行用户登录。 （对客户有用的my personal space）。尽量分解你的元素。

附：您需要在 HTTPS 协议上运行 localhost。

【讨论】：

非常感谢您的全面回答！我现在很困惑，因为我已经在 Auth0 上有一个应用程序连接到我的节点和 mongoDB 来检查用户，我如何使用同一个应用程序并将其连接到我的前端？你提到的所有步骤似乎我必须为我的 nextjs auth0 制作一个新应用程序。

所以这个案例请分享一些你用于后端的代码，这样我可以检查你做了什么。