React 模式接入

React 模式提供 RootAuth 完整的 UI 页面。仅支持 React 18+ 框架。该实例同样包含 API 模式中的所有方法。

1. 准备工作

在 RootAuth 工作台 创建应用，并复制 app_id（格式如 app_******）。

2.前置条件

请在项目根目录的 .npmrc 文件中添加下面这行配置：

@rootauth:registry=http://gitlab.standard-software.co/api/v4/projects/12421/packages/npm/

3. 安装依赖包 

npm install @rootauth/react react react-dom

4. 创建 RootAuth 页面组件

新建 RootAuth.tsx（或 RootAuth.jsx）：

// RootAuth.tsx
import { RootAuthClient, RootAuthMount, type RootAuthClientConfig } from "@rootauth/react";

const options: RootAuthClientConfig = {
  app_id: "******",
  base_path: "/auth",
}
const client = new RootAuthClient(options);

function AuthPage() {
  return <RootAuthMount client={client} />;
}

export default AuthPage;

4.1 配置项说明

React 模式支持与 Vue 模式完全相同的配置项（app_id、base_path、api_base_url、redirect_uri、onLoginSuccess、onRegisterSuccess 等）。

 interface RootAuthClientConfig {
  app_id: string // 必填项，从工作台应用配置获取
  /** hosted模式下路由基础路径，如 '/auth' 则路由为 /auth/login、/auth/register、/auth/reset-password 等；不传则从站点根路径 / 开始 */
  base_path?: string
  api_base_url?: string // 请求后端api接口的路径，默认为https://rootauth-api.rootauth.com
  redirect_uri?: string // 登录成功后跳转的路径，默认为根路径location.origin
  state?: string // 自定义参数，原样在接口返回
  locale?: string // 传入当前语言，默认为zh-CN，当前支持zh-CN、en-US
  scope?: string[]  // scope映射关系，默认为['openid']，想要获取头像、用户名等，在该字段添加email、username
  grant_type?: string // 授权模式，默认为authorization_code
  enable_google_one_tap?: boolean // 是否开启Google Onetap登陆，默认为false
  /** hosted模式登录成功回调；返回 false 时不执行默认跳转 */
  onLoginSuccess?: LoginSuccessCallback;
  /** hosted模式注册成功回调；返回 false 时不执行默认跳转 */
  onRegisterSuccess?: RegisterSuccessCallback;
}

5. 在路由中挂载

在您的路由配置文件（如 App.tsx）中添加 /auth/* 路由：

// App.tsx
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import AuthPage from "./RootAuth";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/auth/*" element={<AuthPage />} /> // 添加/auth对应的路由
      </Routes>
    </BrowserRouter>
  );
}

export default App;

6. 其他方法

React 模式的客户端实例同样支持：