Supabase是一种开源 Firebase 替代方案,可为您的项目提供所有后端服务。您可以彼此独立地使用其任何服务。今天我们将探讨如何为我们的 React 应用程序集成身份验证。

这篇文章是基于示例项目编写的:Social Providers,这是我个人构建的,用于试验 Supabase 身份验证。

在我们深入研究之前,让我们讨论一下为什么我们需要一个身份验证系统?

[](https://res.cloudinary.com/practicaldev/image/fetch/s--vdh8Lt3n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res. cloudinary.com/dmca9ldbv/image/upload/v1655580582/blog/authentication-with-supabase/auth-vs-auth_obsdmr.png)

认证与授权

在最基本的层面上,当用户从我们的网站或应用程序请求资源时(这可以像访问页面一样简单),我们需要知道 (a) 此人是谁以及 (b) 我们将允许什么他们要做什么?简而言之,这就是身份验证和授权之间的区别。

从广义上讲,我们可以/应该根据用户的身份确定用户可以做什么,而实现这一点的最简单方法是实施身份验证服务来帮助我们完成部分流程。因此,我想在使用Next.js构建的 React 应用程序中使用它对 Social Providers 的支持来试一试Supabase Authentication。

Supabase 入门

第一件事是第一件事。一旦我们准备好我们的应用程序。我们只需要一个依赖,通过以下命令安装:npm i @supabase/supabase-js。然后您需要使用createClient()方法初始化一个新的Supabase客户端。

您需要传入两个参数:(1)您的 Supabase 网址和(2)您的 Supabase 密钥。我已将其提取到一个单独的文件中:

import { createClient } from "@supabase/supabase-js";

export default createClient(
    `${process.env.NEXT_PUBLIC_SUPABASE_PROJECT_URL}`,
    `${process.env.NEXT_PUBLIC_SUPABASE_API_KEY}`
);

进入全屏模式 退出全屏模式

注册用户

默认情况下,Supabase 使用第三方 OAuth 提供者使用signIn()方法。该方法使您可以访问user、session和error对象。这是您需要的代码:

const { user, session, error } = await supabase.auth.signIn({
  // provider can be 'github', 'google', 'gitlab', and more
  provider: 'github'
})

进入全屏模式 退出全屏模式

此外,如果您想将用户重定向到/welcome页面,您可以将第二个参数类型object传递给包含 url:{ redirectTo: '/' }的signIn()方法。

您可以查看演示项目:Social Providers以了解我是如何设置的。

使用 React 和 Supabase

在示例项目中,我添加了一个带有onClick函数的按钮,用于处理signIn()方法,如下所示:

<button onClick={() => auth("google")}>
  Continue with Google
</button>
<button onClick={() => auth("github")}>
  Continue with Google
</button>

进入全屏模式 退出全屏模式

我已经根据用户单击的身份验证选项重新调整了该功能以更改提供程序。处理函数如下所示:

/* I've chosen not to add the user, session and error objects for simplicity */
const auth = async (provider: Provider) => {
    await supabase.auth.signIn({
        provider: `${provider}`,
    });
};

进入全屏模式 退出全屏模式

一旦用户成功通过身份验证,他们将被重定向到在 Supabase 中配置为项目 URL 的 URL 或在signIn()方法中配置的 URL。

为了捕获和加载用户信息,我使用user()方法添加了一个处理函数,该函数为我们的应用程序收集信息并将其存储在状态中:

useEffect(() => {
    const getUser = () => {
        const supabaseUser = supabase.auth.user();
        setUser(supabaseUser);
    };
    window.addEventListener("hashchange", function () {
        getUser();
    });
    getUser();
}, [user]);

进入全屏模式 退出全屏模式

[的生命周期](https://res.cloudinary.com/practicaldev/image/fetch/s--ic4KLTiT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res .cloudinary.com/dmca9ldbv/image/upload/v1655583527/blog/authentication-with-supabase/resource-request_ijxauk.png)

那么他们用的是什么?

这取决于身份验证服务和提供者。示例项目使用 Supabase 处理身份验证,令人惊讶的是,与其他身份验证服务相比,它捕获的有关用户的信息非常少。以下是user_metadata对象的示例:

{
    avatar_url: "https://avatars.githubusercontent.com/u/{..}",
    email: "hello@hectorsosa.me",
    email_verified: true,
    full_name: "Hector Sosa",
    iss: "https://api.github.com",
    name: "Hector Sosa",
    preferred_username: "ekqt",
    provider_id: "{...}",
    sub: "{...}",
    user_name: "ekqt",
}

进入全屏模式 退出全屏模式

结论

那里有许多身份验证服务。最好进行试验,看看它们与您的应用程序的集成程度如何,它们对您的开发人员体验有多好,看看什么最适合您的项目需求。

一些最流行的解决方案有:Google 的 Firebase、Auth0、Next-Auth、Magic所以给他们的文档看看和快乐的身份验证!