refactor(elements): Use nested states (#2471)

* refactor(elements): Use nested states

* chore(elements): Change ClerkHostRouter to ClerkRouter

* chore(elements): Update contexts

.changeset/fast-hornets-report.md

@@ -0,0 +1,2 @@
+---
+---

packages/elements/src/internals/machines/sign-in.actors.ts

@@ -2,6 +2,7 @@ import type {
   AttemptFirstFactorParams,
   AttemptSecondFactorParams,
   AuthenticateWithRedirectParams,
+  EnvironmentResource,
   HandleOAuthCallbackParams,
   HandleSamlCallbackParams,
   PrepareFirstFactorParams,
@@ -37,14 +38,16 @@ export const createSignIn = fromPromise<SignInResource, WithClient<{ fields: Sig
 export const authenticateWithRedirect = fromPromise<
   void,
   WithClerk<{
+    environment: EnvironmentResource | undefined;
     strategy: AuthenticateWithRedirectParams['strategy'] | undefined;
   }>
->(async ({ input: { clerk, strategy } }) => {
+>(async ({ input: { clerk, environment, strategy } }) => {
+  assertIsDefined(environment);
   assertIsDefined(strategy);
 
   return clerk.client.signIn.authenticateWithRedirect({
     strategy,
-    redirectUrl: `${clerk.__unstable__environment.displayConfig.signInUrl}/sso-callback`,
+    redirectUrl: `${environment.displayConfig.signInUrl}/sso-callback`,
     redirectUrlComplete: clerk.buildAfterSignInUrl(),
   });
 });

packages/elements/src/internals/machines/sign-in.context.ts

@@ -1,9 +1,13 @@
 import type { OAuthStrategy, Web3Strategy } from '@clerk/types';
 import { createActorContext } from '@xstate/react';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import type { SnapshotFrom } from 'xstate';
 
-import { isAuthenticatableOauthStrategy, isWeb3Strategy } from '../../utils/third-party-strategies';
+import {
+  getEnabledThirdPartyProviders,
+  isAuthenticatableOauthStrategy,
+  isWeb3Strategy,
+} from '../../utils/third-party-strategies';
 import { SignInMachine } from './sign-in.machine';
 import type { FieldDetails } from './sign-in.types';
 
@@ -29,23 +33,17 @@ const fieldHasValueSelector = (type: string | undefined) => (state: SnapshotStat
  * Selects a field-specific error, if it exists
  */
 const fieldErrorSelector = (type: string | undefined) => (state: SnapshotState) =>
-  type ? Boolean(state.context.fields.get(type)?.error) : undefined;
+  type ? state.context.fields.get(type)?.error : undefined;
 
 /**
  * Selects a global error, if it exists
  */
 const globalErrorSelector = (state: SnapshotState) => state.context.error;
 
 /**
- * Selects if the environment is loaded
+ * Selects the clerk environment
  */
-const hasEnvironmentSelector = (state: SnapshotState) => Boolean(state.context.clerk.__unstable__environment);
-
-/**
- * Selects third-party providers details
- */
-const thirdPartyStrategiesSelector = (state: SnapshotState) =>
-  state.context.enabledThirdPartyProviders ? state.context.enabledThirdPartyProviders : undefined;
+const clerkEnvironmentSelector = (state: SnapshotState) => state.context.environment;
 
 // ================= HOOKS ================= //
 
@@ -80,7 +78,8 @@ export const useForm = () => {
  */
 export const useThirdPartyProviders = () => {
   const ref = useSignInFlow();
-  const providers = useSignInFlowSelector(thirdPartyStrategiesSelector);
+  const env = useSignInFlowSelector(clerkEnvironmentSelector);
+  const providers = useMemo(() => env && getEnabledThirdPartyProviders(env), [env]);
 
   // Register the onSubmit handler for button click
   const createOnClick = useCallback(
@@ -122,13 +121,15 @@ export const useField = ({ type }: Partial<Pick<FieldDetails, 'type'>>) => {
   const error = useSignInFlowSelector(fieldErrorSelector(type));
 
   const shouldBeHidden = false; // TODO: Implement clerk-js utils
-  const validity = error ? 'invalid' : 'valid';
+  const hasError = Boolean(error);
+  const validity = hasError ? 'invalid' : 'valid';
 
   return {
     hasValue,
     props: {
       [`data-${validity}`]: true,
       'data-hidden': shouldBeHidden ? true : undefined,
+      serverInvalid: hasError,
       tabIndex: shouldBeHidden ? -1 : 0,
     },
   };
@@ -179,7 +180,7 @@ export const useInput = ({ type, value: initialValue }: Partial<Pick<FieldDetail
  */
 export const useSSOCallbackHandler = () => {
   const ref = useSignInFlow();
-  const hasEnv = useSignInFlowSelector(hasEnvironmentSelector);
+  const hasEnv = useSignInFlowSelector(clerkEnvironmentSelector);
 
   // TODO: Wholesale move this to the machine ?
   // Wait for the environment to be loaded before sending the callback event