Merge pull request #31 from auth0-samples/release-6

Release 6: Implement New Auth Screens & Update Dependencies

Author: subhankarmaiti

package-lock.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@auth0/auth0-acul-js": "^0.1.0-beta.4",
+    "@auth0/auth0-acul-js": "^0.1.0-beta.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2"

package.json

@@ -50,7 +50,26 @@ const MfaPhoneChallengeScreen = React.lazy(() => import("./screens/mfa-phone-cha
 const MfaRecoveryCodeEnrollmentScreen = React.lazy(() => import("./screens/mfa-recovery-code-enrollment"));
 const ResetPasswordMfaPhoneChallengeScreen = React.lazy(() => import("./screens/reset-password-mfa-phone-challenge"));
 const PasskeyEnrollmentScreen = React.lazy(() => import("./screens/passkey-enrollment"));
-
+const MfaRecoveryCodeChallengeNewCodeScreen = React.lazy(() => import("./screens/mfa-recovery-code-challenge-new-code"));
+// const EmailOTPChallengeScreen = React.lazy(() => import("./screens/email-otp-challenge"));
+const LogoutScreen = React.lazy(() => import("./screens/logout"));
+const LogoutAbortedScreen = React.lazy(() => import("./screens/logout-aborted"));
+const LogoutCompleteScreen = React.lazy(() => import("./screens/logout-complete"));
+const EmailVerificationResultScreen = React.lazy(() => import("./screens/email-verification-result"));
+const LoginEmailVerificationScreen = React.lazy(() => import("./screens/login-email-verification"));
+const MfaWebAuthnErrorScreen = React.lazy(() => import("./screens/mfa-webauthn-error"));
+const MfaWebAuthnPlatformEnrollmentScreen = React.lazy(() => import("./screens/mfa-webauthn-platform-enrollment"));
+// const MfaWebAuthnNotAvailableErrorScreen = React.lazy(() => import("./screens/mfa-webauthn-not-available-error"))
+const MfaWebAuthnRoamingEnrollment = React.lazy(() => import("./screens/mfa-webauthn-roaming-enrollment"))
+const MfaWebAuthnRoamingChallengeScreen = React.lazy(() => import("./screens/mfa-webauthn-roaming-challenge"));
+const MfaWebAuthnPlatformChallengeScreen = React.lazy(() => import("./screens/mfa-webauthn-platform-challenge"));
+const MfaWebAuthnEnrollmentSuccessScreen = React.lazy(() => import("./screens/mfa-webauthn-enrollment-success"));
+const MfaWebAuthnChangeKeyNicknameScreen = React.lazy(() => import("./screens/mfa-webauthn-change-key-nickname"));
+// const ResetPasswordMfaWebAuthnRoamingChallengeComponent = React.lazy(() => import("./screens/reset-password-mfa-webauthn-roaming-challenge"));
+// const ConsentScreen = React.lazy(() => import("./screens/consent"));
+// const ConsentScreen = React.lazy(() => import("./screens/consent"));
+const ResetPasswordMfaWebAuthnRoamingChallengeComponent = React.lazy(() => import("./screens/reset-password-mfa-webauthn-roaming-challenge"));
+const ResetPasswordMfaWebAuthnPlatformChallengeScreen = React.lazy(() => import("./screens/reset-password-mfa-webauthn-platform-challenge"));
 
 const App: React.FC = () => {
   const [screen, setScreen] = React.useState("login-id");
@@ -159,6 +178,42 @@ const App: React.FC = () => {
         return <ResetPasswordMfaPhoneChallengeScreen />;
       case "passkey-enrollment":
         return <PasskeyEnrollmentScreen />;
+      case "mfa-recovery-code-challenge-new-code":
+        return <MfaRecoveryCodeChallengeNewCodeScreen />;
+      // case "email-otp-challenge":
+      //   return <EmailOTPChallengeScreen />;
+      case "logout":
+        return <LogoutScreen />;
+      case "logout-aborted":
+        return <LogoutAbortedScreen />;
+      case "logout-complete":
+        return <LogoutCompleteScreen />;
+      case "email-verification-result":
+        return <EmailVerificationResultScreen />;
+      case "login-email-verification":
+        return <LoginEmailVerificationScreen />;
+      case "mfa-webauthn-error":
+        return <MfaWebAuthnErrorScreen />;
+      case "mfa-webauthn-platform-enrollment":
+        return <MfaWebAuthnPlatformEnrollmentScreen />;
+      // case "mfa-webauthn-not-available-error":
+      //   return <MfaWebAuthnNotAvailableErrorScreen />
+      case "mfa-webauthn-roaming-enrollment": 
+        return <MfaWebAuthnRoamingEnrollment />
+      case "mfa-webauthn-roaming-challenge":
+        return <MfaWebAuthnRoamingChallengeScreen />
+      case "mfa-webauthn-platform-challenge":
+        return <MfaWebAuthnPlatformChallengeScreen />
+      case "mfa-webauthn-enrollment-success": 
+        return <MfaWebAuthnEnrollmentSuccessScreen />
+      case "reset-password-mfa-webauthn-platform-challenge":
+        return <ResetPasswordMfaWebAuthnPlatformChallengeScreen />;
+      // case "consent":
+      //   return <ConsentScreen />;
+      case "mfa-webauthn-change-key-nickname":
+        return <MfaWebAuthnChangeKeyNicknameScreen />
+      case "reset-password-mfa-webauthn-roaming-challenge":
+          return <ResetPasswordMfaWebAuthnRoamingChallengeComponent />;
       default:
         return <>No screen rendered</>;
     }

src/App.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import EmailVerificationResult from '@auth0/auth0-acul-js/email-verification-result';
+
+const EmailVerificationResultScreen: React.FC = () => {
+  // Instantiate the SDK class for the Email Verification Result screen
+  const emailVerificationResultManager = new EmailVerificationResult();
+  const { client, screen, transaction, organization } = emailVerificationResultManager;
+
+  // Determine the message and styling based on the verification status
+  let statusMessage = 'An unexpected error occurred.';
+  let statusColor = 'text-gray-700'; // Default color
+  let title = screen.texts?.title ?? 'Email Verification'; // Default title
+
+  const verificationStatus = screen.data?.status;
+  const loginLink = screen.loginLink;
+
+  if (verificationStatus === 'success') {
+    statusMessage = screen.texts?.descriptionSuccess ?? 'Your email has been successfully verified.';
+    statusColor = 'text-green-600';
+    title = screen.texts?.titleSuccess ?? 'Verification Successful';
+  } else if (verificationStatus === 'failure') {
+    statusMessage = screen.texts?.descriptionFailure ?? 'There was an issue verifying your email. Please try again or contact support.';
+    statusColor = 'text-red-600';
+    title = screen.texts?.titleFailure ?? 'Verification Failed';
+  } else if (verificationStatus === 'already_verified') {
+    statusMessage = screen.texts?.descriptionAlreadyVerified ?? 'This email address has already been verified.';
+    statusColor = 'text-blue-600';
+    title = screen.texts?.titleAlreadyVerified ?? 'Email Already Verified';
+  }
+  // Add more status checks as needed based on actual possible values
+
+  const handleGoToLogin = (): void => {
+    if (loginLink) {
+      window.location.href = loginLink;
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
+      <div className="w-full max-w-md bg-white rounded-lg shadow-md p-8 text-center">
+        {client.logoUrl && (
+          <img src={client.logoUrl} alt={client.name ?? 'Application Logo'} className="mx-auto h-16 mb-6" />
+        )}
+        <h1 className={`text-2xl font-semibold mb-4 ${statusColor}`}>
+          {title}
+        </h1>
+
+        <p className={`text-gray-700 mb-6 ${statusColor}`}>
+          {statusMessage}
+        </p>
+
+        {organization?.name && (
+          <p className="text-sm text-gray-500 mb-2">
+            Organization: {organization.displayName || organization.name}
+          </p>
+        )}
+
+        {transaction.errors && transaction.errors.length > 0 && (
+          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4 text-left" role="alert">
+            <strong className="font-bold">Error(s):</strong>
+            {transaction.errors.map((err, index) => (
+              <p key={`tx-error-${index}`} className="block sm:inline ml-2">{err.message}</p>
+            ))}
+          </div>
+        )}
+
+        {loginLink && (
+          <button
+            onClick={handleGoToLogin}
+            className="w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out"
+          >
+            {screen.texts?.buttonText ?? 'Proceed to Login'}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EmailVerificationResultScreen;