猞猁集成
本集成指南适用于将 Better Auth 与 Lynx 一起使用，Lynx 是一个跨平台渲染框架，能够让开发者为 Android、iOS 和 Web 平台构建具有原生渲染性能的应用。
【This integration guide is for using Better Auth with Lynx, a cross-platform rendering framework that enables developers to build applications for Android, iOS, and Web platforms with native rendering performance.】
在开始之前，请确保你已配置了 Better Auth 实例。如果还没有配置，请查看安装指南。
【Before you start, make sure you have a Better Auth instance configured. If you haven't done that yet, check out the installation.】
安装
【Installation】
安装 Better Auth 和 Lynx React 依赖：
【Install Better Auth and the Lynx React dependency:】
npm install better-auth @lynx-js/react创建客户端实例
【Create Client Instance】
从 better-auth/lynx 导入 createAuthClient 来创建你的客户端实例：
【Import createAuthClient from better-auth/lynx to create your client instance:】
import { createAuthClient } from "better-auth/lynx"
export const authClient = createAuthClient({
baseURL: "http://localhost:3000" // The base URL of your auth server
})用法
【Usage】
Lynx 客户端提供与其他 Better Auth 客户端相同的 API，并针对 Lynx 的响应式系统进行了优化集成。
【The Lynx client provides the same API as other Better Auth clients, with optimized integration for Lynx's reactive system.】
身份验证方法
【Authentication Methods】
import { authClient } from "./lib/auth-client"
// Sign in with email and password
await authClient.signIn.email({
email: "test@user.com",
password: "password1234"
})
// Sign up
await authClient.signUp.email({
email: "test@user.com",
password: "password1234",
name: "John Doe"
})
// Sign out
await authClient.signOut()钩子
【Hooks】
Lynx 客户端包括可与 Lynx 组件系统无缝集成的响应式钩子：
【The Lynx client includes reactive hooks that integrate seamlessly with Lynx's component system:】
useSession
import { authClient } from "../lib/auth-client"
export function User() {
const {
data: session,
isPending, // loading state
error // error object
} = authClient.useSession()
if (isPending) return <div>Loading...</div>
if (error) return <div>Error: {error.message}</div>
return (
<div>
{session ? (
<div>
<p>Welcome, {session.user.name}!</p>
<button onClick={() => authClient.signOut()}>
Sign Out
</button>
</div>
) : (
<button onClick={() => authClient.signIn.social({
provider: 'github'
})}>
Sign In with GitHub
</button>
)}
</div>
)
}商店整合
【Store Integration】
Lynx 客户端使用 nanostores 进行状态管理，并提供了一个 useStore 钩子用于访问响应式状态：
【The Lynx client uses nanostores for state management and provides a useStore hook for accessing reactive state:】
import { useStore } from "better-auth/lynx"
import { authClient } from "../lib/auth-client"
export function SessionInfo() {
// Access the session store directly
const session = useStore(authClient.$store.session)
return (
<div>
{session && (
<pre>{JSON.stringify(session, null, 2)}</pre>
)}
</div>
)
}高级商店使用
【Advanced Store Usage】
你可以使用带有选择性键监听的存储来优化重新渲染：
【You can use the store with selective key watching for optimized re-renders:】
import { useStore } from "better-auth/lynx"
import { authClient } from "../lib/auth-client"
export function OptimizedUser() {
// Only re-render when specific keys change
const session = useStore(authClient.$store.session, {
keys: ['user.name', 'user.email'] // Only watch these specific keys
})
return (
<div>
{session?.user && (
<div>
<h2>{session.user.name}</h2>
<p>{session.user.email}</p>
</div>
)}
</div>
)
}插件支持
【Plugin Support】
Lynx 客户端支持所有 Better Auth 插件：
【The Lynx client supports all Better Auth plugins:】
import { createAuthClient } from "better-auth/lynx"
import { magicLinkClient } from "better-auth/client/plugins"
const authClient = createAuthClient({
plugins: [
magicLinkClient()
]
})
// Use plugin methods
await authClient.signIn.magicLink({
email: "test@email.com"
})错误处理
【Error Handling】
错误处理的工作方式与其他 Better Auth 客户端相同：
【Error handling works the same as other Better Auth clients:】
import { authClient } from "../lib/auth-client"
export function LoginForm() {
const signIn = async (email: string, password: string) => {
const { data, error } = await authClient.signIn.email({
email,
password
})
if (error) {
console.error('Login failed:', error.message)
return
}
console.log('Login successful:', data)
}
return (
<form onSubmit={(e) => {
e.preventDefault()
const formData = new FormData(e.target)
signIn(formData.get('email'), formData.get('password'))
}}>
<input name="email" type="email" placeholder="Email" />
<input name="password" type="password" placeholder="Password" />
<button type="submit">Sign In</button>
</form>
)
}特性
【Features】
Lynx 客户端提供：
【The Lynx client provides:】
- 跨平台支持：适用于 Android、iOS 和网页平台
- 优化性能：专为 Lynx 的响应式系统构建
- Nanostores 集成：使用 nanostores 实现高效的状态管理
- 选择性重新渲染：监控特定的存储键以减少不必要的更新
- 完全兼容 API：所有 Better Auth 方法和插件都可以无缝使用
- TypeScript 支持：通过 TypeScript 推断实现完整的类型安全
Lynx 集成保留了 Better Auth 的所有功能和优势，同时在 Lynx 的跨平台生态系统中提供最佳性能和开发者体验。
【The Lynx integration maintains all the features and benefits of Better Auth while providing optimal performance and developer experience within Lynx's cross-platform ecosystem.】