React route if user hasn't confirmed email

Question

I have a check for email(backend java), and component which displays whether the user has confirmed mail or not, only text confirmed or no.

And I want to force user with not verified email verify email first before using private routes, or any backend features that require authorization.

But i understand where should i add a check like this. I would like this to work at the level of the whole applicationю

My stack react, redux, saga

I would be very grateful for your advice

I tried add to private route this:

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

but its not work for me

Alan Willian Duarte · Answer 1 · 2021-08-29T22:24:16.317

Edit

Let's say you have the following routes:

<Route exact path='/' exact component={Home} /> // has to be protected
<Route exact path='/settings' exact component={UserSettings} /> // has to be protected
<Route exact path='/login' component={Login} />
<Route exact path='/register' component={Register} />

In order to check email, you need to create a custom Route, that checks if its authenticated You cand do something like this:

function PrivateRoute (props) {
  // if not verified, redirect to login page
  if (!props.state.profile.emailVerified) {
    return <Redirect to={{pathname: '/login', state: {from: props.location}}} />
  }
  // if verified, render component
  return <Route {...props}/>
}

Now that it is created, you can use it on your routes, like this:

// changed name from Route to PrivateRoute
// pass the state variable so we can check if the email is verified
<PrivateRoute state={state} exact path='/' exact component={Home} /> // has to be protected
<PrivateRoute state={state} exact path='/settings' exact component={UserSettings} /> // has to be protected
<Route exact path='/login' component={Login} />
<Route exact path='/register' component={Register} />

For us to give you a proper answer, you need to tell what are you using for routing. Assuming you are using react-router, you can read the answer for this question if you are using other way for routing, please tell us

If I understand correctly then I am using react router dom, sorry, I just started learning react — kiker, Aug 29 '21 at 21:36
it's ok, we all been through this. But I insist that you read [this answer](https://stackoverflow.com/a/43171515/4200834). It is the perfect answer for your question — Alan Willian Duarte, Aug 29 '21 at 21:51

score 0 · Answer 2 · answered Aug 29 '21 at 21:44

One way can be:

1)tracking email verification with a component in root of your app

2)if user has not verified his/her email yet and user is not already in specified page. (you can use window.location.pathname for checking the current route)

3)Redirect the user to the specified route with the help of useHistory or with this.props.history depending on the way you use react.

React route if user hasn't confirmed email

2 Answers2