@ackplus/nest-aut-反应

反应提供者、钩子、卫士和头等舱Next.js App路由器帮助 @ackplus/nest-auth无头——带来自己的UI.

📚 完整文档: ack-solutions.github.io/nst-auth/docs/resact 互联网档案馆的存檔,存档日期2013-12-02

为什么用它

顶部的薄反射层 @ackplus/nest-auth-client 这样你就能手动构建出一切: 上下文提供者, 狭义的重接接钩, 守护部件, 通过 Next.js Server 组件的路由级别守护, 以及跨塔布同步.

它无头——没有有风格的按钮,没有有观点的表格——所以它会掉入任何回放 18/19 app 或 Next.js App Router 项目,而不与你的设计系统相对抗.

安装

pnpm add @ackplus/nest-auth-react @ackplus/nest-auth-client

AI 编码代理

使用 Claude 代码, Codex, Cursor 或者另一个 AI 编码代理? 安装 Nest Auth 技能使其知道 SDK 的真实 API :

npx @ackplus/nest-auth-skill

它检测你的堆栈( 或通过) --stack react),并且只添加代理指令文件;您的应用程序不会被更改.

包括什么

最小实例- SPA

import { AuthClient } from '@ackplus/nest-auth-client';
import { AuthProvider, useNestAuth, AuthGuard, useUser } from '@ackplus/nest-auth-react';

const client = new AuthClient({ baseUrl: 'https://api.example.com' });

export default function App() {
  return (
    <AuthProvider client={client}>
      <Routes />
    </AuthProvider>
  );
}

function Dashboard() {
  return (
    <AuthGuard fallback={<a href="/login">Sign in</a>}>
      <DashboardInner />
    </AuthGuard>
  );
}

function DashboardInner() {
  const user = useUser();
  return <h1>Hello {user?.email}</h1>;
}

function LoginForm() {
  const { login, error, isLoading } = useNestAuth();
  return (
    <form onSubmit={async (e) => {
      e.preventDefault();
      await login({ credentials: { email, password } });
    }}>
      {/* … */}
      <button disabled={isLoading}>Sign in</button>
      {error && <p>{error.message}</p>}
    </form>
  );
}

最小示例 — Next.js App 路由器

// app/layout.tsx (Server Component)
import { cookies } from 'next/headers';
import { NextAuthProvider } from '@ackplus/nest-auth-react';
import { client, authHelpers } from '@/lib/auth';

export default async function RootLayout({ children }) {
  const initialState = await authHelpers.getServerAuth(await cookies());

  return (
    <html lang="en">
      <body>
        <NextAuthProvider client={client} initialState={initialState}>
          {children}
        </NextAuthProvider>
      </body>
    </html>
  );
}

// app/api/private/route.ts
import { authHelpers } from '@/lib/auth';

export const GET = authHelpers.withAuth(async (req) => {
  return Response.json({ user: req.auth.user });
});

Full Next.js 向导 —

角色标识权限( L)

import { RequireRole, RequirePermission, useHasRole } from '@ackplus/nest-auth-react';

<RequireRole role="admin" fallback={<NotAuthorized />}>
  <AdminPanel />
</RequireRole>

<RequirePermission permission={['orders.read', 'orders.write']} matchAll>
  <OrderEditor />
</RequirePermission>

// Or via hook
const isAdmin = useHasRole('admin');

文档

配套软件包

所有4个包都与同版本号一起放出. 把它们绑在同一个版本.

链接

• 📚 文档
• 💬 问题跟踪器
• 📦 GitHub 仓库

许可证

麻省理工学院