Cacher is the code snippet organizer for pro developers

import React from 'react'
import { render } from 'react-dom'
import { Router, Route,
  IndexRoute, Link, IndexLink, browserHistory } from 'react-router'

import App from './App'
import First from './First'
import Login from './Login'
import Home from './Home'
import NotFound from './NotFound'

import auth from './auth'

function isAuthed(nextState, replace, cb) {
  auth.loggedIn()
  .then(user => {
    if (!user) { replace({ pathname: '/login' }) }
    cb()
  })
}

const routes = (
  <Router history={ browserHistory }>
    <Route path='/' component={ App }>
      <IndexRoute component={ First } />
      <Route path='/login' component={ Login } />
      <Route path='/home' component={ Home } onEnter={ isAuthed } />
      <Route path='*' component={ NotFound } />
    </Route>
  </Router>
)
module.exports = routes

import firebase from 'firebase'

firebase.initializeApp({
  // firebase initialize
})

module.exports = {
  loggedIn () {
    return new Promise((resolve, reject) => {
      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          resolve(user)
        } else {
          resolve(false)
        }
      })
    })
  },

  getUser () {
    const user = firebase.auth().currentUser
    if (user != null) {
      return user;
    }
  },

  login(cb) {
    var provider = new firebase.auth.GithubAuthProvider()
    firebase.auth()
    .signInWithPopup(provider)
      .then((res) => {
        if (cb) cb(res)
      })
    .catch((error) => { console.log(error) })
  },

  logout(cb) {
    firebase.auth()
    .signOut()
    .then((result) => {
      if (cb) cb(result)
    })
  }
}

import React, { Component, PropTypes } from 'react'
import auth from './auth'

export default class Login extends Component {
  handleClick () {
    auth.login(data => {

      const { location } = this.props
      const { router } = this.context

      if (location.state && location.state.nextPathname) {
        router.replace(location.state.nextPathname)
      } else {
        router.replace('/home')
      }

      this.props.getCurrentUser()
    })
  }

  render() {
    return (
      <div>
        <button onClick={ this.handleClick.bind(this) }>
          Login to Quicker
        </button>
      </div>
    )
  }
}

Login.contextTypes = {
  router: PropTypes.object.isRequired
}

import React, { Component, PropTypes } from 'react'
import auth from './auth';

export default class Home extends Component {
  constructor (props) {
    super(props)
  }

  handleClick () {
    auth.logout(() => {
      const { router } = this.context
      router.replace('/')
    })
  }
  render() {

    return (
      <div>
        <code onClick={ this.handleClick.bind(this) }></code>
        <p>{ this.props.user.displayName }</p>
        <img src={ this.props.user.photoURL } />
      </div>
    );
  }
}

Home.contextTypes = {
  router: PropTypes.object.isRequired
}

import React, { Component } from 'react';
import auth from './auth'

export default class App extends Component {
  constructor (props) {
    super(props)
    this.state = { user: {} }
  }

  componentWillMount () {
    // case A: when visiting the initial this URL
    this._setCurrentUser()
  }

  _setCurrentUser () {
    // case B: when visiting from Login page,
    this.setState({ user: auth.getUser() })
  }

  render() {
    return (
      <div>
        <main>
          { React.cloneElement(this.props.children,
            { user: this.state.user,
              getCurrentUser: this._setCurrentUser.bind(this) }
            ) }
        </main>
      </div>
    );
  }
}