Amplify-js: WARNING onHubCapsule is Deprecated (React)

[ghost]

I was using the Hub API with my React app to handle authentication. I just upgraded to the latest aws-amplify version and am now getting a warning in the console:

[WARN] 38:57.297 Hub - WARNING onHubCapsule is Deprecated. Please pass in a callback.

Note the three numbers at the beginning (i.e. 38:57:297) seem to be random. Every time I reload they are different. I don't know what the message means by 'pass in a callback'. Pass into where? And what should be in the callback?

Here's my code:

const App = () => {
    const [user, setUser] = useState(null)

    const getUserData = async () => {
        const currentUser = await Auth.currentAuthenticatedUser()
        setUser(currentUser)
    }

    const hubObj = {
        onHubCapsule: capsule => {
            switch (capsule.payload.event) {
                case 'signIn':
                    getUserData()
                    break
                case 'signOut':
                    setUser(null)
                    break
                default:
                    return
            }
        },
    }

    useEffectAsync(() => {
        getUserData()
        Hub.listen('auth', hubObj, 'onHubCapsule')
    }, [])

    const handleSignOut = async () => {
        try {
            await Auth.signOut({ global: true })
        } catch (err) {
            console.error('Error signing out user', err)
        }
    }

    return user ? (
        <AuthContext.Provider
            value={{ username: user.username, handleSignOut, user }}>
            <Router user={user} />
        </AuthContext.Provider>
    ) : (
        <Authenticator theme={theme} />
    )
}

[medelman17]

Same issue here, but on react-native. Basically crippling my app. Does any one know when this change was introduced so that I can revert?

[undefobj]

We made this change in the last release but kept the older functionality so that it is backwards compatible, all that is happening now is a warning message as we will remove this functionality in a future major version. To prepare for that you can pass in an anonymous function or one you define per the documentation here: https://aws-amplify.github.io/docs/js/hub#listening-for-messages

[medelman17]

Ok, but, for the record, it does not appear to be backwards compatible. Previously, I had this code which was working fine.

  onHubCapsule(capsule: AuthFlowHubEvent) {
    const { channel, payload } = capsule;
    if (channel === 'authflow') {
      this.handleAuthFlow(payload);
    }
  }

After the upgrade, I started to get this.handleAuthFlow is not a function errors. Changing to the new API solved it:

constructor(props: AuthenticatorProps) {
    super(props);
    Hub.listen('authflow', (data) => {
      const { payload } = data;
      this.handleAuthFlow(payload);
    });
  }

[manueliglesias]

Hey @medelman17

I think you are not using the latest version (1.1.24 as of today), I created a codesandbox.io showing it working correctly.

The fix was in this PR #3002

[ghost]

Hi thanks @medelman17 for sharing your solution for my code instead of:

const hubObj = {
        onHubCapsule: capsule => {
            switch (capsule.payload.event) {
                case 'signIn':
                    getUserData()
                    break
                case 'signOut':
                    setUser(null)
                    break
                default:
                    return
            }
        },
    }

    useEffectAsync(() => {
        getUserData()
        Hub.listen('auth', hubObj, 'onHubCapsule')
    }, [])

I changed my code to:

useEffectAsync(() => {
        getUserData()

        Hub.listen('auth', data => {
            switch (data.payload.event) {
                case 'signIn':
                    getUserData()
                    break
                case 'signOut':
                    setUser(null)
                    break
                default:
                    return
            }
        })
    }, [])

And now it's working without the warning message.