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



react 7395072950568073967

Post a Comment Default Comments


Are you looking for freelancers in the Philippines? Get in touch.


If you like what I do, you can support this channel by buying me a coffee. I would be grateful for your contribution! Your donations will help me create more FREE online courses and learning materials for programmers and remote workers.