auth comonent

gistfile1.txt

class MatchWhenAuthorized extends Component {
  constructor(props) {
    super(props);
    this.state = {
      authInProgress: true,
      isAuthenticated: false,
    }
  }
  
  componentWillMount = () {
    this.setState({ authInProgress: true });
    Firebase.auth().onAuthStateChanged((user) => {
      this.setState({
        authInProgress: false
        isAuthenticated: user ? true : false
      });
    });
  }
  
  render() {
    const { authInProgress, isAuthenticated } = this.state;
    const { component: Component, ...rest } = this.props;
    
    // You have a couple of options here
    // You can render null while in progress (boo)
    /*
    if (authInProgress) {
      return null
    }
    */
    
    return (
      <Match
        { ...rest } 
        children={({ matched, ...props }) => {
          if (!matched) {
            return null;
          }

          if (authInProgress) {
            return (<div>Logging In (PRETEND THERE IS A SPINNER)</div>);
          }

          if (isAuthenticated) {
            return (<Component {...props}/>);
          }

          return (<Redirect to={{ pathname: '/login', state: { from: props.location } }}/>);
        }}
      />
    )
  }
}