猞猁集成
本集成指南适用于将 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.