Why Firebase user is not authenticated anymore when refreshing?

Question

A very simple App. At the / path I want to render Home when logged in and Introduction if not signed in. Logging in on the Login page works, if i console.log(firebase.auth().currentUser) it shows all the data and on / it renders Home correctly. So, while still being at the / path, something weird happens; when i refresh page we are not logged in anymore and it renders Introduction. But when I click on the link <li><Link to='/'>Home</Link></li> the Home component renders correctly and we are logged in again. Why is this happening?

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Switch, Link, Redirect} from 'react-router-dom';
import firebase from './firebase'

import Home from './containers/home'
import Login from './containers/login'
import Register from './containers/register'
import Dashboard from './containers/dashboard'

const Protected = ({component: Component, ...rest}) => (
  <Route {...rest} render={(props) => {
    if(firebase.auth().currentUser) 
      return <Component {...props} />
     else 
      return <Redirect to='/register' />

  }} />
)

const Introduction = props => ( <h1>hello</h1>)

class App extends Component {


  render() {
    return (
      <Router>
        <React.Fragment>
          <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/register'>Register</Link></li>
            <li><Link to='/login'>login</Link></li>
            <li><Link to='/dashboard'>dashboard</Link></li>
          </ul>
          <Switch>
            <Route path='/' exact render={(props) => {
              if(firebase.auth().currentUser) 
                return <Home {...props} />
              else
                return <Introduction {...props} />
              }
            } />
            <Route path='/register' exact component={Register} />
            <Route path='/login' component={Login} />
            <Protected path='/dashboard' component={Dashboard} />
          </Switch>
        </React.Fragment>
      </Router>
    );
  }
}

export default App;

kingdaro · Accepted Answer · 2018-01-30 20:38:27Z

1

Here's what happens:

Webpage loads
Firebase starts a request to check whether the user is authenticated
The app renders, currentUser is null
The authentication state changes, but the app doesn't re-render

The app needs to listen to changes in the authentication state and perform a re-render accordingly. https://firebase.google.com/docs/reference/js/firebase.auth.Auth#onAuthStateChanged

class App extends React.Component {
  state = {
    currentUser: null
  }

  componentDidMount() {
    this.unsubscribe = firebase.auth().onAuthStateChanged(currentUser => {
      this.setState({ currentUser })
    })
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  render() {
    // use this.state.currentUser
  }
}

answered Jan 30, 2018 at 20:38

kingdaro

12.1k3 gold badges37 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andy Hin Over a year ago

This behavior is problematic if you are using authenticated routes and redirecting users to a login page. The app renders, current user is null, redirects to login page before firebase has a chance to initialize.

kingdaro Over a year ago

Not sure I understand. It might initially show a login page, but if the user is authenticated, the state will update and show the dashboard. What's your suggested alternative?

Andy Hin Over a year ago

@kindaro I'm not aware of any solution (still looking) other than to wait for the login state before rendering anything in react. What you mentioned is fine (flash login page and then refresh to logged-in page after status) if it's a SPA, but if you are redirecting user to a separate login URL then it becomes a problem.

Collectives™ on Stack Overflow

Why Firebase user is not authenticated anymore when refreshing?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related