how to handle login redirect to dashboard in reactjs

Question

I am troubled with redirect after login. As I know Fetch API has no concept of handling this. I tried to use React-router-dom but it is not working. I don't know what I am doing differently. I am trying to learn basic react, develop an application which is fully authenticated.

I did this

import {  BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
import Dashboard from './Dashboard';

This is the state

this.state = {
redirect: false, 
username: '', 
l_password: ''
}

The Fetch API and setRedirect function

setRedirect =() =>{
        this.setState({
          redirect: true
        });
      }
      handleLogin =(event) =>{
      event.preventDefault();

      fetch('/oauth/token',
         {
            method: "POST",
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body:`grant_type=password&username=${this.state.username}&password=${this.state.l_password}&client_id=4&client_secret=LT7raDKvPwIUrDFJBISlhpzAXu6cSYiLBGhrUmTm&scope=*`

         }
      )
      .then(response =>
         response.json()

      )
      .then(responseJson => {
          const returnObj = responseJson;
          console.log(returnObj);
          sessionStorage.setItem('resData', JSON.stringify(returnObj));
          console.log(this.state.redirect);
          if(this.state.redirect === true){
               return (
                   <Router><Route path="/dashboard" component={Dashboard} /></Router>
               );
           }
           else{
            <Redirect to="/" />
           }

      });

        this.setState({
            username: '',
            l_password:''
        });
}

The form

 <Form onSubmit={this.handleLogin}>
                                <Form.Group controlId="formBasicEmail">
                                    <Form.Label>Email address</Form.Label>
                                    <Form.Control type="email" placeholder="Enter email"
                                     autofoccus="true"
                                     autoComplete="new-email"
                                     onChange= {this.ChangeText}
                                     name="username"
                                     value={this.state.username}
                                    />
                                </Form.Group>

                                <Form.Group controlId="formBasicPassword">
                                    <Form.Label>Password</Form.Label>
                                    <Form.Control type="password" placeholder="Password" autoComplete="new-password"
                                     onChange= {this.ChangeText}
                                     name="l_password"
                                     value={this.state.l_password}
                                    />
                                </Form.Group>

                                <Button
                                onClick={this.setRedirect.bind(this)}

                                variant="primary" type="submit" size="lg" block>
                                    Login
                                </Button>
                                <Form.Group controlId="formBasicChecbox">
                                    <Form.Check type="checkbox" label="Remember" />
                                   <a href="#" style={{float:'right', marginTop:-23}}>Forgot Password?</a>
                                </Form.Group>
                                <div id="error"></div>
                                <div className="clear-fix"></div>
                                <hr/>

                            </Form>

What I intend to achieve is to redirect the page to dashboard if redirect is true otherwise the home

Abdulkabir Ojulari · Accepted Answer · 2019-04-10 12:06:08Z

First, import withRouter to your react-router-dom, then add this.props.history.push('/dashboard') to your handleLogin function after you have satisfied the conditions for login.

handleLogin =(event) =>{
      event.preventDefault();

      fetch('/oauth/token',
         {
            method: "POST",
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body:`grant_type=password&username=${this.state.username}&password=${this.state.l_password}&client_id=4&client_secret=LT7raDKvPwIUrDFJBISlhpzAXu6cSYiLBGhrUmTm&scope=*`

         }
      )
      .then(response =>
         response.json()

      )
      .then(responseJson => {
          const returnObj = responseJson;
          console.log(returnObj);
          sessionStorage.setItem('resData', JSON.stringify(returnObj));
          ....
          this.props.history.push('/dashboard')

      });


}

At the end of the class, add export default withRouter(name of your class)

For more reading, check out this tutorial. enter link description here

Distress · Accepted Answer · 2019-04-09 20:01:36Z

0

I guess it's the onclick that fires when it's too late ? Try to set it true at the beginning of your method handleLogin

handleLogin = (event) => {
    event.preventDefault();

    this.setState({
      redirect: true
    });     

    fetch('/oauth/token',...

answered Apr 9, 2019 at 20:01

Distress

361 silver badge3 bronze badges

Comments

Zangetsu Ichirin · Accepted Answer · 2019-04-09 20:12:43Z

class App extends Component {render() {
return (
  <div>
    <NavBar />
    <div className="content">
      <Switch>
        <Route path="/products/:id" component={ProductDetails} />
        <Route
          path="/products"
          render={props => <Products sortBy="newest" {...props} />}
        />
        <Route path="/posts/:year?/:month?" component={Posts} />
        <Redirect from="/messages" to="/posts" />
        <Route path="/admin" component={Dashboard} />
        <Route path="/not-found" component={NotFound} />
        <Route path="/" exact component={Home} />
        <Redirect to="/not-found" />
      </Switch>
    </div>
  </div>
);}}

Check this code. On a project I made, I used react router dom.

import it with the following code :

import { Route, Switch, Redirect } from 'react-router-dom';

I suggest you read more about Routing, Mosh Hamedani does great tutorials on youtube and on his website :)

bsekula · Accepted Answer · 2019-04-09 20:14:22Z

0

https://reacttraining.com/react-router/web/api/Redirect

Do not return Route component in your setRedirect function.

Create a Route in your app and set state e.g. shouldRedirect at the end of you setRedirect calls e.g.

.then(responseJson => {
  const returnObj = responseJson;
  console.log(returnObj);
  ...
  setState({shouldRedirect: this.state.redirect})
})

<Router>
  <Route exact path="/" render={() => (
    shouldRedirect ? (
    <Redirect to="/dashboard"/>
    ) : (
    <PublicHomePage/>
    )
  )}/>
</Router>

Also you can check nice working example here: https://reacttraining.com/react-router/web/example/auth-workflow

answered Apr 9, 2019 at 20:14

bsekula

9192 gold badges10 silver badges28 bronze badges

1 Comment

bsekula Over a year ago

As I said, you cannot return component from promise, try first very basic example with redirection e.g. just simple redirect when clicking a button (no requests to server and so on) and when it will work, start adding your logic

Collectives™ on Stack Overflow

how to handle login redirect to dashboard in reactjs

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related