title: How to keep React components state after browser refresh
body: <p>Thank you reading my first question.</p>
  
  <p>I trying to auth With Shared Root use react, react-router and firebase.
  So, I want to keep <code>App.js</code> 's user state. but when I tried to refresh the browser, user state was not found.</p>
  
  <p>I've tried to save to localstorage. But is there a way to keep state on component after browser refresh without <code>localStorage</code>?</p>
  
  <hr>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component, PropTypes } from 'react'
  import Rebase from 're-base'
  
  import auth from './config/auth'
  
  const base = Rebase.createClass('https://myapp.firebaseio.com')
  
  export default class App extends Component {
    constructor (props) {
      super(props)
      this.state = {
        loggedIn: auth.loggedIn(),
        user: {}
      }
    }
  
    _updateAuth (loggedIn, user) {
      this.setState({
        loggedIn: !!loggedIn,
        user: user
      })
    }
  
     componentWillMount () {
       auth.onChange = this._updateAuth.bind(this)
       auth.login() // save localStorage
     }
  
    render () {
      return (
        &lt;div&gt;
          { this.props.children &amp;&amp;
            React.cloneElement(this.props.children, {
              user: this.state.user
            })
          }
        &lt;/div&gt;
      )
    }
  }
  App.propTypes = {
    children: PropTypes.any
  }
  </code></pre>
  
  <p><strong>auth.js</strong></p>
  
  <pre><code>import Rebase from 're-base'
  const base = Rebase.createClass('https://myapp.firebaseio.com')
  
  export default {
    loggedIn () {
      return !!base.getAuth()
    },
  
    login (providers, cb) {
      if (Boolean(base.getAuth())) {
        this.onChange(true, this.getUser())
        return
      }
  
      // I think this is weird...
      if (!providers) {
        return
      }
  
      base.authWithOAuthPopup(providers, (err, authData) =&gt; {
        if (err) {
          console.log('Login Failed!', err)
        } else {
          console.log('Authenticated successfully with payload: ', authData)
          localStorage.setItem('user', JSON.stringify({
            name: base.getAuth()[providers].displayName,
            icon: base.getAuth()[providers].profileImageURL
          }))
          this.onChange(true, this.getUser())
          if (cb) { cb() }
        }
      })
    },
    logout (cb) {
      base.unauth()
      localStorage.clear()
      this.onChange(false, null)
      if (cb) { cb() }
    },
    onChange () {},
    getUser: function () { return JSON.parse(localStorage.getItem('user')) }
  }
  </code></pre>
  
  <p><strong>Login.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import auth from './config/auth.js'
  
  export default class Login extends Component {
    constructor (props, context) {
      super(props)
    }
  
    _login (authType) {
      auth.login(authType, data =&gt; {
        this.context.router.replace('/authenticated')
      })
    }
    render () {
      return (
        &lt;div className='login'&gt;
          &lt;button onClick={this._login.bind(this, 'twitter')}&gt;Login with Twitter account&lt;/button&gt;
          &lt;button onClick={this._login.bind(this, 'facebook')}&gt;Login with Facebook account&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  Login.contextTypes = {
    router: React.PropTypes.object.isRequired
  }
  </code></pre>