默认重现 SDK
Appwrite是一个开源后端,作为一种服务,在简单的API后面摘要介绍共同的应用程序特征. Appwrite React SDK在客户端和服务器端的React应用程序中为Appwrite认证提供React switch和框架适配器.
特征
- 对注册、登录、签出、OAuth和当前用户状态的反应提供者和钩子
- Vite 和其他非 SSR 反应应用程序的客户端代理
- Next.js 和 TanStack Start 的 SSR 认证处理器
- 从 HTTP 只读 cookie 读取当前用户/ 会话的服务器助手
- 服务器连接会话客户端和管理员客户端
安装
对于客户端的 React 应用程序 :
pnpm add @appwrite.io/react appwrite @tanstack/react-query
对于使用服务器处理器或管理员客户端的 SSR 应用程序,也安装 node-appwrite数字 :
pnpm add @appwrite.io/react appwrite node-appwrite @tanstack/react-query
框架软件包,例如 next, (中文(简体) ), @tanstack/react-start, (中文(简体) ), react,以及 react-dom 应该来自你的应用脚手架.
非 SSR 反应应用程序
使用此设置用于 Vite 或任何在浏览器中直接处理 auth 的应用程序 .
import { AppwriteProvider } from "@appwrite.io/react";
export function Root() {
return (
<AppwriteProvider
endpoint={import.meta.env.VITE_APPWRITE_ENDPOINT}
projectId={import.meta.env.VITE_APPWRITE_PROJECT_ID}
>
<App />
</AppwriteProvider>
);
}
然后,为了认证:
import { useAuth } from "@appwrite.io/react";
export function AuthPanel() {
const { user, isLoading, signIn, signUp, signOut } = useAuth();
if (isLoading) return <p>Loading...</p>;
if (!user) {
return (
<>
<button
onClick={() =>
signIn.emailPassword({
email: "[email protected]",
password: "password123",
})
}
>
Sign in
</button>
<button
onClick={() =>
signUp.emailPassword({
email: "[email protected]",
password: "password123",
name: "Jane Doe",
})
}
>
Sign up
</button>
</>
);
}
return (
<>
<p>Signed in as {user.email}</p>
<button onClick={() => signOut.signOut()}>Sign out</button>
</>
);
}
Next.js App 路由器 SSR
设定 public Appwrite 值并只保留 API 密钥 :
NEXT_PUBLIC_APPWRITE_ENDPOINT=https://fra.cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT_ID=PROJECT_ID
APPWRITE_API_KEY=SERVER_ONLY_API_KEY
创建 Appwrite auth 处理器路由 :
// app/api/appwrite/[...appwrite]/route.ts
import { createAppwriteHandlers } from "@appwrite.io/react/handlers/next";
export const { GET, POST } = createAppwriteHandlers({
endpoint: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!,
projectId: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!,
apiKey: process.env.APPWRITE_API_KEY!,
basePath: "/api/appwrite",
});
将服务器会话传递到客户端提供者 :
// app/providers.tsx
"use client";
import { AppwriteProvider } from "@appwrite.io/react";
export function Providers({
session,
children,
}: {
session?: string | null;
children: React.ReactNode;
}) {
return (
<AppwriteProvider
endpoint={process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!}
projectId={process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!}
ssr={{ session, basePath: "/api/appwrite" }}
>
{children}
</AppwriteProvider>
);
}
// app/layout.tsx
import { createNextServerHelpers } from "@appwrite.io/react/server/next";
import { Providers } from "./providers";
const appwrite = {
endpoint: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!,
projectId: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!,
};
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const helpers = createNextServerHelpers(appwrite);
const session = await helpers.readSessionCookie();
return (
<html lang="en">
<body>
<Providers session={session}>{children}</Providers>
</body>
</html>
);
}
读取 SSR 认证状态并创建服务器文本客户端 :
// app/page.tsx
import { createNextServerHelpers } from "@appwrite.io/react/server/next";
const appwrite = {
endpoint: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!,
projectId: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!,
apiKey: process.env.APPWRITE_API_KEY!,
};
export default async function Page() {
const helpers = createNextServerHelpers(appwrite);
const user = await helpers.getLoggedInUser();
const sessionClient = await helpers.createSessionClient();
const adminClient = helpers.createAdminClient();
const users = await adminClient.users.list({ total: false });
return (
<main>
<p>SSR user: {user?.email ?? "signed out"}</p>
<p>Session client: {sessionClient ? "available" : "none"}</p>
<p>Admin users loaded: {users.users.length}</p>
</main>
);
}
在客户端组件中,使用同一种钩. 当服务器给定状态应更新时, 在验证后刷新路由器 .
// app/auth-panel.tsx
"use client";
import { useAuth } from "@appwrite.io/react";
import { useRouter } from "next/navigation";
export function AuthPanel() {
const { user, isLoading, signIn, signOut } = useAuth();
const router = useRouter();
if (isLoading) return <p>Loading...</p>;
if (!user) {
return (
<button
onClick={() =>
signIn.emailPassword({
email: "[email protected]",
password: "password123",
onSuccess: () => router.refresh(),
})
}
>
Sign in
</button>
);
}
return (
<button
onClick={() => signOut.signOut({ onSuccess: () => router.refresh() })}
>
Sign out
</button>
);
}
TanStack 启动安全部门改革
设定 public Appwrite 值并只保留 API 密钥 :
VITE_APPWRITE_ENDPOINT=https://fra.cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_ID=PROJECT_ID
APPWRITE_API_KEY=SERVER_ONLY_API_KEY
创建 Appwrite auth 处理器路由 :
// src/routes/api/appwrite/$.ts
import { createFileRoute } from "@tanstack/react-router";
import { createAppwriteHandlers } from "@appwrite.io/react/handlers/tanstack";
export const Route = createFileRoute("/api/appwrite/$")({
server: {
handlers: createAppwriteHandlers({
endpoint: import.meta.env.VITE_APPWRITE_ENDPOINT,
projectId: import.meta.env.VITE_APPWRITE_PROJECT_ID,
apiKey: process.env.APPWRITE_API_KEY!,
basePath: "/api/appwrite",
}),
},
});
在服务器函数中读取 SSR 认证状态并将会话传递到提供者 :
// src/routes/index.tsx
import { createFileRoute, useRouter } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { AppwriteProvider, useAuth } from "@appwrite.io/react";
import { createTanStackServerHelpers } from "@appwrite.io/react/server/tanstack";
const getAuthSnapshot = createServerFn({ method: "GET" }).handler(async () => {
const appwrite = {
endpoint: import.meta.env.VITE_APPWRITE_ENDPOINT,
projectId: import.meta.env.VITE_APPWRITE_PROJECT_ID,
apiKey: process.env.APPWRITE_API_KEY!,
};
const helpers = createTanStackServerHelpers(appwrite);
const user = await helpers.getLoggedInUser();
const sessionClient = await helpers.createSessionClient();
const adminClient = helpers.createAdminClient();
const users = await adminClient.users.list({ total: false });
return {
session: helpers.readSessionCookie() ?? null,
user,
hasSessionClient: Boolean(sessionClient),
adminUserCount: users.users.length,
};
});
export const Route = createFileRoute("/")({
loader: () => getAuthSnapshot(),
component: Page,
});
function Page() {
const { session, user, hasSessionClient, adminUserCount } = Route.useLoaderData();
return (
<AppwriteProvider
endpoint={import.meta.env.VITE_APPWRITE_ENDPOINT}
projectId={import.meta.env.VITE_APPWRITE_PROJECT_ID}
ssr={{ session, basePath: "/api/appwrite" }}
>
<main>
<p>SSR user: {user?.email ?? "signed out"}</p>
<p>Session client: {hasSessionClient ? "available" : "none"}</p>
<p>Admin users loaded: {adminUserCount}</p>
<AuthPanel />
</main>
</AppwriteProvider>
);
}
function AuthPanel() {
const { user, isLoading, signIn, signOut } = useAuth();
const router = useRouter();
if (isLoading) return <p>Loading...</p>;
if (!user) {
return (
<button
onClick={() =>
signIn.emailPassword({
email: "[email protected]",
password: "password123",
onSuccess: () => router.invalidate(),
})
}
>
Sign in
</button>
);
}
return (
<button
onClick={() => signOut.signOut({ onSuccess: () => router.invalidate() })}
>
Sign out
</button>
);
}
API 概览
客户切入点 :
import {
AppwriteProvider,
OAuthProvider,
useAuth,
useSignIn,
useSignOut,
useSignUp,
useUser,
} from "@appwrite.io/react";
服务器入口 :
import { createAppwriteHandlers as createNextAppwriteHandlers } from "@appwrite.io/react/handlers/next";
import { createAppwriteHandlers as createTanStackAppwriteHandlers } from "@appwrite.io/react/handlers/tanstack";
import {
createAdminClient,
createSessionClient,
} from "@appwrite.io/react/server";
import { createNextServerHelpers } from "@appwrite.io/react/server/next";
import { createTanStackServerHelpers } from "@appwrite.io/react/server/tanstack";
不从客户端组件或仅浏览器代码导入服务器入口 .
学习更多
许可证
请看 麻省理工学院许可证 文档以获取更多信息.