@auth0/auth0-acul-react 1.0.0-alpha.0 → 1.0.0-alpha.1

package/README.md

@@ -1,5 +1,4 @@
-# @auth0/auth0-acul-react
-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.
+# Auth0 ACUL React SDK
 
 <div align="center">
 
@@ -16,15 +15,14 @@ Developers using Auth0’s Universal Login can use this React SDK to customize s
 
 </div>
 
-## Table of Contents
-- [Installation](#installation)
-- [Importing the SDK](#importing-the-sdk)
-  - [Partial Imports](#partial-imports)
-  - [Root Imports](#root-imports)
-  - [Types / Interfaces](#types--interfaces)
-- [Examples](#examples)
+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.
+
 ---
 
+> [!CAUTION]
+>
+> This feature is still in **Early Access**.
+
 ## Installation
 
 ```bash

package/dist/export/getting-started.d.ts

@@ -1,6 +1,6 @@
 /**
  * @module Getting Started
- * @description This module provides an overview of how to get started with the Auth0 SDK.
+ * @description This module provides an overview of how to get started with the Auth0 ACUL React SDK.
  *
  * # Auth0 ACUL React SDK
  *
@@ -104,7 +104,7 @@
  * import {
  *   useScreen,
  *   useTransaction,
- *   useMfaPollingManager,
+ *   useMfaPolling,
  *   continueMethod,
  *   resendPushNotification
  * } from '@auth0/auth0-acul-react/mfa-push-challenge-push';
@@ -114,7 +114,7 @@
  *   const transaction = useTransaction();
  *   const [status, setStatus] = useState('waiting');
  *
- *   const { isRunning, startPolling, stopPolling } = useMfaPollingManager({
+ *   const { isRunning, startPolling, stopPolling } = useMfaPolling({
  *     intervalMs: 5000,
  *     onComplete: async () => {
  *       setStatus('approved');
@@ -171,7 +171,7 @@
  * }
  * ```
  *
- * ## Available Hooks by Screen
+ * ## Available Hooks
  *
  * ### Context Hooks (Available in all screens)
  * - `useUser()` - Current user information
@@ -232,71 +232,17 @@
  * import {
  *   continueMethod,
  *   resendPushNotification,
- *   useMfaPollingManager
+ *   useMfaPolling
  * } from '@auth0/auth0-acul-react/mfa-push-challenge-push';
  * ```
  *
- * ## Import Patterns
- *
- * ### Screen-Specific Imports (Recommended)
- * ```tsx
- * // Import from specific screen modules
- * import { useUser, loginMethod } from '@auth0/auth0-acul-react/login-id';
- * import { useMfaPollingManager } from '@auth0/auth0-acul-react/mfa-push-challenge-push';
- * ```
- * ## Available Screen Modules
- *
- * | Screen Module | Import Path | Description |
- * |---------------|-------------|-------------|
- * | Login ID | `@auth0/auth0-acul-react/login-id` | Username/email identification |
- * | Login Password | `@auth0/auth0-acul-react/login-password` | Password entry screen |
- * | MFA Push Challenge | `@auth0/auth0-acul-react/mfa-push-challenge-push` | Push notification MFA |
- * | Reset Password MFA Push | `@auth0/auth0-acul-react/reset-password-mfa-push-challenge-push` | Reset password with MFA |
- * | Signup ID | `@auth0/auth0-acul-react/signup-id` | User registration |
- * | Signup Password | `@auth0/auth0-acul-react/signup-password` | Password setup during registration |
- *
  * ## Best Practices
  *
- * ### 1. **Use Screen-Specific Imports**
- * ```tsx
- * // Partial import - recommended
- * import { useSignup } from '@auth0/auth0-acul-react/signup';
- * // Root import
- * import * as Auth0React from '@auth0/auth0-acul-react';
- *
- * const MyComponent = () => {
- *   const signupInstance = useSignup();
- *   // Use methods or other properties using the instance
- *   return (
- *     <button onClick={() => signupInstance.signup({ username: 'user', password: 'pass' })}>
- *       Sign Up
- *     </button>
- *   );
- * };
+ * - Use **screen-specific modules**
+ * - Handle errors using `useErrors()`
+ * - Use context hooks (like `useTenant`, `useScreen`) for dynamic branding, layout, or behavior
  *
- * ```
  *
- * ### 2. **Handle Loading States**
- * ```tsx
- * function LoginForm() {
- *   const [isLoading, setIsLoading] = useState(false);
- *
- *   const handleSubmit = async (data) => {
- *     setIsLoading(true);
- *     try {
- *       await loginMethod(data);
- *     } finally {
- *       setIsLoading(false);
- *     }
- *   };
- *
- *   return (
- *     <button disabled={isLoading}>
- *       {isLoading ? 'Signing in...' : 'Sign In'}
- *     </button>
- *   );
- * }
- * ```
  *
  * ## Examples and Resources
  *

package/dist/screens/mfa-email-challenge.d.ts

@@ -1,8 +1,9 @@
-import type { MfaEmailChallengeMembers, ContinueOptions, ResendCodeOptions, TryAnotherMethodOptions } from '@auth0/auth0-acul-js/mfa-email-challenge';
+import type { MfaEmailChallengeMembers, ContinueOptions, ResendCodeOptions, TryAnotherMethodOptions, CustomOptions } from '@auth0/auth0-acul-js/mfa-email-challenge';
 export declare const useUser: () => import("@auth0/auth0-acul-js").UserMembers, useTenant: () => import("@auth0/auth0-acul-js").TenantMembers, useBranding: () => import("@auth0/auth0-acul-js").BrandingMembers, useClient: () => import("@auth0/auth0-acul-js").ClientMembers, useOrganization: () => import("@auth0/auth0-acul-js").OrganizationMembers, usePrompt: () => import("@auth0/auth0-acul-js").PromptMembers, useScreen: () => import("@auth0/auth0-acul-js").ScreenMembersOnMfaEmailChallenge, useTransaction: () => import("@auth0/auth0-acul-js").TransactionMembers, useUntrustedData: () => import("@auth0/auth0-acul-js").UntrustedDataMembersOnMfaEmailChallenge;
 export declare const continueMethod: (payload: ContinueOptions) => void | Promise<void>;
 export declare const resendCode: (payload?: ResendCodeOptions) => void | Promise<void>;
 export declare const tryAnotherMethod: (payload?: TryAnotherMethodOptions) => void | Promise<void>;
+export declare const pickEmail: (payload?: CustomOptions) => void | Promise<void>;
 export { useResend } from '../hooks/utility/resend-manager';
 export { useCurrentScreen, useErrors, useAuth0Themes, type UseErrorOptions, type UseErrorsResult, type ErrorsResult, type ErrorKind, } from '../hooks';
 export declare const useMfaEmailChallenge: () => MfaEmailChallengeMembers;

package/dist/screens/mfa-email-challenge.js

@@ -1,2 +1,2 @@
-import e from"@auth0/auth0-acul-js/mfa-email-challenge";import{useMemo as o}from"react";export{useAuth0Themes}from"../hooks/common/auth0-themes.js";export{useCurrentScreen}from"../hooks/common/current-screen.js";import{errorManager as r}from"../hooks/common/errors.js";export{useErrors}from"../hooks/common/errors.js";import{ContextHooks as s}from"../hooks/context/index.js";import{registerScreen as t}from"../state/instance-store.js";export{useResend}from"../hooks/utility/resend-manager.js";const n=t(e),{withError:m}=r,u=new s(n),{useUser:a,useTenant:i,useBranding:c,useClient:h,useOrganization:p,usePrompt:f,useScreen:d,useTransaction:j,useUntrustedData:x}=u,k=e=>m(n.continue(e)),l=e=>m(n.resendCode(e)),g=e=>m(n.tryAnotherMethod(e)),C=()=>o(()=>n,[]);export{k as continueMethod,l as resendCode,g as tryAnotherMethod,c as useBranding,h as useClient,C as useMfaEmailChallenge,p as useOrganization,f as usePrompt,d as useScreen,i as useTenant,j as useTransaction,x as useUntrustedData,a as useUser};
+import e from"@auth0/auth0-acul-js/mfa-email-challenge";import{useMemo as o}from"react";export{useAuth0Themes}from"../hooks/common/auth0-themes.js";export{useCurrentScreen}from"../hooks/common/current-screen.js";import{errorManager as r}from"../hooks/common/errors.js";export{useErrors}from"../hooks/common/errors.js";import{ContextHooks as s}from"../hooks/context/index.js";import{registerScreen as t}from"../state/instance-store.js";export{useResend}from"../hooks/utility/resend-manager.js";const n=t(e),{withError:m}=r,u=new s(n),{useUser:a,useTenant:i,useBranding:c,useClient:h,useOrganization:p,usePrompt:f,useScreen:d,useTransaction:j,useUntrustedData:k}=u,l=e=>m(n.continue(e)),x=e=>m(n.resendCode(e)),g=e=>m(n.tryAnotherMethod(e)),C=e=>m(n.pickEmail(e)),E=()=>o(()=>n,[]);export{l as continueMethod,C as pickEmail,x as resendCode,g as tryAnotherMethod,c as useBranding,h as useClient,E as useMfaEmailChallenge,p as useOrganization,f as usePrompt,d as useScreen,i as useTenant,j as useTransaction,k as useUntrustedData,a as useUser};
 //# sourceMappingURL=mfa-email-challenge.js.map

package/dist/screens/mfa-email-challenge.js.map

@@ -1 +1 @@
-{"version":3,"file":"mfa-email-challenge.js","sources":["../../src/screens/mfa-email-challenge.tsx"],"sourcesContent":["import MfaEmailChallenge from '@auth0/auth0-acul-js/mfa-email-challenge';\nimport { useMemo } from 'react';\n\nimport { ContextHooks } from '../hooks';\nimport { errorManager } from '../hooks';\nimport { registerScreen } from '../state/instance-store';\n\nimport type {\n  MfaEmailChallengeMembers,\n  ContinueOptions,\n  ResendCodeOptions,\n  TryAnotherMethodOptions,\n} from '@auth0/auth0-acul-js/mfa-email-challenge';\n\n// Register the singleton instance of MfaEmailChallenge\nconst instance = registerScreen<MfaEmailChallengeMembers>(MfaEmailChallenge)!;\n\n// Error wrapper\nconst { withError } = errorManager;\n\n// Context hooks\nconst factory = new ContextHooks<MfaEmailChallengeMembers>(instance);\nexport const {\n  useUser,\n  useTenant,\n  useBranding,\n  useClient,\n  useOrganization,\n  usePrompt,\n  useScreen,\n  useTransaction,\n  useUntrustedData,\n} = factory;\n\n// Submit functions\nexport const continueMethod = (payload: ContinueOptions) => withError(instance.continue(payload));\nexport const resendCode = (payload?: ResendCodeOptions) => withError(instance.resendCode(payload));\nexport const tryAnotherMethod = (payload?: TryAnotherMethodOptions) =>\n  withError(instance.tryAnotherMethod(payload));\n\n// Utility Hooks\nexport { useResend } from '../hooks/utility/resend-manager';\n\n// Common hooks\nexport {\n  useCurrentScreen,\n  useErrors,\n  useAuth0Themes,\n  type UseErrorOptions,\n  type UseErrorsResult,\n  type ErrorsResult,\n  type ErrorKind,\n} from '../hooks';\n\n// Main instance hook. Returns singleton instance of MfaEmailChallenge\nexport const useMfaEmailChallenge = (): MfaEmailChallengeMembers => useMemo(() => instance, []);\n\n// Export all types from the core SDK for this screen\n"],"names":["instance","registerScreen","MfaEmailChallenge","withError","errorManager","factory","ContextHooks","useUser","useTenant","useBranding","useClient","useOrganization","usePrompt","useScreen","useTransaction","useUntrustedData","continueMethod","payload","continue","resendCode","tryAnotherMethod","useMfaEmailChallenge","useMemo"],"mappings":"6eAeA,MAAMA,EAAWC,EAAyCC,IAGpDC,UAAEA,GAAcC,EAGhBC,EAAU,IAAIC,EAAuCN,IAC9CO,QACXA,EAAOC,UACPA,EAASC,YACTA,EAAWC,UACXA,EAASC,gBACTA,EAAeC,UACfA,EAASC,UACTA,EAASC,eACTA,EAAcC,iBACdA,GACEV,EAGSW,EAAkBC,GAA6Bd,EAAUH,EAASkB,SAASD,IAC3EE,EAAcF,GAAgCd,EAAUH,EAASmB,WAAWF,IAC5EG,EAAoBH,GAC/Bd,EAAUH,EAASoB,iBAAiBH,IAiBzBI,EAAuB,IAAgCC,EAAQ,IAAMtB,EAAU"}
+{"version":3,"file":"mfa-email-challenge.js","sources":["../../src/screens/mfa-email-challenge.tsx"],"sourcesContent":["import MfaEmailChallenge from '@auth0/auth0-acul-js/mfa-email-challenge';\nimport { useMemo } from 'react';\n\nimport { ContextHooks } from '../hooks';\nimport { errorManager } from '../hooks';\nimport { registerScreen } from '../state/instance-store';\n\nimport type {\n  MfaEmailChallengeMembers,\n  ContinueOptions,\n  ResendCodeOptions,\n  TryAnotherMethodOptions,\n  CustomOptions,\n} from '@auth0/auth0-acul-js/mfa-email-challenge';\n\n// Register the singleton instance of MfaEmailChallenge\nconst instance = registerScreen<MfaEmailChallengeMembers>(MfaEmailChallenge)!;\n\n// Error wrapper\nconst { withError } = errorManager;\n\n// Context hooks\nconst factory = new ContextHooks<MfaEmailChallengeMembers>(instance);\nexport const {\n  useUser,\n  useTenant,\n  useBranding,\n  useClient,\n  useOrganization,\n  usePrompt,\n  useScreen,\n  useTransaction,\n  useUntrustedData,\n} = factory;\n\n// Submit functions\nexport const continueMethod = (payload: ContinueOptions) => withError(instance.continue(payload));\nexport const resendCode = (payload?: ResendCodeOptions) => withError(instance.resendCode(payload));\nexport const tryAnotherMethod = (payload?: TryAnotherMethodOptions) =>\n  withError(instance.tryAnotherMethod(payload));\nexport const pickEmail = (payload?: CustomOptions) => withError(instance.pickEmail(payload));\n\n// Utility Hooks\nexport { useResend } from '../hooks/utility/resend-manager';\n\n// Common hooks\nexport {\n  useCurrentScreen,\n  useErrors,\n  useAuth0Themes,\n  type UseErrorOptions,\n  type UseErrorsResult,\n  type ErrorsResult,\n  type ErrorKind,\n} from '../hooks';\n\n// Main instance hook. Returns singleton instance of MfaEmailChallenge\nexport const useMfaEmailChallenge = (): MfaEmailChallengeMembers => useMemo(() => instance, []);\n\n// Export all types from the core SDK for this screen\n"],"names":["instance","registerScreen","MfaEmailChallenge","withError","errorManager","factory","ContextHooks","useUser","useTenant","useBranding","useClient","useOrganization","usePrompt","useScreen","useTransaction","useUntrustedData","continueMethod","payload","continue","resendCode","tryAnotherMethod","pickEmail","useMfaEmailChallenge","useMemo"],"mappings":"6eAgBA,MAAMA,EAAWC,EAAyCC,IAGpDC,UAAEA,GAAcC,EAGhBC,EAAU,IAAIC,EAAuCN,IAC9CO,QACXA,EAAOC,UACPA,EAASC,YACTA,EAAWC,UACXA,EAASC,gBACTA,EAAeC,UACfA,EAASC,UACTA,EAASC,eACTA,EAAcC,iBACdA,GACEV,EAGSW,EAAkBC,GAA6Bd,EAAUH,EAASkB,SAASD,IAC3EE,EAAcF,GAAgCd,EAAUH,EAASmB,WAAWF,IAC5EG,EAAoBH,GAC/Bd,EAAUH,EAASoB,iBAAiBH,IACzBI,EAAaJ,GAA4Bd,EAAUH,EAASqB,UAAUJ,IAiBtEK,EAAuB,IAAgCC,EAAQ,IAAMvB,EAAU"}

package/dist/telemetry.js

@@ -1,2 +1,2 @@
-globalThis.__ACUL_SDK_NAME__="@auth0/auth0-acul-react",globalThis.__ACUL_SDK_VERSION__="1.0.0-alpha.0";
+globalThis.__ACUL_SDK_NAME__="@auth0/auth0-acul-react",globalThis.__ACUL_SDK_VERSION__="1.0.0-alpha.1";
 //# sourceMappingURL=telemetry.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/auth0-acul-react",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.1",
   "main": "dist/index.js",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -20,10 +20,12 @@
   "license": "MIT",
   "description": "The Auth0 ACUL React SDK enables you to build Advanced Customization for Universal Login with React hooks and components.",
   "repository": {
-    "type": "git"
+    "type": "git",
+    "url": "https://github.com/auth0/universal-login/tree/master/packages/auth0-acul-react"
   },
   "peerDependencies": {
-    "react": "^18.3.1"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "exports": {
     ".": {
@@ -47,7 +49,7 @@
     "ts-node": "^10.9.2"
   },
   "dependencies": {
-    "@auth0/auth0-acul-js": "1.0.0-alpha.0"
+    "@auth0/auth0-acul-js": "1.0.0-alpha.1"
   },
   "files": [
     "dist",
@@ -58,4 +60,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}