Auth0 ACUL 反应 SDK

使用 Auth0 通用登录的开发者可以使用这个 React SDK 来自定义诸如登录,注册,或重置密码等屏幕. 它提供钩子,上下文,和公用设施,以构建与你的品牌相匹配的灵活,类型安全的经验,并提供无缝的用户体验.

页:1

• 快速启动 - 我们的指南设置 SDK 在你的应用程序.
• 指南 - 更多常见案例指南
• 实例 - 不同定制用途的代码片段.

开始

先决条件

在开始前,确保您有以下设置:

1. 自定义域: 确保为您的 Auth0 租户配置自定义域 .
2. 屏幕配置: 在您的 Auth0 流中设置所需的认证屏幕 .
   关于详细步骤,请参见 配置 ACUL 屏幕。 。 。 .

安装

npm install @auth0/auth0-acul-react

同伴依赖 :

npm install react

导入 SDK

SDK 支持 partial imports 对于每个屏幕,允许您只包含您特定使用大小写所需的代码。 这有助于保持你的捆绑尺寸并改进性能.

而且,你可以使用一个 root import 如果您的应用程序需要, 可以装入单个捆绑的所有屏幕 .

部分导入

每个屏幕都有自己的一套钩子和方法. 您只能导入您正在建设的屏幕所需的内容 .

以下示例显示如何导入和使用 SDK 构建 login-id 屏幕.

import { 
  // Context hooks
  useUser,
  useTenant,
  useBranding,
  useClient,
  useOrganization,
  usePrompt,
  useScreen,
  useTenant,
  useTransaction,
  useUser,
  useUntrustedData,
  // Common hooks
  useErrors,
  useTexts,
  // Utility hooks
  useUsernameValidation,
  usePasswordValidation,
  useLoginIdentifiers,
  // Submit methods
  login,
  passkeyLogin,
  federatedLogin,
} from '@auth0/auth0-acul-react/login-id';

根导入

SDK也支持根导入,这样可以让您从一捆装入所有屏幕. 如果您的应用程序根据当前 Auth0 流量在运行时动态地使不同的屏幕运行,例如,当您想要一个能够处理所有可能屏幕的统一构建时,此功能是有用的 .

但对于大多数项目来说. 如果您只需要特定的屏幕, 请使用部分导入来改进性能 .

import {
  // Common hooks
  useCurrentScreen,
  useAuth0Themes,
  useErrors,

  // Screen-specific hooks for multiple screens
  useLoginId,
  useSignupId,
  useResetPassword
} from '@auth0/auth0-acul-react';

类型/ 接口

类型和接口可以从 @auth0/auth0-acul-react/types 安全型和更好的DX.

import type {
  Connection,
  CustomOptions,
  IdentifierType,
  Organizations,
  EnrolledDevice
  // ...other types
} from '@auth0/auth0-acul-react/types';

参考我们 API 参考 对于可用的类型和接口的完整列表.

API 参考

屏幕

钩子

上下文钩 (在所有屏幕中都可用)

• useUser() - 当前用户信息
• useTenant() - 租户配置
• useClient() - 应用程序客户端信息
• useScreen() - 当前屏幕数据和配置
• useTransaction() - 交易状态和方法
• useBranding() - 租户品牌和主题
• useOrganization() - 组织背景(如适用)
• usePrompt() - 当前认证提示
• useUntrustedData() - 来自认证流程的不信任数据
• useExperiment() - 当前屏幕的主动实验中心实验(experimentId, (中文(简体) ), variationId, (中文(简体) ), variationName, (中文(简体) ), variationDescription, (中文(简体) ), config, (中文(简体) ), isControl),或 null 当没有实验活动或屏幕没有选择通过 context_configuration

在特定屏幕上可用

• useCountryCodes() - 可用的电话国家代码和建议的默认值。 只从 login, (中文(简体) ), login-id, (中文(简体) ), signup,以及 signup-id。 。 。 .

工具钩

用于形式验证、投票和标识管理的专门钩:

标识管理

• useLoginIdentifiers() - 获取可用的登录标识类型(电子邮件、电话、用户名)
• useSignupIdentifiers() - 获得可用的注册标识类型,每个类型都有其 required 状态

表格验证

• usePasswordValidation(password, rules) - 实时密码强度验证
• useUsernameValidation(username) - 用户名格式和可用性验证

外交部投票

• useMfaPolling(options) - 管理外务省推动通知投票周期(以及投票同意结果) pending-consent(中文(简体) )
• useResend(options) - 用冷却计时器处理再发送操作

常见钩子

所有屏幕上可用的通用钩:

屏幕管理

• useCurrentScreen() - 获得完整的当前屏幕上下文数据
• useAuth0Themes() - 登录租户品牌和主题配置

处理错误

• useErrors(options) - 有分类的全面错误管理
  • 通过出错类型过滤 : 'validation', (中文(简体) ), 'auth0', (中文(简体) ), 'configuration'
  • 通过字段名称过滤窗体特定错误
  • 个别解雇或所有错误

屏幕特定行动方法

每个屏幕模块导出屏幕动作的方法 :

// Login ID Screen
import {
  loginMethod,
  continueWithFederatedLogin
} from '@auth0/auth0-acul-react/login-id';

// Password Screen
import {
  loginMethod,
  forgotPasswordMethod
} from '@auth0/auth0-acul-react/login-password';

// MFA Push Challenge
import {
  continueMethod,
  resendPushNotification,
  useMfaPolling
} from '@auth0/auth0-acul-react/mfa-push-challenge-push';

实例

• 反应示例 - 完整的反应组件示例
• 反应布尔普拉特 - 全面反应应用程序模板

* 反馈

捐款

我们赞赏反馈和对这次再投资的贡献! 在开始前,请参看以下内容:

• Auth0的一般贡献准则
• Auth0 行为守则准则

提出问题

请提供反馈或报告错误 提出我们的问题追踪器。 。 。 .

脆弱性报告

请不要在公共 GitHub 问题跟踪器上报告安全漏洞 。 这个 负责任的披露程序 详细说明披露安全问题的程序.

Auth0是一个易于执行,可适应的认证和授权平台. 学习更多退房 为什么是Auth0?

这个项目根据麻省理工学院的许可证获得许可。 见 自由主义 需要更多信息的文件.