# @frontegg/react 中文文档

规范地址：https://npmcn.com/package/%40frontegg/react/

版本：7\.20\.2
npm 元数据更新时间：2026-11-11T12:31:31.714Z
中文译文更新时间：2026-11-15T14:49:04.434Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40frontegg/react
原文对照：https://npmcn.com/package/%40frontegg/react/?lang=original
项目主页：https://github.com/frontegg/frontegg-react#readme
源码仓库：https://github.com/frontegg/frontegg-react

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：236 kB，19 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \>16\.9\.0，react-dom \>16\.9\.0，react-router-dom \>5\.0\.0
- 首次发布：2019-09-01T19:38:51.217Z
- 最新版本发布：2026-11-11T12:31:31.309Z
- 近 30 天下载量：721288（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：1590（近 12 个月 127 个）

## 中文简介

  

![Frontegg Logo](https://fronteggstuff.blob.core.windows.net/frongegg-logos/logo-transparent.png)

## 安装

```sh
npm install @frontegg/react
```

也可以使用：`pnpm add @frontegg/react`、`yarn add @frontegg/react`、`bun add @frontegg/react`

## README

  

![Frontegg Logo](https://fronteggstuff.blob.core.windows.net/frongegg-logos/logo-transparent.png)

### Frontegg React.js (英语)

Frontegg是一个网络平台,SaaS公司可以在此设置其完全管理,可伸缩和品牌意识的-SaaS功能,并整合到其SaaS门户网站中,最多有5行代码.  

## 安装

使用软件包管理器 [无](https://www.npmjs.com/) 用于安装foregg React.JS库.

```bash
npm install @frontegg/react react-router-dom
```

## 配置

用 `Frontegg Provider`数字 :

```js
import React from 'react';
import ReactDOM from 'react-dom'; // For react 17
// For react 18: import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

import { FronteggProvider } from '@frontegg/react';

const contextOptions = {
  baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com',
  clientId: '[YOUR-CLIENT-ID]'
};

// For react 18: 
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
ReactDOM.render(
    <FronteggProvider contextOptions={contextOptions} hostedLoginBox={true}>
        <App />
    </FronteggProvider>,
    document.getElementById('root')
);
```

为了获得你的子域和客户端ID,访问我们的门户.

### 重定向到登录

使用 Frontegg 使用 Auth 钩,您可以确定用户是否被认证 . 如果用户没有被认证,您可以通过LoginWithRedict hook通过如下所示的使用重新引导用户登录.

```js
import './App.css';
// import { useEffect } from 'react';
import { ContextHolder } from '@frontegg/rest-api';
import { useAuth, useLoginWithRedirect } from '@frontegg/react';

function App() {
  const { user, isAuthenticated } = useAuth();
  const loginWithRedirect = useLoginWithRedirect();

  // Uncomment this to redirect to login automatically
  // useEffect(() => {
  //   if (!isAuthenticated) {
  //     loginWithRedirect();
  //   }
  // }, [isAuthenticated, loginWithRedirect]);

  const logout = () => {
    const baseUrl = ContextHolder.getContext().baseUrl;
    window.location.href = `${baseUrl}/oauth/logout?post_logout_redirect_uri=${window.location}`;
  };

  return (
    <div className='App'>
      {isAuthenticated ? (
        <div>
          <div>
            <img src={user?.profilePictureUrl} alt={user?.name} />
          </div>
          <div>
            <span>Logged in as: {user?.name}</span>
          </div>
          <div>
            <button onClick={() => alert(user.accessToken)}>What is my access token?</button>
          </div>
          <div>
            <button onClick={() => logout()}>Click to logout</button>
          </div>
        </div>
      ) : (
        <div>
          <button onClick={() => loginWithRedirect()}>Click me to login</button>
        </div>
      )}
    </div>
  );
}

export default App;
```

## 整合行政门户

打开行政门户可通过以下代码片段获取.

```js
import { AdminPortal } from '@frontegg/react'

const handleClick = () => {
  AdminPortal.show();
};

<button onClick={handleClick}>Settings</button>
```

## 常见问题

### 如何安装 @frontegg/react？

在项目目录运行 npm install @frontegg/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>16\.9\.0）、react-dom（\>16\.9\.0）、react-router-dom（\>5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @frontegg/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @frontegg/react 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @frontegg/react 可以商用吗？

@frontegg/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @frontegg/react 的下载量有多少？

根据 npm 官方下载统计，@frontegg/react 在 2026/10/16 – 2026/11/14 这 30 天内被下载 721,288 次，日均约 24,043 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @frontegg/react 还在维护吗？

最新版本 7\.20\.2 发布于 2026/11/11（4 天前）；至今共发布 1590 个版本，其中过去 12 个月发布了 127 个；首次发布于 2019/09/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。