68.8K的 star的Supabase免费！2 分钟搞定用户认证功能

原创

brzhang

发布于 2024-07-11 16:55:20

1360

发布于 2024-07-11 16:55:20

文章被收录于专栏：玩转全栈

Supabase 是一个开源的 Firebase 替代方案。它使用企业级的开源工具来构建 Firebase 的功能。目前在 GitHub 上斩获68.8K的 star，可以说是非常火爆了。

它由 Postgres 数据库和 REST API、GraphQL API、实时订阅、函数、文件存储等功能组成。将了这么一大堆，其实就是一个后端服务，同时他提供了一个 SAAS 服务，可以帮助我们快速搭建一个应用的后端服务。最性感的，还是他有免费的额度，可以创建 2 个数据库应用，而且还自带认证功能，这对于一个拿来验证的小项目来说，已经足够用了。

Supabase 的主要功能点

托管的 Postgres 数据库
身份验证和授权
自动生成的 API
- REST API
- GraphQL API
实时订阅
函数
- 数据库函数
- Edge 函数
文件存储
AI + 向量/嵌入工具包

比较惊喜的是，他最近也提供了向量数据库的功能。先埋个点，以后肯定是可以用得上的。

实际上，初期，我们用得比较多的就是数据库和身份验证这两个功能。今天，我就来带你用 Supabase 来搞定认证。请注意，只需要 1 分钟，就可以搞定接入认证，真的灰常简单。

使用 Supabase 的身份验证

首先，我们需要注册一个 Supabase 账号，然后创建一个项目。

然后就可以到这个链接下面

https://supabase.com/dashboard/project/xxxxx/settings/api

看到这个项目的 API URL 和公钥、私钥了。私钥这个一定得是在服务端跑，比如使用 Next.js 的 API 路由，这样才能保证私钥不会泄露。

superbase 的身份验证功能，支持的方式有下图这么多种，可以看到支持 GitHub等方式，我们可以根据自己的需求来选择。

我尝试的最为简单的方式就是使用邮箱加密码的方式来注册和登录。下面是我在 Next.js 中的实现方式。

  // Sign up with email
  const { user, error } = await supabase.auth.signUp({
    email: 'example@email.com',
    password: 'example-password',
  })

   // Sign in with email
  const { user, error } = await supabase.auth.signIn({
    email: 'example@email.com',
    password: 'example-password',
  })

你可能惊讶，就这就完了，确实就这样就完了，简单的写下前端页面，然后调用 Supabase 的 API，就可以实现注册和登录了。一旦注册完成，数据库 auth.users 表中就会写一个记录。

建议使用 ServerAction 的方式来写

// app/actions.ts
'use server'

import { redirect } from 'next/navigation'
import { createClient } from '@/lib/supabaseClient'

export async function createUser(formData: FormData) {
  const supabase = createClient()
  const email = formData.get('email')
  const password = formData.get('password')
  const { user, error } = await supabase.auth.signUp({
        email,
        password,
    })
    if (error) {
        console.error('Error:', error.message)
        return redirect('/error')
    }
    await supbase.auth.signInWithPassword({
        email,
        password,
    })
  redirect('/dashboard')
}

// app/login/page.tsx
import { createTodo } from './actions'

export default function Page() {
  return (
    <form action={createUser}>
        <input type="email" name="email" />
        <input type="password" name="password" />
        <button type="submit">Sign Up</button>
    </form>
  )
}

你可能会说，那我下次请求的时候，服务端是怎么认识我的呢？这个时候，我们可以使用 cookie 来保存用户的信息，然后在服务端通过 cookie 来识别用户。其实，我们 createClient 的时候，就将 cookie 传递给了服务端，这样就可以在服务端通过 cookie 来识别用户了。

// lib/supabaseClient.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export function createClient() {
  const cookieStore = cookies()
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_SERVICE_ROLE_KEY,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {
          }
        },
      },
    }
  )
}

所以，这一切都是 Supabase 帮你做完了，这就对于咱们的认知负担很低了，只需要关注业务逻辑就可以了。完全可以理解为认证就是调用一个 API，然后就可以拿到用户的信息了。

业务数据与认证数据绑定

在实际的业务中，我们可以将 public 下面的库表，比如自定一定的 User 表，然后将 auth.users 表和 User 表进行关联，这样，就可以配合 Supabase 的权限系统，来实现对用户的权限控制了。

create table users (
  id uuid primary key references auth.users not null,,
  name text,
  age int，
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

Supabase 的权限系统，可以通过设置 Row Level Security 来实现对用户的权限控制。举一个例子，只允许编辑自己发布的文章。

假设 posts 表设计如下：

create table posts (
  post_id uuid primary key default gen_random_uuid(),
  user_id uuid references users(id) not null,
  title text,
  content text,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

create policy "Allow users to update their own posts" on posts for update using (auth.uid() = user_id);

你代码都不用写，Supabase 就帮你做完了权限的管理，这就是 Supabase 的强大之处。

文件存储能力

另外说点别的，Supabase 还提供了文件存储的能力，这个功能也是非常实用的。比如，我们可以将用户上传的文件存储到 Supabase 的文件存储中。

// Upload a file
import { createClient } from '@supabase/supabase-js'

// Create Supabase client
const supabase = createClient('your_project_url', 'your_supabase_api_key')

// Upload file using standard upload
async function uploadFile(file) {
  const { data, error } = await supabase.storage.from('bucket_name').upload('file_path', file)
  if (error) {
    // Handle error
  } else {
    // Handle success
  }
}

这些都是有免费的额度的，另外刚才说的向量数据库，也是免费的，可以用来做RAG，简直是太香了。

const session = new Supabase.ai.Session('gte-small');
Deno.serve(async (req) => {
  // Extract input string from JSON body
  const { input } = await req.json();

  // Generate the embedding from the user input
  const embedding = await session.run(input, {
    mean_pool: true,
    normalize: true,
  });

  // Return the embedding
  return new Response(
    JSON.stringify({ embedding }),
    { headers: { 'Content-Type': 'application/json' } }
  );
});

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

authentication