WARNING onHubCapsule is Deprecated (React)

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} />
	)
}

[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.

[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);
    });
  }