Remix 集成
Better Auth 可以轻松集成到 Remix 中。本指南将向您展示如何将 Better Auth 与 Remix 集成。
您可以按照 安装 中的步骤开始，或者按照本指南以 Remix 的方式进行。
如果您已按照安装步骤操作，可以跳过第一步。
创建 auth 实例
在以下位置之一创建一个名为 auth.server.ts 的文件：
- 项目根目录
lib/文件夹utils/文件夹
您也可以将这些文件夹中的任何一个嵌套在 app/ 文件夹下。（例如 app/lib/auth.server.ts）
在此文件中，导入 Better Auth 并创建您的实例。
确保使用变量名 auth 导出 auth 实例，或作为 default 导出。
import { betterAuth } from "better-auth"
export const auth = betterAuth({
database: {
provider: "postgres", //change this to your database provider
url: process.env.DATABASE_URL, // path to your database or connection string
}
})创建 API 路由
我们需要将处理程序挂载到一个 API 路由。在 app/routes/ 目录下创建一个资源路由文件 api.auth.$.ts。并添加以下代码：
import { auth } from '~/lib/auth.server' // Adjust the path as necessary
import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node"
export async function loader({ request }: LoaderFunctionArgs) {
return auth.handler(request)
}
export async function action({ request }: ActionFunctionArgs) {
return auth.handler(request)
}您可以更改 better-auth 配置中的路径，但推荐保持为 routes/api.auth.$.ts
创建客户端
创建一个客户端实例。这里我们在 lib/ 目录下创建 auth-client.ts 文件。
import { createAuthClient } from "better-auth/react" // make sure to import from better-auth/react
export const authClient = createAuthClient({
//you can pass client configuration here
})创建客户端后，您可以使用它进行注册、登录和其他操作。
示例用法
注册
import { Form } from "@remix-run/react"
import { useState } from "react"
import { authClient } from "~/lib/auth-client"
export default function SignUp() {
const [email, setEmail] = useState("")
const [name, setName] = useState("")
const [password, setPassword] = useState("")
const signUp = async () => {
await authClient.signUp.email(
{
email,
password,
name,
},
{
onRequest: (ctx) => {
// show loading state
},
onSuccess: (ctx) => {
// redirect to home
},
onError: (ctx) => {
alert(ctx.error)
},
},
)
}
return (
<div>
<h2>
注册
</h2>
<Form
onSubmit={signUp}
>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="姓名"
/>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="电子邮件"
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="密码"
/>
<button
type="submit"
>
注册
</button>
</Form>
</div>
)
}登录
import { Form } from "@remix-run/react"
import { useState } from "react"
import { authClient } from "~/services/auth-client"
export default function SignIn() {
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const signIn = async () => {
await authClient.signIn.email(
{
email,
password,
},
{
onRequest: (ctx) => {
// show loading state
},
onSuccess: (ctx) => {
// redirect to home
},
onError: (ctx) => {
alert(ctx.error)
},
},
)
}
return (
<div>
<h2>
登录
</h2>
<Form onSubmit={signIn}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button
type="submit"
>
登录
</button>
</Form>
</div>
)
}