Using withAuthenticator component with connect from react-redux

Question

I'm trying to use the withAuthenticator HOC from aws-amplify/ui-react but since I'm using redux as well I'm getting the parts of the state that I'm using showing up as undefined because I have to surround my main component with withAuthenticator(Component). Here's the code:

export default connect(mapStateToProps, { getImages })(
    withAuthenticator(About, { includeGreetings: true })
);

Is it possible to use the connect function and the withAuthenticator at the same time or should I refactor my code?

Answer 1

I solved it. Just used the connect as the component variable in withAuthenticator, like this:

export default withAuthenticator(
    connect(mapStateToProps, { getImages })(About),
    { includeGreetings: true }
);