CODEWITHSUNDEEP
reactjsreduxnext.js
A. Atiyah
A. Atiyah

Reputation: 555

Redirect if authenticated NextJS Redux

I'm learning NextJS with Redux and I created a store and managed to get the user to the Eedux state when authenticated but now I don't want that user to access the sign-in page if authenticated.

This is the code I wrote so far: 

const SignInSignUp = ({ currentUser }) => {
  const StyledSignInSignUp = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
  `;

  const renderSignIn = () => {
    if (currentUser) {
      Router.push('/');
    } else {
      return (
        <StyledSignInSignUp>
          <SignIn />
          <SignUp />
        </StyledSignInSignUp>
      );
    }
  };

  return (
    <motion.div
      initial={{ y: 50 }}
      animate={{ y: 0 }}
      exit={{ y: 50 }}
      className="container"
    >
      {renderSignIn()}
    </motion.div>
  );
};

const mapStateToProps = ({ user }) => ({ currentUser: user.currentUser });

export default connect(mapStateToProps)(SignInSignUp);

It works and redirects the user but it takes around 3 seconds until states come before redirecting them.

Is there a way to not render the page before I already have the state or something to prevent that?

Upvotes: 0

Views: 823

Answers (1)

user9572013
user9572013

Reputation:

You could have a conditional in your return statement where you just render a fragment when you are loading the information about if the user is logged in:

const SignInSignUp = ({ currentUser, isUserLoading }) => {
  const StyledSignInSignUp = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
  `;

  const renderSignIn = () => {
    if (currentUser) {
      Router.push('/');
    } else {
      return (
        <StyledSignInSignUp>
          <SignIn />
          <SignUp />
        </StyledSignInSignUp>
      );
    }
  };

  return (
    <motion.div
      initial={{ y: 50 }}
      animate={{ y: 0 }}
      exit={{ y: 50 }}
      className="container"
    >
      {!isUserLoading ? renderSignIn() : <></>}
    </motion.div>
  );
};

const mapStateToProps = ({ user }) => ({ currentUser: user.currentUser, isUserLoading: user.isUserLoading (UPDATE THIS) });

export default connect(mapStateToProps)(SignInSignUp);

where isUserLoading is a state that turns false when you are done loading.

Upvotes: 1

Related Questions