@auth0/auth0-acul-react 1.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +128 -0
- package/dist/export/getting-started.d.ts +336 -0
- package/dist/export/hooks.d.ts +1 -0
- package/dist/export/index.d.ts +6 -0
- package/dist/export/screens.d.ts +76 -0
- package/dist/hooks/common/auth0-themes.d.ts +48 -0
- package/dist/hooks/common/auth0-themes.js +2 -0
- package/dist/hooks/common/auth0-themes.js.map +1 -0
- package/dist/hooks/common/current-screen.d.ts +75 -0
- package/dist/hooks/common/current-screen.js +2 -0
- package/dist/hooks/common/current-screen.js.map +1 -0
- package/dist/hooks/common/errors.d.ts +103 -0
- package/dist/hooks/common/errors.js +2 -0
- package/dist/hooks/common/errors.js.map +1 -0
- package/dist/hooks/context/index.d.ts +120 -0
- package/dist/hooks/context/index.js +2 -0
- package/dist/hooks/context/index.js.map +1 -0
- package/dist/hooks/index.d.ts +10 -0
- package/dist/hooks/utility/login-identifiers.d.ts +26 -0
- package/dist/hooks/utility/login-identifiers.js +2 -0
- package/dist/hooks/utility/login-identifiers.js.map +1 -0
- package/dist/hooks/utility/polling-manager.d.ts +93 -0
- package/dist/hooks/utility/polling-manager.js +2 -0
- package/dist/hooks/utility/polling-manager.js.map +1 -0
- package/dist/hooks/utility/resend-manager.d.ts +74 -0
- package/dist/hooks/utility/resend-manager.js +2 -0
- package/dist/hooks/utility/resend-manager.js.map +1 -0
- package/dist/hooks/utility/signup-identifiers.d.ts +34 -0
- package/dist/hooks/utility/signup-identifiers.js +2 -0
- package/dist/hooks/utility/signup-identifiers.js.map +1 -0
- package/dist/hooks/utility/validate-password.d.ts +36 -0
- package/dist/hooks/utility/validate-password.js +2 -0
- package/dist/hooks/utility/validate-password.js.map +1 -0
- package/dist/hooks/utility/validate-username.d.ts +58 -0
- package/dist/hooks/utility/validate-username.js +2 -0
- package/dist/hooks/utility/validate-username.js.map +1 -0
- package/dist/index.d.ts +78 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/screens/accept-invitation.d.ts +5 -0
- package/dist/screens/accept-invitation.js +2 -0
- package/dist/screens/accept-invitation.js.map +1 -0
- package/dist/screens/consent.d.ts +6 -0
- package/dist/screens/consent.js +2 -0
- package/dist/screens/consent.js.map +1 -0
- package/dist/screens/customized-consent.d.ts +6 -0
- package/dist/screens/customized-consent.js +2 -0
- package/dist/screens/customized-consent.js.map +1 -0
- package/dist/screens/device-code-activation-allowed.d.ts +4 -0
- package/dist/screens/device-code-activation-allowed.js +2 -0
- package/dist/screens/device-code-activation-allowed.js.map +1 -0
- package/dist/screens/device-code-activation-denied.d.ts +4 -0
- package/dist/screens/device-code-activation-denied.js +2 -0
- package/dist/screens/device-code-activation-denied.js.map +1 -0
- package/dist/screens/device-code-activation.d.ts +5 -0
- package/dist/screens/device-code-activation.js +2 -0
- package/dist/screens/device-code-activation.js.map +1 -0
- package/dist/screens/device-code-confirmation.d.ts +6 -0
- package/dist/screens/device-code-confirmation.js +2 -0
- package/dist/screens/device-code-confirmation.js.map +1 -0
- package/dist/screens/email-identifier-challenge.d.ts +8 -0
- package/dist/screens/email-identifier-challenge.js +2 -0
- package/dist/screens/email-identifier-challenge.js.map +1 -0
- package/dist/screens/email-otp-challenge.d.ts +7 -0
- package/dist/screens/email-otp-challenge.js +2 -0
- package/dist/screens/email-otp-challenge.js.map +1 -0
- package/dist/screens/email-verification-result.d.ts +4 -0
- package/dist/screens/email-verification-result.js +2 -0
- package/dist/screens/email-verification-result.js.map +1 -0
- package/dist/screens/interstitial-captcha.d.ts +4 -0
- package/dist/screens/interstitial-captcha.js +2 -0
- package/dist/screens/interstitial-captcha.js.map +1 -0
- package/dist/screens/login-email-verification.d.ts +7 -0
- package/dist/screens/login-email-verification.js +2 -0
- package/dist/screens/login-email-verification.js.map +1 -0
- package/dist/screens/login-id.d.ts +9 -0
- package/dist/screens/login-id.js +2 -0
- package/dist/screens/login-id.js.map +1 -0
- package/dist/screens/login-password.d.ts +6 -0
- package/dist/screens/login-password.js +2 -0
- package/dist/screens/login-password.js.map +1 -0
- package/dist/screens/login-passwordless-email-code.d.ts +7 -0
- package/dist/screens/login-passwordless-email-code.js +2 -0
- package/dist/screens/login-passwordless-email-code.js.map +1 -0
- package/dist/screens/login-passwordless-sms-otp.d.ts +7 -0
- package/dist/screens/login-passwordless-sms-otp.js +2 -0
- package/dist/screens/login-passwordless-sms-otp.js.map +1 -0
- package/dist/screens/login.d.ts +8 -0
- package/dist/screens/login.js +2 -0
- package/dist/screens/login.js.map +1 -0
- package/dist/screens/logout-aborted.d.ts +4 -0
- package/dist/screens/logout-aborted.js +2 -0
- package/dist/screens/logout-aborted.js.map +1 -0
- package/dist/screens/logout-complete.d.ts +4 -0
- package/dist/screens/logout-complete.js +2 -0
- package/dist/screens/logout-complete.js.map +1 -0
- package/dist/screens/logout.d.ts +5 -0
- package/dist/screens/logout.js +2 -0
- package/dist/screens/logout.js.map +1 -0
- package/dist/screens/mfa-begin-enroll-options.d.ts +5 -0
- package/dist/screens/mfa-begin-enroll-options.js +2 -0
- package/dist/screens/mfa-begin-enroll-options.js.map +1 -0
- package/dist/screens/mfa-country-codes.d.ts +6 -0
- package/dist/screens/mfa-country-codes.js +2 -0
- package/dist/screens/mfa-country-codes.js.map +1 -0
- package/dist/screens/mfa-detect-browser-capabilities.d.ts +5 -0
- package/dist/screens/mfa-detect-browser-capabilities.js +2 -0
- package/dist/screens/mfa-detect-browser-capabilities.js.map +1 -0
- package/dist/screens/mfa-email-challenge.d.ts +8 -0
- package/dist/screens/mfa-email-challenge.js +2 -0
- package/dist/screens/mfa-email-challenge.js.map +1 -0
- package/dist/screens/mfa-email-list.d.ts +6 -0
- package/dist/screens/mfa-email-list.js +2 -0
- package/dist/screens/mfa-email-list.js.map +1 -0
- package/dist/screens/mfa-enroll-result.d.ts +4 -0
- package/dist/screens/mfa-enroll-result.js +2 -0
- package/dist/screens/mfa-enroll-result.js.map +1 -0
- package/dist/screens/mfa-login-options.d.ts +5 -0
- package/dist/screens/mfa-login-options.js +2 -0
- package/dist/screens/mfa-login-options.js.map +1 -0
- package/dist/screens/mfa-otp-challenge.d.ts +6 -0
- package/dist/screens/mfa-otp-challenge.js +2 -0
- package/dist/screens/mfa-otp-challenge.js.map +1 -0
- package/dist/screens/mfa-otp-enrollment-code.d.ts +6 -0
- package/dist/screens/mfa-otp-enrollment-code.js +2 -0
- package/dist/screens/mfa-otp-enrollment-code.js.map +1 -0
- package/dist/screens/mfa-otp-enrollment-qr.d.ts +7 -0
- package/dist/screens/mfa-otp-enrollment-qr.js +2 -0
- package/dist/screens/mfa-otp-enrollment-qr.js.map +1 -0
- package/dist/screens/mfa-phone-challenge.d.ts +7 -0
- package/dist/screens/mfa-phone-challenge.js +2 -0
- package/dist/screens/mfa-phone-challenge.js.map +1 -0
- package/dist/screens/mfa-phone-enrollment.d.ts +7 -0
- package/dist/screens/mfa-phone-enrollment.js +2 -0
- package/dist/screens/mfa-phone-enrollment.js.map +1 -0
- package/dist/screens/mfa-push-challenge-push.d.ts +9 -0
- package/dist/screens/mfa-push-challenge-push.js +2 -0
- package/dist/screens/mfa-push-challenge-push.js.map +1 -0
- package/dist/screens/mfa-push-enrollment-qr.d.ts +5 -0
- package/dist/screens/mfa-push-enrollment-qr.js +2 -0
- package/dist/screens/mfa-push-enrollment-qr.js.map +1 -0
- package/dist/screens/mfa-push-list.d.ts +6 -0
- package/dist/screens/mfa-push-list.js +2 -0
- package/dist/screens/mfa-push-list.js.map +1 -0
- package/dist/screens/mfa-push-welcome.d.ts +6 -0
- package/dist/screens/mfa-push-welcome.js +2 -0
- package/dist/screens/mfa-push-welcome.js.map +1 -0
- package/dist/screens/mfa-recovery-code-challenge-new-code.d.ts +5 -0
- package/dist/screens/mfa-recovery-code-challenge-new-code.js +2 -0
- package/dist/screens/mfa-recovery-code-challenge-new-code.js.map +1 -0
- package/dist/screens/mfa-recovery-code-challenge.d.ts +6 -0
- package/dist/screens/mfa-recovery-code-challenge.js +2 -0
- package/dist/screens/mfa-recovery-code-challenge.js.map +1 -0
- package/dist/screens/mfa-recovery-code-enrollment.d.ts +5 -0
- package/dist/screens/mfa-recovery-code-enrollment.js +2 -0
- package/dist/screens/mfa-recovery-code-enrollment.js.map +1 -0
- package/dist/screens/mfa-sms-challenge.d.ts +10 -0
- package/dist/screens/mfa-sms-challenge.js +2 -0
- package/dist/screens/mfa-sms-challenge.js.map +1 -0
- package/dist/screens/mfa-sms-enrollment.d.ts +10 -0
- package/dist/screens/mfa-sms-enrollment.js +2 -0
- package/dist/screens/mfa-sms-enrollment.js.map +1 -0
- package/dist/screens/mfa-sms-list.d.ts +6 -0
- package/dist/screens/mfa-sms-list.js +2 -0
- package/dist/screens/mfa-sms-list.js.map +1 -0
- package/dist/screens/mfa-voice-challenge.d.ts +10 -0
- package/dist/screens/mfa-voice-challenge.js +2 -0
- package/dist/screens/mfa-voice-challenge.js.map +1 -0
- package/dist/screens/mfa-voice-enrollment.d.ts +7 -0
- package/dist/screens/mfa-voice-enrollment.js +2 -0
- package/dist/screens/mfa-voice-enrollment.js.map +1 -0
- package/dist/screens/mfa-webauthn-change-key-nickname.d.ts +5 -0
- package/dist/screens/mfa-webauthn-change-key-nickname.js +2 -0
- package/dist/screens/mfa-webauthn-change-key-nickname.js.map +1 -0
- package/dist/screens/mfa-webauthn-enrollment-success.d.ts +5 -0
- package/dist/screens/mfa-webauthn-enrollment-success.js +2 -0
- package/dist/screens/mfa-webauthn-enrollment-success.js.map +1 -0
- package/dist/screens/mfa-webauthn-error.d.ts +8 -0
- package/dist/screens/mfa-webauthn-error.js +2 -0
- package/dist/screens/mfa-webauthn-error.js.map +1 -0
- package/dist/screens/mfa-webauthn-not-available-error.d.ts +5 -0
- package/dist/screens/mfa-webauthn-not-available-error.js +2 -0
- package/dist/screens/mfa-webauthn-not-available-error.js.map +1 -0
- package/dist/screens/mfa-webauthn-platform-challenge.d.ts +7 -0
- package/dist/screens/mfa-webauthn-platform-challenge.js +2 -0
- package/dist/screens/mfa-webauthn-platform-challenge.js.map +1 -0
- package/dist/screens/mfa-webauthn-platform-enrollment.d.ts +8 -0
- package/dist/screens/mfa-webauthn-platform-enrollment.js +2 -0
- package/dist/screens/mfa-webauthn-platform-enrollment.js.map +1 -0
- package/dist/screens/mfa-webauthn-roaming-challenge.d.ts +7 -0
- package/dist/screens/mfa-webauthn-roaming-challenge.js +2 -0
- package/dist/screens/mfa-webauthn-roaming-challenge.js.map +1 -0
- package/dist/screens/mfa-webauthn-roaming-enrollment.d.ts +7 -0
- package/dist/screens/mfa-webauthn-roaming-enrollment.js +2 -0
- package/dist/screens/mfa-webauthn-roaming-enrollment.js.map +1 -0
- package/dist/screens/organization-picker.d.ts +9 -0
- package/dist/screens/organization-picker.js +2 -0
- package/dist/screens/organization-picker.js.map +1 -0
- package/dist/screens/organization-selection.d.ts +5 -0
- package/dist/screens/organization-selection.js +2 -0
- package/dist/screens/organization-selection.js.map +1 -0
- package/dist/screens/passkey-enrollment-local.d.ts +6 -0
- package/dist/screens/passkey-enrollment-local.js +2 -0
- package/dist/screens/passkey-enrollment-local.js.map +1 -0
- package/dist/screens/passkey-enrollment.d.ts +6 -0
- package/dist/screens/passkey-enrollment.js +2 -0
- package/dist/screens/passkey-enrollment.js.map +1 -0
- package/dist/screens/phone-identifier-challenge.d.ts +8 -0
- package/dist/screens/phone-identifier-challenge.js +2 -0
- package/dist/screens/phone-identifier-challenge.js.map +1 -0
- package/dist/screens/phone-identifier-enrollment.d.ts +6 -0
- package/dist/screens/phone-identifier-enrollment.js +2 -0
- package/dist/screens/phone-identifier-enrollment.js.map +1 -0
- package/dist/screens/redeem-ticket.d.ts +5 -0
- package/dist/screens/redeem-ticket.js +2 -0
- package/dist/screens/redeem-ticket.js.map +1 -0
- package/dist/screens/reset-password-email.d.ts +5 -0
- package/dist/screens/reset-password-email.js +2 -0
- package/dist/screens/reset-password-email.js.map +1 -0
- package/dist/screens/reset-password-error.d.ts +4 -0
- package/dist/screens/reset-password-error.js +2 -0
- package/dist/screens/reset-password-error.js.map +1 -0
- package/dist/screens/reset-password-mfa-email-challenge.d.ts +8 -0
- package/dist/screens/reset-password-mfa-email-challenge.js +2 -0
- package/dist/screens/reset-password-mfa-email-challenge.js.map +1 -0
- package/dist/screens/reset-password-mfa-otp-challenge.d.ts +6 -0
- package/dist/screens/reset-password-mfa-otp-challenge.js +2 -0
- package/dist/screens/reset-password-mfa-otp-challenge.js.map +1 -0
- package/dist/screens/reset-password-mfa-phone-challenge.d.ts +6 -0
- package/dist/screens/reset-password-mfa-phone-challenge.js +2 -0
- package/dist/screens/reset-password-mfa-phone-challenge.js.map +1 -0
- package/dist/screens/reset-password-mfa-push-challenge-push.d.ts +9 -0
- package/dist/screens/reset-password-mfa-push-challenge-push.js +2 -0
- package/dist/screens/reset-password-mfa-push-challenge-push.js.map +1 -0
- package/dist/screens/reset-password-mfa-recovery-code-challenge.d.ts +6 -0
- package/dist/screens/reset-password-mfa-recovery-code-challenge.js +2 -0
- package/dist/screens/reset-password-mfa-recovery-code-challenge.js.map +1 -0
- package/dist/screens/reset-password-mfa-sms-challenge.d.ts +9 -0
- package/dist/screens/reset-password-mfa-sms-challenge.js +2 -0
- package/dist/screens/reset-password-mfa-sms-challenge.js.map +1 -0
- package/dist/screens/reset-password-mfa-voice-challenge.d.ts +9 -0
- package/dist/screens/reset-password-mfa-voice-challenge.js +2 -0
- package/dist/screens/reset-password-mfa-voice-challenge.js.map +1 -0
- package/dist/screens/reset-password-mfa-webauthn-platform-challenge.d.ts +7 -0
- package/dist/screens/reset-password-mfa-webauthn-platform-challenge.js +2 -0
- package/dist/screens/reset-password-mfa-webauthn-platform-challenge.js.map +1 -0
- package/dist/screens/reset-password-mfa-webauthn-roaming-challenge.d.ts +7 -0
- package/dist/screens/reset-password-mfa-webauthn-roaming-challenge.js +2 -0
- package/dist/screens/reset-password-mfa-webauthn-roaming-challenge.js.map +1 -0
- package/dist/screens/reset-password-request.d.ts +7 -0
- package/dist/screens/reset-password-request.js +2 -0
- package/dist/screens/reset-password-request.js.map +1 -0
- package/dist/screens/reset-password-success.d.ts +4 -0
- package/dist/screens/reset-password-success.js +2 -0
- package/dist/screens/reset-password-success.js.map +1 -0
- package/dist/screens/reset-password.d.ts +6 -0
- package/dist/screens/reset-password.js +2 -0
- package/dist/screens/reset-password.js.map +1 -0
- package/dist/screens/signup-id.d.ts +9 -0
- package/dist/screens/signup-id.js +2 -0
- package/dist/screens/signup-id.js.map +1 -0
- package/dist/screens/signup-password.d.ts +7 -0
- package/dist/screens/signup-password.js +2 -0
- package/dist/screens/signup-password.js.map +1 -0
- package/dist/screens/signup.d.ts +10 -0
- package/dist/screens/signup.js +2 -0
- package/dist/screens/signup.js.map +1 -0
- package/dist/state/error-store.d.ts +47 -0
- package/dist/state/error-store.js +2 -0
- package/dist/state/error-store.js.map +1 -0
- package/dist/state/instance-store.d.ts +19 -0
- package/dist/state/instance-store.js +2 -0
- package/dist/state/instance-store.js.map +1 -0
- package/dist/telemetry.d.ts +8 -0
- package/dist/telemetry.js +2 -0
- package/dist/telemetry.js.map +1 -0
- package/dist/types/index.d.ts +2 -0
- package/package.json +61 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2015-present Auth0, Inc. <support@auth0.com> (http://auth0.com)
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# @auth0/auth0-acul-react
|
|
2
|
+
Developers using Auth0’s Universal Login can use this React SDK to customize screens like login, signup, or reset password. It provides hooks, context, and utilities to build flexible, type-safe experiences that match your brand and deliver a seamless user experience.
|
|
3
|
+
|
|
4
|
+
<div align="center">
|
|
5
|
+
|
|
6
|
+
[](https://www.npmjs.com/package/@auth0/auth0-acul-react)
|
|
7
|
+
[](https://www.npmjs.com/package/@auth0/auth0-acul-react)
|
|
8
|
+
[](https://codecov.io/gh/auth0/auth0-acul-react)
|
|
9
|
+
[](https://opensource.org/licenses/MIT)
|
|
10
|
+
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<div align='center'>
|
|
14
|
+
|
|
15
|
+
📚 [Documentation](#-documentation) | 🚀 [Getting Started](#-getting-started) | 💻 [API Reference](#-api-reference) | 💬 [Feedback](#-feedback)
|
|
16
|
+
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
## Table of Contents
|
|
20
|
+
- [Installation](#installation)
|
|
21
|
+
- [Importing the SDK](#importing-the-sdk)
|
|
22
|
+
- [Partial Imports](#partial-imports)
|
|
23
|
+
- [Root Imports](#root-imports)
|
|
24
|
+
- [Types / Interfaces](#types--interfaces)
|
|
25
|
+
- [Examples](#examples)
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## Installation
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install @auth0/auth0-acul-react
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Peer dependency:
|
|
35
|
+
```bash
|
|
36
|
+
npm install react
|
|
37
|
+
```
|
|
38
|
+
---
|
|
39
|
+
## Importing the SDK
|
|
40
|
+
The SDK supports `partial imports` for each screen, allowing you to include only the code you need for your specific use case. This helps keep your bundle size small and improves performance.
|
|
41
|
+
Also, you can use a `root import` to load all screens from a single bundle if your app requires it.
|
|
42
|
+
### Partial Imports
|
|
43
|
+
Each screen has its own set of hooks and methods. You can import only what you need for the screen you're building.
|
|
44
|
+
|
|
45
|
+
The following example shows how to import and use SDK to build `login-id` screen.
|
|
46
|
+
```tsx
|
|
47
|
+
import {
|
|
48
|
+
// Context hooks
|
|
49
|
+
useUser,
|
|
50
|
+
useTenant,
|
|
51
|
+
useBranding,
|
|
52
|
+
useClient,
|
|
53
|
+
useOrganization,
|
|
54
|
+
usePrompt,
|
|
55
|
+
useScreen,
|
|
56
|
+
useTenant,
|
|
57
|
+
useTransaction,
|
|
58
|
+
useUser,
|
|
59
|
+
useUntrustedData,
|
|
60
|
+
// Common hooks
|
|
61
|
+
useErrors,
|
|
62
|
+
useTexts,
|
|
63
|
+
// Utility hooks
|
|
64
|
+
useUsernameValidation,
|
|
65
|
+
usePasswordValidation,
|
|
66
|
+
useLoginIdentifiers,
|
|
67
|
+
// Submit methods
|
|
68
|
+
login,
|
|
69
|
+
passkeyLogin,
|
|
70
|
+
federatedLogin,
|
|
71
|
+
} from '@auth0/auth0-acul-react/login-id';
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
### Root Imports
|
|
77
|
+
|
|
78
|
+
The SDK also supports a root import, which lets you load all screens from a single bundle.
|
|
79
|
+
This is useful if your app dynamically renders different screens at runtime based on the current Auth0 flow, for example, when you want one unified build that can handle all possible screens.
|
|
80
|
+
|
|
81
|
+
However, root imports aren’t ideal for most projects since they can increase bundle size.
|
|
82
|
+
If you only need specific screens, use partial imports instead for better performance.
|
|
83
|
+
|
|
84
|
+
```ts
|
|
85
|
+
import {
|
|
86
|
+
// Common hooks
|
|
87
|
+
useCurrentScreen,
|
|
88
|
+
useAuth0Themes,
|
|
89
|
+
useErrors,
|
|
90
|
+
|
|
91
|
+
// Screen-specific hooks for multiple screens
|
|
92
|
+
useLoginId,
|
|
93
|
+
useSignupId,
|
|
94
|
+
useResetPassword
|
|
95
|
+
} from '@auth0/auth0-acul-react';
|
|
96
|
+
```
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
### Types / Interfaces
|
|
100
|
+
Typescript types and interfaces can be imported from `@auth0/auth0-acul-react/types` for type safety and better DX.
|
|
101
|
+
```tsx
|
|
102
|
+
import type {
|
|
103
|
+
Connection,
|
|
104
|
+
CustomOptions,
|
|
105
|
+
IdentifierType,
|
|
106
|
+
Organizations,
|
|
107
|
+
EnrolledDevice
|
|
108
|
+
// ...other types
|
|
109
|
+
} from '@auth0/auth0-acul-react/types';
|
|
110
|
+
```
|
|
111
|
+
Refer to our [API Reference](#-api-reference) for the full list of available types and interfaces.
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
## Examples
|
|
116
|
+
Check out the [`examples/`](https://github.com/auth0/universal-login/tree/main/packages/auth0-acul-react/examples) directory for complete, working examples of how to use this SDK to build custom Universal Login screens.
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
<p align="center">
|
|
120
|
+
<picture>
|
|
121
|
+
<source media="(prefers-color-scheme: light)" srcset="https://cdn.auth0.com/website/sdks/logos/auth0_light_mode.png" width="150">
|
|
122
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.auth0.com/website/sdks/logos/auth0_dark_mode.png" width="150">
|
|
123
|
+
<img alt="Auth0 Logo" src="https://cdn.auth0.com/website/sdks/logos/auth0_light_mode.png" width="150">
|
|
124
|
+
</picture>
|
|
125
|
+
</p>
|
|
126
|
+
<p align="center">Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout <a href="https://auth0.com/why-auth0">Why Auth0?</a></p>
|
|
127
|
+
<p align="center">
|
|
128
|
+
This project is licensed under the MIT license. See the <a href="https://github.com/auth0/auth0.js/blob/master/LICENSE"> LICENSE</a> file for more info.</p>
|
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @module Getting Started
|
|
3
|
+
* @description This module provides an overview of how to get started with the Auth0 SDK.
|
|
4
|
+
*
|
|
5
|
+
* # Auth0 ACUL React SDK
|
|
6
|
+
*
|
|
7
|
+
* 
|
|
8
|
+
*
|
|
9
|
+
* [](https://www.npmjs.com/package/@auth0/auth0-acul-react)
|
|
10
|
+
* [](https://www.npmjs.com/package/@auth0/auth0-acul-react)
|
|
11
|
+
* [](https://opensource.org/licenses/MIT)
|
|
12
|
+
*
|
|
13
|
+
* 📚 [Documentation](#documentation) - 🚀 [Getting Started](#getting-started) - 💻 [API Reference](#api-reference) - 💬 [Feedback](#feedback)
|
|
14
|
+
*
|
|
15
|
+
* The **Auth0 ACUL React SDK** provides React hooks for Advanced Customization of Universal Login.
|
|
16
|
+
*
|
|
17
|
+
* It simplifies integrating authentication screens (login, signup, passwordless, MFA, etc.) into your React applications with hooks-based architecture and TypeScript support.
|
|
18
|
+
*
|
|
19
|
+
* ## Features
|
|
20
|
+
*
|
|
21
|
+
* - **React Hooks**: Custom hooks for all authentication screens
|
|
22
|
+
* - **TypeScript Support**: Full TypeScript definitions and IntelliSense
|
|
23
|
+
* - **Context Management**: Automatic screen context and state management
|
|
24
|
+
* - **Error Handling**: Built-in error boundaries and handling
|
|
25
|
+
* - **Polling Hooks**: MFA push notification polling with React state
|
|
26
|
+
*
|
|
27
|
+
* ## Installation
|
|
28
|
+
*
|
|
29
|
+
* You can install the React SDK via [npm](https://npmjs.org):
|
|
30
|
+
*
|
|
31
|
+
* ```bash
|
|
32
|
+
* npm install @auth0/auth0-acul-react
|
|
33
|
+
* ```
|
|
34
|
+
*
|
|
35
|
+
* Or using yarn:
|
|
36
|
+
* ```bash
|
|
37
|
+
* yarn add @auth0/auth0-acul-react
|
|
38
|
+
* ```
|
|
39
|
+
*
|
|
40
|
+
* ## Quick Start
|
|
41
|
+
*
|
|
42
|
+
* ### Basic Login-Id Screen with React Hooks
|
|
43
|
+
*
|
|
44
|
+
* ```tsx
|
|
45
|
+
* import React from 'react';
|
|
46
|
+
* import {
|
|
47
|
+
* useUser,
|
|
48
|
+
* useTenant,
|
|
49
|
+
* useScreen,
|
|
50
|
+
* loginMethod,
|
|
51
|
+
* continueWithFederatedLogin
|
|
52
|
+
* } from '@auth0/auth0-acul-react/login-id';
|
|
53
|
+
*
|
|
54
|
+
* function LoginIdScreen() {
|
|
55
|
+
* const user = useUser();
|
|
56
|
+
* const tenant = useTenant();
|
|
57
|
+
* const screen = useScreen();
|
|
58
|
+
*
|
|
59
|
+
* const handleLogin = async (username: string) => {
|
|
60
|
+
* try {
|
|
61
|
+
* await loginMethod({ username });
|
|
62
|
+
* } catch (error) {
|
|
63
|
+
* console.error('Login failed:', error);
|
|
64
|
+
* }
|
|
65
|
+
* };
|
|
66
|
+
*
|
|
67
|
+
* const handleSocialLogin = async (connection: string) => {
|
|
68
|
+
* try {
|
|
69
|
+
* await continueWithFederatedLogin({ connection });
|
|
70
|
+
* } catch (error) {
|
|
71
|
+
* console.error('Social login failed:', error);
|
|
72
|
+
* }
|
|
73
|
+
* };
|
|
74
|
+
*
|
|
75
|
+
* return (
|
|
76
|
+
* <div>
|
|
77
|
+
* <h1>Welcome to {tenant.display_name}</h1>
|
|
78
|
+
* <form onSubmit={(e) => {
|
|
79
|
+
* e.preventDefault();
|
|
80
|
+
* const formData = new FormData(e.target);
|
|
81
|
+
* handleLogin(formData.get('username'));
|
|
82
|
+
* }}>
|
|
83
|
+
* <input name="username" placeholder="Email or Username" required />
|
|
84
|
+
* <button type="submit">Continue</button>
|
|
85
|
+
* </form>
|
|
86
|
+
*
|
|
87
|
+
* {screen.alternate_connections?.map((conn) => (
|
|
88
|
+
* <button
|
|
89
|
+
* key={conn.name}
|
|
90
|
+
* onClick={() => handleSocialLogin(conn.name)}
|
|
91
|
+
* >
|
|
92
|
+
* Continue with {conn.display_name}
|
|
93
|
+
* </button>
|
|
94
|
+
* ))}
|
|
95
|
+
* </div>
|
|
96
|
+
* );
|
|
97
|
+
* }
|
|
98
|
+
* ```
|
|
99
|
+
*
|
|
100
|
+
* ### MFA Push Challenge with Polling
|
|
101
|
+
*
|
|
102
|
+
* ```tsx
|
|
103
|
+
* import React, { useEffect, useState } from 'react';
|
|
104
|
+
* import {
|
|
105
|
+
* useScreen,
|
|
106
|
+
* useTransaction,
|
|
107
|
+
* useMfaPollingManager,
|
|
108
|
+
* continueMethod,
|
|
109
|
+
* resendPushNotification
|
|
110
|
+
* } from '@auth0/auth0-acul-react/mfa-push-challenge-push';
|
|
111
|
+
*
|
|
112
|
+
* function MfaPushScreen() {
|
|
113
|
+
* const screen = useScreen();
|
|
114
|
+
* const transaction = useTransaction();
|
|
115
|
+
* const [status, setStatus] = useState('waiting');
|
|
116
|
+
*
|
|
117
|
+
* const { isRunning, startPolling, stopPolling } = useMfaPollingManager({
|
|
118
|
+
* intervalMs: 5000,
|
|
119
|
+
* onComplete: async () => {
|
|
120
|
+
* setStatus('approved');
|
|
121
|
+
* await continueMethod();
|
|
122
|
+
* },
|
|
123
|
+
* onError: (error) => {
|
|
124
|
+
* console.error('Polling failed:', error);
|
|
125
|
+
* setStatus('error');
|
|
126
|
+
* }
|
|
127
|
+
* });
|
|
128
|
+
*
|
|
129
|
+
* useEffect(() => {
|
|
130
|
+
* // Auto-start polling when component mounts
|
|
131
|
+
* startPolling();
|
|
132
|
+
* return () => stopPolling();
|
|
133
|
+
* }, []);
|
|
134
|
+
*
|
|
135
|
+
* const handleResend = async () => {
|
|
136
|
+
* try {
|
|
137
|
+
* await resendPushNotification();
|
|
138
|
+
* setStatus('resent');
|
|
139
|
+
* startPolling(); // Restart polling after resend
|
|
140
|
+
* } catch (error) {
|
|
141
|
+
* console.error('Resend failed:', error);
|
|
142
|
+
* }
|
|
143
|
+
* };
|
|
144
|
+
*
|
|
145
|
+
* return (
|
|
146
|
+
* <div>
|
|
147
|
+
* <h2>Push Notification Sent</h2>
|
|
148
|
+
* <p>Please approve the notification on your device</p>
|
|
149
|
+
*
|
|
150
|
+
* {status === 'waiting' && isRunning && (
|
|
151
|
+
* <p>Waiting for approval...</p>
|
|
152
|
+
* )}
|
|
153
|
+
*
|
|
154
|
+
* {status === 'approved' || status === 'denied' && (
|
|
155
|
+
* <p>Approved! Redirecting...</p>
|
|
156
|
+
* )}
|
|
157
|
+
*
|
|
158
|
+
* {status === 'error' && (
|
|
159
|
+
* <p>Something went wrong. Please try again.</p>
|
|
160
|
+
* )}
|
|
161
|
+
*
|
|
162
|
+
* <button onClick={handleResend} disabled={isRunning}>
|
|
163
|
+
* Resend Push Notification
|
|
164
|
+
* </button>
|
|
165
|
+
*
|
|
166
|
+
* <button onClick={stopPolling} disabled={!isRunning}>
|
|
167
|
+
* Cancel
|
|
168
|
+
* </button>
|
|
169
|
+
* </div>
|
|
170
|
+
* );
|
|
171
|
+
* }
|
|
172
|
+
* ```
|
|
173
|
+
*
|
|
174
|
+
* ## Available Hooks by Screen
|
|
175
|
+
*
|
|
176
|
+
* ### Context Hooks (Available in all screens)
|
|
177
|
+
* - `useUser()` - Current user information
|
|
178
|
+
* - `useTenant()` - Tenant configuration
|
|
179
|
+
* - `useClient()` - Application client information
|
|
180
|
+
* - `useScreen()` - Current screen data and configuration
|
|
181
|
+
* - `useTransaction()` - Transaction state and methods
|
|
182
|
+
* - `useBranding()` - Tenant branding and theme
|
|
183
|
+
* - `useOrganization()` - Organization context (if applicable)
|
|
184
|
+
* - `usePrompt()` - Current authentication prompt
|
|
185
|
+
* - `useUntrustedData()` - Untrusted data from the authentication flow
|
|
186
|
+
*
|
|
187
|
+
* ### Utility Hooks
|
|
188
|
+
* Specialized hooks for form validation, polling, and identifier management:
|
|
189
|
+
*
|
|
190
|
+
* #### Identifier Management
|
|
191
|
+
* - `useLoginIdentifiers()` - Get available login identifier types (email, phone, username)
|
|
192
|
+
* - `useSignupIdentifiers()` - Get available signup identifier types, each with its `required` status
|
|
193
|
+
*
|
|
194
|
+
* #### Form Validation
|
|
195
|
+
* - `usePasswordValidation(password, rules)` - Real-time password strength validation
|
|
196
|
+
* - `useUsernameValidation(username)` - Username format and availability validation
|
|
197
|
+
*
|
|
198
|
+
* #### MFA & Polling
|
|
199
|
+
* - `useMfaPolling(options)` - Manage MFA push notification polling lifecycle
|
|
200
|
+
* - `useResend(options)` - Handle resend operations with cooldown timers
|
|
201
|
+
*
|
|
202
|
+
* ### Common Hooks
|
|
203
|
+
* General-purpose hooks available across all screens:
|
|
204
|
+
*
|
|
205
|
+
* #### Screen Management
|
|
206
|
+
* - `useCurrentScreen()` - Get complete current screen context data
|
|
207
|
+
* - `useAuth0Themes()` - Access tenant branding and theme configuration
|
|
208
|
+
*
|
|
209
|
+
* #### Error Handling
|
|
210
|
+
* - `useErrors(options)` - Comprehensive error management with categorization
|
|
211
|
+
* - Filter by error kind: `'client'`, `'server'`, `'dev'`
|
|
212
|
+
* - Filter by field name for form-specific errors
|
|
213
|
+
* - Dismiss individual or all errors
|
|
214
|
+
*
|
|
215
|
+
* ### Screen-Specific Action Methods
|
|
216
|
+
* Each screen module exports methods for screen actions:
|
|
217
|
+
*
|
|
218
|
+
* ```tsx
|
|
219
|
+
* // Login ID Screen
|
|
220
|
+
* import {
|
|
221
|
+
* loginMethod,
|
|
222
|
+
* continueWithFederatedLogin
|
|
223
|
+
* } from '@auth0/auth0-acul-react/login-id';
|
|
224
|
+
*
|
|
225
|
+
* // Password Screen
|
|
226
|
+
* import {
|
|
227
|
+
* loginMethod,
|
|
228
|
+
* forgotPasswordMethod
|
|
229
|
+
* } from '@auth0/auth0-acul-react/login-password';
|
|
230
|
+
*
|
|
231
|
+
* // MFA Push Challenge
|
|
232
|
+
* import {
|
|
233
|
+
* continueMethod,
|
|
234
|
+
* resendPushNotification,
|
|
235
|
+
* useMfaPollingManager
|
|
236
|
+
* } from '@auth0/auth0-acul-react/mfa-push-challenge-push';
|
|
237
|
+
* ```
|
|
238
|
+
*
|
|
239
|
+
* ## Import Patterns
|
|
240
|
+
*
|
|
241
|
+
* ### Screen-Specific Imports (Recommended)
|
|
242
|
+
* ```tsx
|
|
243
|
+
* // Import from specific screen modules
|
|
244
|
+
* import { useUser, loginMethod } from '@auth0/auth0-acul-react/login-id';
|
|
245
|
+
* import { useMfaPollingManager } from '@auth0/auth0-acul-react/mfa-push-challenge-push';
|
|
246
|
+
* ```
|
|
247
|
+
* ## Available Screen Modules
|
|
248
|
+
*
|
|
249
|
+
* | Screen Module | Import Path | Description |
|
|
250
|
+
* |---------------|-------------|-------------|
|
|
251
|
+
* | Login ID | `@auth0/auth0-acul-react/login-id` | Username/email identification |
|
|
252
|
+
* | Login Password | `@auth0/auth0-acul-react/login-password` | Password entry screen |
|
|
253
|
+
* | MFA Push Challenge | `@auth0/auth0-acul-react/mfa-push-challenge-push` | Push notification MFA |
|
|
254
|
+
* | Reset Password MFA Push | `@auth0/auth0-acul-react/reset-password-mfa-push-challenge-push` | Reset password with MFA |
|
|
255
|
+
* | Signup ID | `@auth0/auth0-acul-react/signup-id` | User registration |
|
|
256
|
+
* | Signup Password | `@auth0/auth0-acul-react/signup-password` | Password setup during registration |
|
|
257
|
+
*
|
|
258
|
+
* ## Best Practices
|
|
259
|
+
*
|
|
260
|
+
* ### 1. **Use Screen-Specific Imports**
|
|
261
|
+
* ```tsx
|
|
262
|
+
* // Partial import - recommended
|
|
263
|
+
* import { useSignup } from '@auth0/auth0-acul-react/signup';
|
|
264
|
+
* // Root import
|
|
265
|
+
* import * as Auth0React from '@auth0/auth0-acul-react';
|
|
266
|
+
*
|
|
267
|
+
* const MyComponent = () => {
|
|
268
|
+
* const signupInstance = useSignup();
|
|
269
|
+
* // Use methods or other properties using the instance
|
|
270
|
+
* return (
|
|
271
|
+
* <button onClick={() => signupInstance.signup({ username: 'user', password: 'pass' })}>
|
|
272
|
+
* Sign Up
|
|
273
|
+
* </button>
|
|
274
|
+
* );
|
|
275
|
+
* };
|
|
276
|
+
*
|
|
277
|
+
* ```
|
|
278
|
+
*
|
|
279
|
+
* ### 2. **Handle Loading States**
|
|
280
|
+
* ```tsx
|
|
281
|
+
* function LoginForm() {
|
|
282
|
+
* const [isLoading, setIsLoading] = useState(false);
|
|
283
|
+
*
|
|
284
|
+
* const handleSubmit = async (data) => {
|
|
285
|
+
* setIsLoading(true);
|
|
286
|
+
* try {
|
|
287
|
+
* await loginMethod(data);
|
|
288
|
+
* } finally {
|
|
289
|
+
* setIsLoading(false);
|
|
290
|
+
* }
|
|
291
|
+
* };
|
|
292
|
+
*
|
|
293
|
+
* return (
|
|
294
|
+
* <button disabled={isLoading}>
|
|
295
|
+
* {isLoading ? 'Signing in...' : 'Sign In'}
|
|
296
|
+
* </button>
|
|
297
|
+
* );
|
|
298
|
+
* }
|
|
299
|
+
* ```
|
|
300
|
+
*
|
|
301
|
+
* ## Examples and Resources
|
|
302
|
+
*
|
|
303
|
+
* - [React Examples](https://github.com/auth0/universal-login/tree/master/packages/auth0-acul-react/examples) - Complete React component examples
|
|
304
|
+
* - [React Boilerplate](https://github.com/auth0/auth0-acul-react-boilerplate) - Full React application template
|
|
305
|
+
*
|
|
306
|
+
* ## Feedback and Support
|
|
307
|
+
*
|
|
308
|
+
* ### Contributing
|
|
309
|
+
*
|
|
310
|
+
* We appreciate feedback and contribution to this repo! Before you get started, please see the following:
|
|
311
|
+
*
|
|
312
|
+
* - [Auth0's general contribution guidelines](https://github.com/auth0/open-source-template/blob/master/GENERAL-CONTRIBUTING.md)
|
|
313
|
+
* - [Auth0's code of conduct guidelines](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md)
|
|
314
|
+
*
|
|
315
|
+
* ### Raise an Issue
|
|
316
|
+
*
|
|
317
|
+
* To provide feedback or report a bug, please [raise an issue on our issue tracker](https://github.com/auth0/universal-login/issues).
|
|
318
|
+
*
|
|
319
|
+
* ### Vulnerability Reporting
|
|
320
|
+
*
|
|
321
|
+
* Please do not report security vulnerabilities on the public GitHub issue tracker. The [Responsible Disclosure Program](https://auth0.com/responsible-disclosure-policy) details the procedure for disclosing security issues.
|
|
322
|
+
*
|
|
323
|
+
* ---
|
|
324
|
+
*
|
|
325
|
+
* **Early Access Notice:** This SDK and its associated product are made available only in Early Access ("EA") format and are governed by the Free Trial terms of the [Okta Master Subscription Agreement](https://www.okta.com/agreements/#mastersubscriptionagreement).
|
|
326
|
+
*
|
|
327
|
+
* <p align="center">
|
|
328
|
+
* <picture>
|
|
329
|
+
* <source media="(prefers-color-scheme: light)" srcset="https://cdn.auth0.com/website/sdks/logos/auth0_light_mode.png" width="150">
|
|
330
|
+
* <source media="(prefers-color-scheme: dark)" srcset="https://cdn.auth0.com/website/sdks/logos/auth0_dark_mode.png" width="150">
|
|
331
|
+
* <img alt="Auth0 Logo" src="https://cdn.auth0.com/website/sdks/logos/auth0_light_mode.png" width="150">
|
|
332
|
+
* </picture>
|
|
333
|
+
*</p>
|
|
334
|
+
*
|
|
335
|
+
* This project is licensed under the MIT license. See the [LICENSE](https://github.com/auth0/universal-login/blob/master/LICENSE) file for more info.
|
|
336
|
+
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { usePasswordValidation, useUsernameValidation, useResend, useMfaPolling, useErrors, useAuth0Themes, useCurrentScreen, useLoginIdentifiers, useSignupIdentifiers, } from '../hooks';
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
export * as 'accept-invitation' from '../screens/accept-invitation';
|
|
2
|
+
export * as 'consent' from '../screens/consent';
|
|
3
|
+
export * as 'customized-consent' from '../screens/customized-consent';
|
|
4
|
+
export * as 'login' from '../screens/login';
|
|
5
|
+
export * as 'login-id' from '../screens/login-id';
|
|
6
|
+
export * as 'login-password' from '../screens/login-password';
|
|
7
|
+
export * as 'login-email-verification' from '../screens/login-email-verification';
|
|
8
|
+
export * as 'logout' from '../screens/logout';
|
|
9
|
+
export * as 'logout-aborted' from '../screens/logout-aborted';
|
|
10
|
+
export * as 'logout-complete' from '../screens/logout-complete';
|
|
11
|
+
export * as 'signup-id' from '../screens/signup-id';
|
|
12
|
+
export * as 'signup-password' from '../screens/signup-password';
|
|
13
|
+
export * as 'signup' from '../screens/signup';
|
|
14
|
+
export * as 'login-passwordless-email-code' from '../screens/login-passwordless-email-code';
|
|
15
|
+
export * as 'login-passwordless-sms-otp' from '../screens/login-passwordless-sms-otp';
|
|
16
|
+
export * as 'reset-password' from '../screens/reset-password';
|
|
17
|
+
export * as 'reset-password-email' from '../screens/reset-password-email';
|
|
18
|
+
export * as 'reset-password-error' from '../screens/reset-password-error';
|
|
19
|
+
export * as 'reset-password-request' from '../screens/reset-password-request';
|
|
20
|
+
export * as 'reset-password-success' from '../screens/reset-password-success';
|
|
21
|
+
export * as 'reset-password-mfa-email-challenge' from '../screens/reset-password-mfa-email-challenge';
|
|
22
|
+
export * as 'reset-password-mfa-otp-challenge' from '../screens/reset-password-mfa-otp-challenge';
|
|
23
|
+
export * as 'reset-password-mfa-phone-challenge' from '../screens/reset-password-mfa-phone-challenge';
|
|
24
|
+
export * as 'reset-password-mfa-push-challenge-push' from '../screens/reset-password-mfa-push-challenge-push';
|
|
25
|
+
export * as 'reset-password-mfa-recovery-code-challenge' from '../screens/reset-password-mfa-recovery-code-challenge';
|
|
26
|
+
export * as 'reset-password-mfa-sms-challenge' from '../screens/reset-password-mfa-sms-challenge';
|
|
27
|
+
export * as 'reset-password-mfa-voice-challenge' from '../screens/reset-password-mfa-voice-challenge';
|
|
28
|
+
export * as 'reset-password-mfa-webauthn-platform-challenge' from '../screens/reset-password-mfa-webauthn-platform-challenge';
|
|
29
|
+
export * as 'reset-password-mfa-webauthn-roaming-challenge' from '../screens/reset-password-mfa-webauthn-roaming-challenge';
|
|
30
|
+
export * as 'mfa-begin-enroll-options' from '../screens/mfa-begin-enroll-options';
|
|
31
|
+
export * as 'mfa-country-codes' from '../screens/mfa-country-codes';
|
|
32
|
+
export * as 'mfa-detect-browser-capabilities' from '../screens/mfa-detect-browser-capabilities';
|
|
33
|
+
export * as 'mfa-enroll-result' from '../screens/mfa-enroll-result';
|
|
34
|
+
export * as 'mfa-login-options' from '../screens/mfa-login-options';
|
|
35
|
+
export * as 'mfa-email-challenge' from '../screens/mfa-email-challenge';
|
|
36
|
+
export * as 'mfa-email-list' from '../screens/mfa-email-list';
|
|
37
|
+
export * as 'mfa-otp-challenge' from '../screens/mfa-otp-challenge';
|
|
38
|
+
export * as 'mfa-otp-enrollment-code' from '../screens/mfa-otp-enrollment-code';
|
|
39
|
+
export * as 'mfa-otp-enrollment-qr' from '../screens/mfa-otp-enrollment-qr';
|
|
40
|
+
export * as 'mfa-phone-challenge' from '../screens/mfa-phone-challenge';
|
|
41
|
+
export * as 'mfa-phone-enrollment' from '../screens/mfa-phone-enrollment';
|
|
42
|
+
export * as 'mfa-push-challenge-push' from '../screens/mfa-push-challenge-push';
|
|
43
|
+
export * as 'mfa-push-enrollment-qr' from '../screens/mfa-push-enrollment-qr';
|
|
44
|
+
export * as 'mfa-push-list' from '../screens/mfa-push-list';
|
|
45
|
+
export * as 'mfa-push-welcome' from '../screens/mfa-push-welcome';
|
|
46
|
+
export * as 'mfa-recovery-code-challenge' from '../screens/mfa-recovery-code-challenge';
|
|
47
|
+
export * as 'mfa-recovery-code-challenge-new-code' from '../screens/mfa-recovery-code-challenge-new-code';
|
|
48
|
+
export * as 'mfa-recovery-code-enrollment' from '../screens/mfa-recovery-code-enrollment';
|
|
49
|
+
export * as 'mfa-sms-challenge' from '../screens/mfa-sms-challenge';
|
|
50
|
+
export * as 'mfa-sms-enrollment' from '../screens/mfa-sms-enrollment';
|
|
51
|
+
export * as 'mfa-sms-list' from '../screens/mfa-sms-list';
|
|
52
|
+
export * as 'mfa-voice-challenge' from '../screens/mfa-voice-challenge';
|
|
53
|
+
export * as 'mfa-voice-enrollment' from '../screens/mfa-voice-enrollment';
|
|
54
|
+
export * as 'mfa-webauthn-change-key-nickname' from '../screens/mfa-webauthn-change-key-nickname';
|
|
55
|
+
export * as 'mfa-webauthn-enrollment-success' from '../screens/mfa-webauthn-enrollment-success';
|
|
56
|
+
export * as 'mfa-webauthn-error' from '../screens/mfa-webauthn-error';
|
|
57
|
+
export * as 'mfa-webauthn-not-available-error' from '../screens/mfa-webauthn-not-available-error';
|
|
58
|
+
export * as 'mfa-webauthn-platform-challenge' from '../screens/mfa-webauthn-platform-challenge';
|
|
59
|
+
export * as 'mfa-webauthn-platform-enrollment' from '../screens/mfa-webauthn-platform-enrollment';
|
|
60
|
+
export * as 'mfa-webauthn-roaming-challenge' from '../screens/mfa-webauthn-roaming-challenge';
|
|
61
|
+
export * as 'mfa-webauthn-roaming-enrollment' from '../screens/mfa-webauthn-roaming-enrollment';
|
|
62
|
+
export * as 'organization-picker' from '../screens/organization-picker';
|
|
63
|
+
export * as 'organization-selection' from '../screens/organization-selection';
|
|
64
|
+
export * as 'passkey-enrollment' from '../screens/passkey-enrollment';
|
|
65
|
+
export * as 'passkey-enrollment-local' from '../screens/passkey-enrollment-local';
|
|
66
|
+
export * as 'phone-identifier-challenge' from '../screens/phone-identifier-challenge';
|
|
67
|
+
export * as 'phone-identifier-enrollment' from '../screens/phone-identifier-enrollment';
|
|
68
|
+
export * as 'email-identifier-challenge' from '../screens/email-identifier-challenge';
|
|
69
|
+
export * as 'email-otp-challenge' from '../screens/email-otp-challenge';
|
|
70
|
+
export * as 'email-verification-result' from '../screens/email-verification-result';
|
|
71
|
+
export * as 'device-code-activation' from '../screens/device-code-activation';
|
|
72
|
+
export * as 'device-code-activation-allowed' from '../screens/device-code-activation-allowed';
|
|
73
|
+
export * as 'device-code-activation-denied' from '../screens/device-code-activation-denied';
|
|
74
|
+
export * as 'device-code-confirmation' from '../screens/device-code-confirmation';
|
|
75
|
+
export * as 'interstitial-captcha' from '../screens/interstitial-captcha';
|
|
76
|
+
export * as 'redeem-ticket' from '../screens/redeem-ticket';
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { type FlattenedTheme } from '@auth0/auth0-acul-js';
|
|
2
|
+
/**
|
|
3
|
+
* React hook to get the current theme options with flattened configuration from branding context.
|
|
4
|
+
*
|
|
5
|
+
* @returns FlattenedTheme object containing colors, fonts, borders, pageBackground, and widget configurations, or null if no branding is available
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* import React from 'react';
|
|
10
|
+
* import { useAuth0Themes } from '@auth0/auth0-acul-react';
|
|
11
|
+
*
|
|
12
|
+
* const ThemedComponent: React.FC = () => {
|
|
13
|
+
* const theme = useAuth0Themes();
|
|
14
|
+
*
|
|
15
|
+
* if (!theme) {
|
|
16
|
+
* return <div>No theme available</div>;
|
|
17
|
+
* }
|
|
18
|
+
*
|
|
19
|
+
* return (
|
|
20
|
+
* <div
|
|
21
|
+
* style={{
|
|
22
|
+
* backgroundColor: theme.colors.primary_button,
|
|
23
|
+
* color: theme.colors.primary_button_label,
|
|
24
|
+
* borderRadius: theme.borders.button_border_radius,
|
|
25
|
+
* }}
|
|
26
|
+
* >
|
|
27
|
+
* <h1
|
|
28
|
+
* style={{
|
|
29
|
+
* fontWeight: theme.fonts.title.bold ? 'bold' : 'normal',
|
|
30
|
+
* fontSize: `${theme.fonts.title.size}%`,
|
|
31
|
+
* }}
|
|
32
|
+
* >
|
|
33
|
+
* Styled with Auth0 Theme
|
|
34
|
+
* </h1>
|
|
35
|
+
* <button
|
|
36
|
+
* style={{
|
|
37
|
+
* backgroundColor: theme.colors.primary_button,
|
|
38
|
+
* borderRadius: theme.borders.button_border_radius,
|
|
39
|
+
* }}
|
|
40
|
+
* >
|
|
41
|
+
* Primary Button
|
|
42
|
+
* </button>
|
|
43
|
+
* <p>Body text color: {theme.colors.body_text}</p>
|
|
44
|
+
* </div>
|
|
45
|
+
* );
|
|
46
|
+
* };
|
|
47
|
+
*/
|
|
48
|
+
export declare const useAuth0Themes: () => FlattenedTheme | null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"auth0-themes.js","sources":["../../../src/hooks/common/auth0-themes.ts"],"sourcesContent":["import { getCurrentThemeOptions, type FlattenedTheme } from '@auth0/auth0-acul-js';\n\n/**\n * React hook to get the current theme options with flattened configuration from branding context.\n *\n * @returns FlattenedTheme object containing colors, fonts, borders, pageBackground, and widget configurations, or null if no branding is available\n *\n * @example\n * ```tsx\n * import React from 'react';\n * import { useAuth0Themes } from '@auth0/auth0-acul-react';\n *\n * const ThemedComponent: React.FC = () => {\n * const theme = useAuth0Themes();\n *\n * if (!theme) {\n * return <div>No theme available</div>;\n * }\n *\n * return (\n * <div\n * style={{\n * backgroundColor: theme.colors.primary_button,\n * color: theme.colors.primary_button_label,\n * borderRadius: theme.borders.button_border_radius,\n * }}\n * >\n * <h1\n * style={{\n * fontWeight: theme.fonts.title.bold ? 'bold' : 'normal',\n * fontSize: `${theme.fonts.title.size}%`,\n * }}\n * >\n * Styled with Auth0 Theme\n * </h1>\n * <button\n * style={{\n * backgroundColor: theme.colors.primary_button,\n * borderRadius: theme.borders.button_border_radius,\n * }}\n * >\n * Primary Button\n * </button>\n * <p>Body text color: {theme.colors.body_text}</p>\n * </div>\n * );\n * };\n */\n\nexport const useAuth0Themes = (): FlattenedTheme | null => {\n return getCurrentThemeOptions();\n};\n"],"names":["useAuth0Themes","getCurrentThemeOptions"],"mappings":"8DAiDO,MAAMA,EAAiB,IACrBC"}
|