Implement withAuthentication HOC

We 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?

If the authentication check inside the HOC is asynchronous, what would you render while waiting for the result?

You 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?

Explain how you would modify the HOC to support both client‑side redirects and server‑side redirects in a Next.js app.

Our app now has dozens of protected components and the HOC adds noticeable render latency. How would you optimise the withAuthentication HOC for performance at scale?

Describe how you would design the HOC to work with multiple auth providers (e.g., JWT, OAuth) without tightly coupling to a specific auth library.

We are migrating from a class‑based codebase using HOCs to a function‑component codebase using hooks. How would you plan the transition for authentication while keeping backward compatibility?

At the organization level, what guidelines would you establish for using withAuthentication versus other patterns (e.g., route guards, context providers) to ensure consistency across teams?