0

Currently, my code is communicating with my django-rest-auth api. It is getting the token, however, it is not authenicating the request. My backend shows 200 (username and password is correct). While my front end, reactjs is declaring wrong username or password (i created in else statement) and a 400 bad request error. 

 axios
      .post(
          'http://127.0.0.1:8000/rest-auth/login/',
          {
                username: this.state.username,
                password: this.state.password
          },
        //   { withCredentials: true }
          { isAuthenticated: true }
      )
          .then(response => {
              const token = response.data.key;
              if (localStorage.getItem(token)) {
                  console.log(token);
                  this.props.handleSucessfulAuth();
              } else {
                  this.setState({
                      errorMessage: 'Wrong username or password'
                  });
                  this.props.handleUnsuccessfulAuth();
                //   console.log(token);
              }

          })

       .catch(error => {
           this.setState({
               errorMessage: 'Authorization error occured',
               error
           })
           this.props.handleUnsuccessfulAuth();
    });

}

Now I have changed the top portion to the following:

handleSubmit(event) {
        event.preventDefault();
        axios.defaults.headers.common["Authorization"] = `Token ${this.props.token}`;

        axios
          .post(
              'http://127.0.0.1:8000/rest-auth/login/',
              {
                    username: this.state.username,
                    password: this.state.password
              },
            //   { withCredentials: true }
              { isAuthenticated: true }
          )
              .then(response => {
                  const token = response.data.key;
                  if (localStorage.setItem(token, 'token')) {
                      console.log(token);
                      this.props.handleSucessfulAuth();
                  } else {
                      this.setState({
                          errorMessage: 'Wrong username or password'
                      });
                      this.props.handleUnsuccessfulAuth();
                    //   console.log(token);
                  }

              })
John Gartsu
  • 61
  • 2
  • 9
  • Are you sure your code is right? Why do you get token and try to read from localStorage an item with the key which equals to your token? `if (localStorage.getItem(token))` – Jacob Tobiasz Apr 14 '20 at 16:57
  • @JakubTobiasz I am trying to get the token out of storage to provide access to the user. I am unfamiliar with the syntax – John Gartsu Apr 14 '20 at 16:59
  • What are you trying to do with the token? Save it in the localStorage? From your code it seems token is coming from API but you are fetching it from localStorage. – Mukund Goel Apr 14 '20 at 17:01
  • 1
    If you provide a login and a password your server should return an auth token which you probably want to save first. Correct me if I'm wrong. – Jacob Tobiasz Apr 14 '20 at 17:02
  • @JakubTobiasz yeah you're right. just make sure your response has key and than localStorage.setItem('key); than verify your key with localStorage.getItem('key') wherever you want in your application. – Lakshman Kambam Apr 14 '20 at 17:06
  • @MukundGoel - I am trying to get the token from the api to authenticate user assoicated with username and password. – John Gartsu Apr 14 '20 at 17:10
  • @JakubTobiasz can you clearify? I agree with what your saying – John Gartsu Apr 14 '20 at 17:11
  • @LakshmanKambam can you clearify? – John Gartsu Apr 14 '20 at 17:12
  • The most common way is hitting auth endpoint to receive a token. Then you save this token in e.g. localStorage by using `localStorage.setItem(key, value);`. During next requests you get a token from LS and pass it with every request. If your token doesn't exist in LS you redirect your user to "login page" to receive a token. It's very basic and generally description. – Jacob Tobiasz Apr 14 '20 at 17:14
  • @JakubTobiasz thank you! much appreciated! Thank you for clearifying! – John Gartsu Apr 14 '20 at 17:16
  • @JohnGartsu does it help? If yes, I'll convert it into an answer. – Jacob Tobiasz Apr 14 '20 at 17:16
  • @JakubTobiasz not completely because I am trying to make it work with axios. – John Gartsu Apr 14 '20 at 17:21
  • Axios is just a way to receive or send some data. This what I'm talking about deal with logic not strongly related with axios. After auth you save your token, during next requests just check if token exists, if yes pass as parameter. You can use Axios, Jquery AJAX oraz XML HttpRequest. It's just a transporter. – Jacob Tobiasz Apr 14 '20 at 17:25
  • @JakubTobiasz I understand that, however, now the console is telling me the token is undefined. – John Gartsu Apr 14 '20 at 17:33
  • @JakubTobiasz I have display the new code – John Gartsu Apr 14 '20 at 17:39
  • @JohnGartsu sorry for late reply, I hope you got clarification from Jakub Tobiasz – Lakshman Kambam Apr 14 '20 at 17:43

0 Answers0