Implement withAuthentication HOC

Q: Implement withAuthentication HOC

import React, { PropTypes } from 'react'; import { connect } from 'react-redux'; import { push } from 'react-router-redux'; export default function (ComposedComponent) { class Authenticate extends React.Component { static propTypes = { isAuthenticated: PropTypes.boolean, redirect: PropTypes.func.isRequired }; componentDidMount() { this._checkAndRedirect(); } componentDidUpdate() { this._checkAndRedirect(); } _checkAndRedirect() { const { isAuthenticated, redirect } = this.props; if (!isAuthenticated) { redirect(); } } render() { return ( { this.props.isAuthenticated ? : null } ); } } const mapStateToProps = (state) => { return { isAuthenticated: state.auth.isAuthenticated }; }; const mapDispatchToProps = dispatch => bindActionCreators({ redirect: () => push('/signin') }, dispatch) Authenticate.propTypes = propTypes return connect( mapStateToProps, mapDispatchToProps )(Authenticate); }

Difficulty: 5/10

higher-order components, authentication flow, React context

javascript

Scenario Questions

0-2 years experience

1We have a simple login page and a Dashboard component. How would you wrap Dashboard with a withAuthentication HOC so that only logged‑in users can see it?
2If the authentication check inside the HOC is asynchronous, what would you render while waiting for the result?

2-5 years experience

1You added withAuthentication to several routes, but after a recent refactor the app crashes when a component receives undefined props. What could be wrong in your HOC implementation?

Follow-up Questions

How would you test this HOC?
What are the trade‑offs of using a HOC versus a hook for auth?
How does this affect server‑side rendering?