feat(auth): unify mobile-first authentication flow

src/context/AuthFlowContext.tsx

@@ -30,10 +30,20 @@ interface AuthFlowState {
   cooldowns: CooldownState
 }
 
+interface SignupDetailsState {
+  password: string
+  confirmation: string
+  firstName: string
+  lastName: string
+}
+
 interface AuthFlowContextValue {
   state: AuthFlowState
+  signupDetails: SignupDetailsState
   setMobile: (flow: FlowName, mobile: string) => void
   setCode: (flow: FlowName, code: string) => void
+  setSignupDetails: (details: SignupDetailsState) => void
+  clearSignupDetails: () => void
   markOtpSendPending: (flow: FlowName) => void
   setOtpDelivery: (flow: FlowName, expiresInSeconds: number) => void
   clearOtpDelivery: (flow: FlowName) => void
@@ -72,6 +82,13 @@ const defaultState: AuthFlowState = {
   },
 }
 
+const defaultSignupDetails: SignupDetailsState = {
+  password: "",
+  confirmation: "",
+  firstName: "",
+  lastName: "",
+}
+
 const AuthFlowContext = createContext<AuthFlowContextValue | null>(null)
 
 const parseStoredState = (): AuthFlowState => {
@@ -121,6 +138,7 @@ const parseStoredState = (): AuthFlowState => {
 
 export function AuthFlowProvider({ children }: { children: ReactNode }) {
   const [state, setState] = useState<AuthFlowState>(parseStoredState)
+  const [signupDetails, setSignupDetailsState] = useState<SignupDetailsState>(defaultSignupDetails)
 
   useEffect(() => {
     window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state))
@@ -150,6 +168,7 @@ export function AuthFlowProvider({ children }: { children: ReactNode }) {
   const value = useMemo<AuthFlowContextValue>(
     () => ({
       state,
+      signupDetails,
       setMobile: (flow, mobile) => {
         setState((current) => ({
           ...current,
@@ -168,6 +187,12 @@ export function AuthFlowProvider({ children }: { children: ReactNode }) {
           },
         }))
       },
+      setSignupDetails: (details) => {
+        setSignupDetailsState(details)
+      },
+      clearSignupDetails: () => {
+        setSignupDetailsState(defaultSignupDetails)
+      },
       markOtpSendPending: (flow) => {
         setState((current) => ({
           ...current,
@@ -226,9 +251,12 @@ export function AuthFlowProvider({ children }: { children: ReactNode }) {
             pendingOtpSend: false,
           },
         }))
+        if (flow === "signup") {
+          setSignupDetailsState(defaultSignupDetails)
+        }
       },
     }),
-    [state],
+    [signupDetails, state],
   )
 
   return <AuthFlowContext.Provider value={value}>{children}</AuthFlowContext.Provider>