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

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' } }  
  );  
});