How to cascade HOC in React

1. Problem

When I was working with Amplify UI library, there was a need to initialize the withAuthenticator HOC somewhere so that I don't need to repeat it in every component that I wanted to secure.

For example, here is the how I want to initialize my authenticator.

withAuthenticator(Component, {
    loginMechanisms: ['email'],
    socialProviders: ['facebook', 'google'],
    signUpAttributes: ['family_name', 'given_name']
  })

2. Solution

The solution is actually simple, create a second level HOC that will wrap the first one:

const {withAuthenticator} = require("@aws-amplify/ui-react");

const withSecurity = (Component) => {

  return withAuthenticator(Component, {
    loginMechanisms: ['email'],
    socialProviders: ['facebook', 'google'],
    signUpAttributes: ['family_name', 'given_name']
  })
}

export default withSecurity;

And from here we can use this new HOC like any other.

export default withSecurity(Component);

3. References

• https://ui.docs.amplify.aws/components/authenticator