I'm trying to build an web app using react and I kind of hit the wall.

The thing is, I don't want any users who has already logged in to access the login page.

I tried to redirect them using render method and componentDidMount method, but since the render method is called before componentDidMount, the login page flashes out before redirection.

These are my codes.

I'm using redux and firebase to control the component state and authenticate.

class CenterPanel extends Component {
    render() {
        const { user }=this.props;

        if(user!=null) { //this is how I tried to redirect
            return ( //
                <Redirect to='/somewhereNotHere' />
            );
        }

        return ( //this flashes out before redirection
            <div className={cx('center_panel')}>
                <div className={cx('button')}>
                    login
                </div>
            </div>
        );
    }

    componentDidMount() {
        const { changeUserStatus }=this.props;

        firebase.auth().onAuthStateChanged(
            (user) => changeUserStatus(user)
        );
    }
}

would appreciate any kind of advice. Thx in advance.

Maybe the props user is undefined before you call onAuthStateChanged

If it is right, you can control your component by three user values. undefined, null, user value.

render() {
        const { user }=this.props;

        if(user === undefined){
            return null; //or Loading component
        }

        if(user!=null) { //this is how I tried to redirect
            return ( //
                <Redirect to='/somewhereNotHere' />
            );
        }

        return ( //this flashes out before redirection
            <div className={cx('center_panel')}>
                <div className={cx('button')}>
                    login
                </div>
            </div>
        );
    }
6 users liked answer #0dislike answer #06
bkm412 profile pic
bkm412

You should try this,

if(user && user!==null) { //this is how I tried to redirect
     return <Redirect to='/somewhereNotHere' />  //Make sure you have imported Redirect from correct package i.e. react-router-dom
}else{
     return ( //this flashes out before redirection
            <div className={cx('center_panel')}>
                <div className={cx('button')}>
                    login
                </div>
            </div>
     );
}

Another way of doing this is in Routes itself,

<Route exact path="/your_Path_to_component" render={() => (
  user ? ( //get the user data as you are passing as props to CenterPanel component
    <Redirect to="/somewhereNotHere"/>
  ) : (
    <CenterPanel />
  )
)}/>

In this way no need to pass user as props to CenterPanel component as well as no need to write any redirection logic in CenterPanel component.

0 users liked answer #1dislike answer #10
ravibagul91 profile pic
ravibagul91

you can solve it by conditioning the view

user && <div>...</div>

the content of the page will only show up if the user is truthy (authenticated).

0 users liked answer #2dislike answer #20
Hali profile pic
Hali

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).