Project Config wirirng in flow handler

packages/react/src/contexts/FlowHandlerContext.ts

@@ -1,11 +1,4 @@
-import type {
-  FlowHandlerEventOptions,
-  FlowHandlerEvents,
-  FlowNames,
-  FlowType,
-  ScreenNames,
-  UserState,
-} from '@corbado/shared-ui';
+import type { FlowHandlerEventOptions, FlowHandlerEvents, FlowNames, ScreenNames, UserState } from '@corbado/shared-ui';
 import { CommonScreens, LoginFlowNames } from '@corbado/shared-ui';
 import { createContext } from 'react';
 
@@ -15,7 +8,6 @@ export interface FlowHandlerContextProps {
   currentUserState: UserState;
   initialized: boolean;
   navigateBack: () => ScreenNames;
-  changeFlow: (flowType: FlowType) => void;
   emitEvent: (event?: FlowHandlerEvents, eventOptions?: FlowHandlerEventOptions) => Promise<void> | undefined;
 }
 
@@ -25,7 +17,6 @@ export const initialContext: FlowHandlerContextProps = {
   currentUserState: {},
   initialized: false,
   navigateBack: () => CommonScreens.Start,
-  changeFlow: () => void 0,
   emitEvent: () => Promise.reject(),
 };
 

packages/react/src/contexts/FlowHandlerProvider.tsx

@@ -1,32 +1,23 @@
 import { useCorbado } from '@corbado/react-sdk';
-import type {
-  FlowHandlerConfig,
-  FlowHandlerEventOptions,
-  FlowHandlerEvents,
-  FlowNames,
-  ScreenNames,
-  UserState,
-} from '@corbado/shared-ui';
-import { CommonScreens, FlowHandler, FlowType, LoginFlowNames, SignUpFlowNames } from '@corbado/shared-ui';
+import type { FlowHandlerEventOptions, FlowHandlerEvents, FlowNames, ScreenNames, UserState } from '@corbado/shared-ui';
+import { CommonScreens, FlowHandler, SignUpFlowNames } from '@corbado/shared-ui';
 import i18n from 'i18next';
 import type { FC, PropsWithChildren } from 'react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import type { FlowHandlerContextProps } from './FlowHandlerContext';
 import FlowHandlerContext from './FlowHandlerContext';
 
-type Props = FlowHandlerConfig;
+type Props = {
+  onLoggedIn: () => void;
+};
 
 export const FlowHandlerProvider: FC<PropsWithChildren<Props>> = ({ children, ...props }) => {
   const { corbadoApp, getProjectConfig, user } = useCorbado();
   const [flowHandler, setFlowHandler] = useState<FlowHandler>();
   const [currentScreen, setCurrentScreen] = useState<ScreenNames>(CommonScreens.Start);
   const [currentUserState, setCurrentUserState] = useState<UserState>({});
-  const [currentFlow, setCurrentFlow] = useState<FlowNames>(
-    props.initialFlowType === FlowType.Login
-      ? LoginFlowNames.PasskeyLoginWithEmailOTPFallback
-      : SignUpFlowNames.PasskeySignupWithEmailOTPFallback,
-  );
+  const [currentFlow, setCurrentFlow] = useState<FlowNames>(SignUpFlowNames.PasskeySignupWithEmailOTPFallback);
   const [initialized, setInitialized] = useState(false);
   const onScreenChangeCbId = useRef<number>(0);
   const onFlowChangeCbId = useRef<number>(0);
@@ -43,17 +34,15 @@ export const FlowHandlerProvider: FC<PropsWithChildren<Props>> = ({ children, ..
         // currently there are no errors that can be thrown here
         return;
       }
-
-      const flowHandler = new FlowHandler(projectConfig.val, props, i18n);
+      const flowHandler = new FlowHandler(projectConfig.val, props.onLoggedIn);
 
       onScreenChangeCbId.current = flowHandler.onScreenChange((value: ScreenNames) => setCurrentScreen(value));
       onFlowChangeCbId.current = flowHandler.onFlowChange((value: FlowNames) => setCurrentFlow(value));
       onUserStateChangeCbId.current = flowHandler.onUserStateChange((value: UserState) => {
         setCurrentUserState(value);
       });
 
-      void flowHandler.init(corbadoApp);
-
+      await flowHandler.init(corbadoApp, i18n);
       setFlowHandler(flowHandler);
       setInitialized(true);
     })();
@@ -70,20 +59,13 @@ export const FlowHandlerProvider: FC<PropsWithChildren<Props>> = ({ children, ..
       return;
     }
 
-    flowHandler?.updateUser(user);
+    flowHandler?.update(user);
   }, [initialized, user]);
 
   const navigateBack = useCallback(() => {
     return flowHandler?.navigateBack() ?? CommonScreens.Start;
   }, [flowHandler]);
 
-  const changeFlow = useCallback(
-    (flowType: FlowType) => {
-      flowHandler?.changeFlow(flowType);
-    },
-    [flowHandler],
-  );
-
   const emitEvent = useCallback(
     (event?: FlowHandlerEvents, eventOptions?: FlowHandlerEventOptions) => {
       return flowHandler?.handleStateUpdate(event, eventOptions);
@@ -98,10 +80,9 @@ export const FlowHandlerProvider: FC<PropsWithChildren<Props>> = ({ children, ..
       currentUserState,
       initialized,
       navigateBack,
-      changeFlow,
       emitEvent,
     }),
-    [currentFlow, currentScreen, currentUserState, initialized, navigateBack, changeFlow],
+    [currentFlow, currentScreen, currentUserState, initialized, navigateBack],
   );
 
   return <FlowHandlerContext.Provider value={contextValue}>{children}</FlowHandlerContext.Provider>;

packages/react/src/screens/CorbadoAuth.tsx

@@ -1,4 +1,3 @@
-import { FlowType } from '@corbado/shared-ui';
 import type { CorbadoAuthConfig } from '@corbado/types';
 import type { FC } from 'react';
 import React from 'react';
@@ -9,10 +8,7 @@ import FlowHandlerProvider from '../contexts/FlowHandlerProvider';
 const CorbadoAuth: FC<CorbadoAuthConfig> = ({ onLoggedIn, isDevMode = false, customerSupportEmail = '' }) => {
   return (
     <div className='cb-container'>
-      <FlowHandlerProvider
-        onLoggedIn={onLoggedIn}
-        initialFlowType={FlowType.SignUp}
-      >
+      <FlowHandlerProvider onLoggedIn={onLoggedIn}>
         <AuthFlow
           isDevMode={isDevMode}
           customerSupportEmail={customerSupportEmail}

packages/shared-ui/package.json

@@ -33,7 +33,6 @@
   "devDependencies": {
     "i18next": "23.5.1",
     "@corbado/types": "*",
-    "@corbado/web-core": "*",
     "@svgr/webpack": "^8.1.0",
     "@types/ua-parser-js": "^0.7.39",
     "copy-webpack-plugin": "^11.0.0",
@@ -50,6 +49,7 @@
     "**/*.json"
   ],
   "dependencies": {
-    "ua-parser-js": "^1.0.37"
+    "ua-parser-js": "^1.0.37",
+    "@corbado/web-core": "*"
   }
 }

packages/shared-ui/src/flowHandler/constants.ts

@@ -1,3 +1,8 @@
+export enum FlowType {
+  SignUp,
+  Login,
+}
+
 export enum SignUpFlowNames {
   PasskeySignupWithEmailOTPFallback = 'PasskeySignupWithEmailOTPFallback',
 }
@@ -6,6 +11,13 @@ export enum LoginFlowNames {
   PasskeyLoginWithEmailOTPFallback = 'PasskeyLoginWithEmailOTPFallback',
 }
 
+export const FlowNameByFlowStyle: Record<string, { SignUp: SignUpFlowNames; Login: LoginFlowNames }> = {
+  PasskeyWithEmailOTPFallback: {
+    SignUp: SignUpFlowNames.PasskeySignupWithEmailOTPFallback,
+    Login: LoginFlowNames.PasskeyLoginWithEmailOTPFallback,
+  },
+};
+
 export enum CommonScreens {
   Start = 'start',
   End = 'end',
@@ -51,8 +63,3 @@ export enum FlowHandlerEvents {
   SecondaryButton = 'secondary-button',
   InitConditionalUI = 'init-conditional-ui',
 }
-
-export enum FlowType {
-  SignUp,
-  Login,
-}