用Supabase和NextJS设置服务器端授权简介当谈到为你的下一个SaaS项目选择堆栈时，NextJS是react

当谈到为你的下一个SaaS项目选择堆栈时，NextJS是react生态系统中的一个必然选择，NextJS也与supabase.com/一个开源的Firebase替代方案进行了良好的匹配。

在这篇文章中，我将向你展示如何在NextJS中整合supabase的认证逻辑，以一种习惯的方式。

首先，我们需要创建 pages/_app.tsx 。

这将使我们能够在我们的App中创建可重复使用的逻辑。

在这个React组件页面中，我们将使用supabase提供的SDK来处理身份验证。

// pages/_app.tsx

function MyApp({ Component, pageProps }: AppPropsWithLayout) {

 supabase.auth.onAuthStateChange((event, session) => {

return (

这段代码将允许执行POST HTTP请求到我们未来的API路由页面/api/auth.ts，其中包含元数据事件和会话对象，该对象包含关于用户是否登录的关键信息（auth cookie）。

由于supabase SDK auth，我们正在监听任何可能发生的与认证有关的变化（签入、签出等...）。一旦有事件发生，我们将立即告诉服务器端，auth状态已经改变，然后服务器端将相应地更新他的状态。

前面说过的好消息是，supabase是开源的，这意味着你可以检查引擎盖下发生了什么。对于我们的用例，逻辑发生在这里。

一旦客户端准备好发送事件和会话事件，我们就需要在服务器端创建接收该有效载荷的函数来解释它。

// pages/pages/api/auth.ts

export default function handler(req: NextApiRequest, res: NextApiResponse) {

我们再次使用supabase对象，该对象可以访问与auth相关的API集。 setAuthCookie使用引擎盖下的Set-Cookie HTTP头，该头允许用户代理存储一个将在不久的将来使用的cookie。

我们已经快完成了

由于NextJS的getServerSideProps函数，我们现在有能力保护我们的路由。

// pages/protectedRoute.tsx

const Protected = ({ user }: IProps) => {

export const getServerSideProps: GetServerSideProps = async ({ req }) => {

 // Get our logged user

 // Check if the user is logged

export default Protected;

这个函数真的很简单，它将在请求的cookie中寻找是否有任何可供消耗的auth cookie。

如果有auth cookie，该函数将从后台获取与该cookie相关的用户，并返回其元数据。
另一方面，如果没有检测到auth cookie，API将无法获取该用户，然后返回null值，以表示它。

然后，一旦我们有了结果，我们将使用getServerSideProps提供的特殊API，通过在用户到达客户端之前将其重定向到登录页面，或者让他访问所需道具的页面。

然后，getServerSideProps函数应该被复制到你的应用逻辑要求的每个页面。
你甚至可以反其道而行之，例如，当一个已经通过认证的用户浏览到登录页面时。你可以把他重定向到你的主保护页面。

它要么存在服务器端的方式，要么存在客户端的方式。

一般来说，在可能的情况下，采用服务器端的方式是比较好的，这样可以避免一些边缘情况，即应用程序可能出现错误的行为。
客户端上的一切都可能被触及，所以这意味着我们不应该相信客户端。

另一方面，在服务器端，它是更安全的，也很难进行调整。

我希望你会发现它是有用的!

并请不要犹豫，对其进行评论 :)

不要建立网络单体。使用比特来创建和组成解耦的软件组件--在你喜欢的框架中，如React或Node。构建可扩展和模块化的应用程序，拥有强大和愉快的开发体验。

把你的团队带到 比特云来托管并共同协作开发组件，并作为一个团队加快、扩大和规范开发。尝试用设计系统 或微前端的可组合前端，或探索用服务器端组件的可组合后端。

用Supabase和NextJS设置服务器端授权最初发表在Medium上的Bits and Pieces中，人们在这里通过强调和回应这个故事来继续对话。