The Provider is interchangeable as class-based or function-based?

Less of a question more of an observation. I was so far off base with this challenge as I had in my head that I would need to change the Provider and its content to a Hooks, function-based set-up. Also, it became obvious to me that accessing Context via destructuring with the exercises threw me off what we are actually passing around when I saw your solution. I played with the solution until it had a closer similarity to the last examples with ScoreboardContext.

import React, { useContext } from 'react';
import { Context } from '../Context'; // destructured version

export default () => {
  // let context = useContext(Context.Context);
  // const authUser = context.authenticatedUser;
  const { authenticatedUser } = useContext(Context);
  return (
    <div className='bounds'>
      <div className='grid-100'>
        <h1>{authenticatedUser.name} is authenticated!</h1>
        <p>Your username is {authenticatedUser.username}.</p>
      </div>
    </div>
  );
};

[disclaimer I don't think this is more right, it just helped me realise it was the same result]

I'm pleased you have these exercises as I thought I had a reasonably strong grip on this topic but the size of this App mixed with the flashbacks and PTSD from the React Project 7 made me realise how thin my knowledge is about Context and Providers in general.

So my key takeaway is that the App was written in class-based form, the Provider is being exported as an object so this means we can refactor a component to use Hooks and let the other components continue to use the higher-order functions without issue.