title: How to pass authentication in React?
body: <p>Without some global state management library like <a href="https://github.com/reactjs/redux" rel="nofollow noreferrer">Redux</a>, what would be a good way to pass the user around through my components?  I'm using <a href="https://firebase.google.com/" rel="nofollow noreferrer">Firebase</a>, so I'm imagining my top-level app component will be listening to auth changes and storing the user somewhere.  Here are the options I've thought of:</p>
  
  <ol>
  <li>Passing 'user' to each route in props (and on to children that need it)</li>
  <li>Using a global object of my own</li>
  <li>Using <a href="https://facebook.github.io/react/docs/context.html" rel="nofollow noreferrer">Context</a></li>
  </ol>
  
  <p>1 seems like a hassle.</p>
  
  <p>2 doesn't seem like the right way and like more of a hassle, wouldn't I have to listen for changes and set the user in my states?  It's what they show in the <a href="https://reacttraining.com/react-router/web/example/auth-workflow" rel="nofollow noreferrer">React Router docs</a> but I'm guessing that's just for simplicity's sake and not best practice.</p>
  
  <p>3 seems like the best way to me but it seems like <a href="https://facebook.github.io/react/docs/context.html" rel="nofollow noreferrer">it's discouraged</a>: </p>
  
  <blockquote>
    <p>The vast majority of applications do not need to use context.</p>
    
    <p>If you
    want your application to be stable, don't use context. It is an
    experimental API and it is likely to break in future releases of
    React.</p>
  </blockquote>