Question 226647 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Error: Authorization header malformed when using Axios and JWT with WordPress

I am trying to register a user and somehow get the userdata using Axios and JWT with WordPress. I am following from this issue Below is my code:

    const signupdata = {
        username: loginFields.email,
        email: loginFields.email,
        password: loginFields.password
    }
axios.post( 'http://nextjs-headless-wordpress.local/wp-json/jwt-auth/v1/token',loginData)
.then( res => {
        if(res.data){
            console.log('authToken'+res.data.data.token);
            //axios.defaults.headers.common['Authorization'] = res.data.data.token;

        axios.post('http://nextjs-headless-wordpress.local/wp-json/wp/v2/users', signupdata, {
                    headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                        "Accept": "application/json",
                'Authorization': 'Bearer ' + res.data.data.token
              }
            }).then(response => {
          if (response.data) {
            console.log(response.data)
          }
        }).catch(error => {
          console.log('User Data response Error: ' + error)
        })

        }
});

I was able to get the token in my first axios.post call, but I kept getting this error when I try to get the userdata

{success: false, statusCode: 403, code: 'jwt_auth_bad_auth_header', message: 'Authorization header malformed.', data: Array(0)}

I checked and it seems I am using the correct token when calling the axios.post to wordpress. Where in my code did I get wrong? Please help. Thank you.

Tags:

2

Answers


  1. 0

    It looks like you are missing a space in your Authorization header. The correct format is Authorization: Bearer <token>, but your code produces Authorization: Bearer<token>. Try this instead:

    axios.post( 'http://nextjs-headless-wordpress.local/wp-json/jwt-auth/v1/token',loginData)
.then( res => {
        if(res.data){
            console.log('authToken: ' + res.data.data.token);
            //axios.defaults.headers.common['Authorization'] = res.data.data.token;

        axios.post('http://nextjs-headless-wordpress.local/wp-json/jwt-auth/v1/users/me', {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'Bearer ' + res.data.data.token
          }
        }).then(response => {
          if (response.data) {
            console.log(response.data)
          }
        }).catch(error => {
          console.log('User Data response Error: ' + error)
        })

        }
});
    Login or Signup to reply.
  2. 0

    Check if the token itself is even valid. You can use a tool like this to decode the token.

    Specifically, you should make sure:

    • The token is not actually malformed (there is a decoded token)
    • The token is not expired
    • If you know the secret key; verify its signature

    I suspect that the issued token is wrong, possibly because an of incorrect environment variable or something similar.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search