handleSignIn is not called consistently

[justinmakaila]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React Native

Which UI component?

Authenticator

How is your app built?

react-native init

What browsers are you seeing the problem on?

iOS (React Native), Android (React Native)

Which region are you seeing the problem in?

No response

Please describe your bug.

I've overridden the handleSignIn function in the Authenticator.services prop, but it's being called inconsistently. Sometimes it works and I get access to the result, most times I do not. I'm using it to maintain an encrypted store of credentials for profile switching. Sometimes when I get the credentials stored, I can sign out, and they'll be gone and my handleSignIn override will not be called after using the Authenticator ui component again.

What's the expected behaviour?

handleSignIn gets called consistently.

Help us reproduce the bug!

  return (
    <Authenticator
      services={useMemo<ComponentProps<typeof Authenticator>['services']>(
        () => ({
          handleSignIn: async (input: SignInInput): Promise<SignInOutput> => {
            const result = await signIn(input)
            //Store the profile in the profile manager after successful sign in
            await storeProfileForInput(input)
            return result
          },
          handleSignUp: async (input: SignUpInput): Promise<SignUpOutput> => {
            const result = await signUp(input)
            // Store the profile in the profile manager after successful sign up
            await storeProfileForInput(input)
            return result
          },
        }),
        [storeProfileForInput],
      )}
    />
  )

Code Snippet

  return (
    <Authenticator
      services={useMemo<ComponentProps<typeof Authenticator>['services']>(
        () => ({
          handleSignIn: async (input: SignInInput): Promise<SignInOutput> => {
            const result = await signIn(input)
            //Store the profile in the profile manager after successful sign in
            await storeProfileForInput(input)
            return result
          },
          handleSignUp: async (input: SignUpInput): Promise<SignUpOutput> => {
            const result = await signUp(input)
            // Store the profile in the profile manager after successful sign up
            await storeProfileForInput(input)
            return result
          },
        }),
        [storeProfileForInput],
      )}
    />
  )

Console log output

No response

Additional information and screenshots

No response

[justinmakaila]

It appears as if the issue is related to some sort of memoization or caching of the services... If I remove the useMemo and pass the functions directly to services, they seem to be invoked correctly, but if I add logs or otherwise change the body of the function and then hot reload, the changes are not picked up. I've found that I have to kill the app and reload it from the terminated state for any updates or changes in the functions to be picked up and executed.

[justinmakaila]

nope, nevermind... got it to work, built and submitted to testflight, build is broken and the handleSignIn function is not called.

[jordanvn]

Hello @justinmakaila, thank you for posting this and further updating with your findings!

The service overrides functions are taken in on initial mounting of the component and saved to the state machine. This would create a closure over the body of the functions, so you will not be able to change the body of the functions after first render. That is why useMemo when storeProfileForInput changes will not have any effect.

What issues are you experiencing with your testflight build?

[jordanvn]

Looking further into your issue, it seems like fetchAuthSession could be useful to what you are trying to accomplish: https://docs.amplify.aws/gen1/javascript/build-a-backend/auth/manage-user-session/

[reesscot]

@justinmakaila Are you still having this problem? Given the timing of your issue, I wanted to check what version of the ui-react-native package you are using. Please be sure you are using the latest version, as there was a build issue in 2.2.4.

[reesscot]

Closing this out as we haven't heard back. Please open a new issue if you are still having this problem.