React-native-auth0: Bad HTTP authentication header format

[MSSPL-PiyaleeMaiti]

We use react-native-auth0 and use Auth0 Management API User endpoints (new Users()).
The description of the usage of this function in the document is below:

    .users('user token')
    .getUser({id: "user_id"})
    .then(console.log)
    .catch(console.error);

Description

Our code is below:

      .users({token: credentials.accessToken})
      .getUser({id: userInfo.sub})
      .then((fullUserInfo) => {
        console.log('userUserInfo', fullUserInfo);
      })
      .catch(err => {
        console.log('error-userUserInfo', err);
      });

But it showing below error:
Bad HTTP authentication header format

Prerequisites

• [x] Did you check the documentation? _http://auth0.github.io/react-native-auth0/Users.html#.getUser_
• [x] Did you check the Auth0 Community? _Yes, but can't fine any solutino_
• [x] Are you reporting this to the correct repository? _Yes_
• [x] Are there any related or duplicate Issues or PRs for this issue? _No duplicate issue find_

Environment

Please provide the following:

• React Native Auth0 version : ^1.2.2
• React Native version : 0.54.4

Reproduction

Can anyone please explain the meaning of .users('user token'). I can't understand how we send data in replace of user and token. The document is not cleared.

[lbalmaceda]

The constructor the sample in the first snippet is calling is the one defined in the root index file here. So when it says "user token" you should pass the token value directly. e.g. credentials.accessToken

auth0
    .users(credentials.accessToken)
    .getUser({id: userInfo.sub})
    .then(console.log)
    .catch(console.error);

[MSSPL-PiyaleeMaiti]

@lbalmaceda Thanks for your response. But I also use like ur example, but it still getting same error. My code is below:

      .users(credentials.accessToken)
      .getUser({id: userInfo.sub})
      .then((fullUserInfo) => {
        console.log('userUserInfo', fullUserInfo);
      })
      .catch(err => {
        console.log('error-userUserInfo', err);
      });

Error message is below:
error-userUserInfo Error: Bad HTTP authentication header format

[lbalmaceda]

Have you checked the value of the access token you're passing? how are you requesting it?

[MSSPL-PiyaleeMaiti]

@lbalmaceda My whole code will show you in below:

facebookLogin = () => {
    auth0
    .webAuth
    .authorize({
      scope : 'openid profile email',
      audience : `https://${Environment.AUTHDOMAIN}/userinfo`,
      connection : 'facebook'
    })
    .then(credentials => {
      this.getUserInfo2(credentials);
    })
    .catch(error => {
      console.log('error-facebookLogin', error);
    });
  }

getUserInfo2 = (credentials = '') => {
    let self = this;
    if(credentials) {
      auth0
      .auth
      .userInfo({token: credentials.accessToken})
      .then((userInfo) => {
        self.userUserInfo(credentials, userInfo);
      })
      .catch(err => {
        console.log('error-getUserInfo2', error);
      });
    }
  }

userUserInfo = (credentials, userInfo) => {
    console.log('auth0', auth0);
    if(userInfo) {
      auth0
      .users(credentials.accessToken)
      .getUser({id: userInfo.sub})
      .then((fullUserInfo) => {
        console.log('userUserInfo', fullUserInfo);
      })
      .catch(err => {
        console.log('error-userUserInfo', err);
      });
    }
  }

Below the whole code by which I want to get full user information. Now tell me which is wrong in my code.

[lbalmaceda]

Instead of requesting audience https://${Environment.AUTHDOMAIN}/userinfo try using https://${Environment.AUTHDOMAIN}/api/v2/ (note the trailing slash) and in the scope include as well read:current_user. This way the token you get issued should allow you to call the users api.

[MSSPL-PiyaleeMaiti]

@lbalmaceda I followed your instruction and use /api/v2 in the replace of /userinfo, but the below error is showing ReferenceError: error is not defined on

      .auth
      .userInfo({token: credentials.accessToken})

this function. This is not called. I need that three functions, which describe in the above comment, work properly, else we can't get the user id. And if I can't get that id then I can't call

      .users(credentials.accessToken)
      .getUser({id: userInfo.sub})

this function also.
Can you explain the whole process from calling auth0 social page to get full user info?

[lbalmaceda]

I've just tried your code and works fine for me when using audience ..../api/v2/ and requesting the scope read:current_user. I've changed the getUserInfo2 console.log to use "err" rather than "error" as "error" is not defined, as told by the message you posted here.

[MSSPL-PiyaleeMaiti]

@lbalmaceda sry, it's my mistake. Now I correct my code and my code is below:

facebookLogin = () => {
    auth0
    .webAuth
    .authorize({
      scope : 'read:current_user',
      audience : `https://${Environment.AUTHDOMAIN}/api/v2/`,
      connection : 'facebook'
    })
    .then(credentials => {
      console.log('credentials-facebookLogin', credentials);
      this.getUserInfo2(credentials);
    })
    .catch(error => {
      console.log('error-facebookLogin', error);
    });
  }
getUserInfo2 = (credentials = '') => {
    let self = this;
    if(credentials) {
      auth0
      .auth
      .userInfo({token: credentials.accessToken})
      .then((userInfo) => {
        console.log('getUserInfo2', userInfo);
        self.userUserInfo(credentials, userInfo);
      })
      .catch(err => {
        console.log('error-getUserInfo2', err);
      });
    }
  }

  userUserInfo = (credentials, userInfo='') => {
      auth0
      .users(credentials.accessToken)
      .getUser({id: userInfo.sub})
      .then((fullUserInfo) => {
        console.log('userUserInfo', fullUserInfo);
      })
      .catch(err => {
        console.log('error-userUserInfo', err);
      });
  }

Now I get error Error: invalid credentials.
The error is shown when I call getUserInfo2 function and show error in the console log.

[lbalmaceda]

@MSSPL-PiyaleeMaiti In the scope you need to keep the openid value and include as well read:current_user, or the token won't be granted access to that call.

[MSSPL-PiyaleeMaiti]

@lbalmaceda Thank you. It's working for me. My final code is below:

facebookLogin = () => {
    auth0
    .webAuth
    .authorize({
      scope : 'read:current_user openid',
      audience : `https://${Environment.AUTHDOMAIN}/api/v2/`,
      connection : 'facebook'
    })
    .then(credentials => {
      console.log('credentials-facebookLogin', credentials);
      this.getUserInfo2(credentials);
    })
    .catch(error => {
      console.log('error-facebookLogin', error);
    });
  }

  getUserInfo2 = (credentials = '') => {
    let self = this;
    if(credentials) {
      auth0
      .auth
      .userInfo({token: credentials.accessToken})
      .then((userInfo) => {
        console.log('getUserInfo2', userInfo);
        self.userUserInfo(credentials, userInfo);
      })
      .catch(err => {
        console.log('error-getUserInfo2', err);
      });
    }
  }

  userUserInfo = (credentials, userInfo='') => {
      auth0
      .users(credentials.accessToken)
      .getUser({id: userInfo.sub})
      .then((fullUserInfo) => {
        console.log('userUserInfo', fullUserInfo);
      })
      .catch(err => {
        console.log('error-userUserInfo', err);
      });
  }

:smile: :+1: :heart:

[MSSPL-PiyaleeMaiti]

@lanceharper Can you tell me how can I login the above same steps through our database with user name nad password? My used code is below:

emailIdLogin = () => {
    auth0
    .auth
    .passwordRealm({username: this.state.userName, password: this.state.password, realm: "oh-development"})
    .then((response) => {
      console.log('response-emailIdLogin', response);
    })
    .catch((err) => {
      console.log('error-emailIdLogin', err);
    });
  }

The below is error:
Error: Grant type 'http://auth0.com/oauth/grant-type/password-realm' not allowed for the client.

Now my question is how I allow this grant type from manage.auth0.com page? I show you a screenshot below of application settings page, where all grant types are showing, but can't find password-realm to allow.

[lbalmaceda]

@MSSPL-PiyaleeMaiti Some client types don't have or don't allow the grant to be enabled. Public clients (e.g. native apps) shouldn't be using them at all. Instead, you could call the Universal Login Page as you've been doing for logging in with the "facebook" connection, passing the name of the realm instead or even no connection value at all to show the lock widget with all the connections you've configured in the past.

    .webAuth
    .authorize({
      scope : 'openid profile email',
      audience : `https://${Environment.AUTHDOMAIN}/userinfo`
    })

If you still want to go with the other approach, you will find this topic on the community helpful https://community.auth0.com/t/error-grant-type-password-not-allowed-for-the-client-for-resource-owner-password-flow/6951/2.

[MSSPL-PiyaleeMaiti]

@lbalmaceda thanks for your response. So as per your response, I can't use that API for login with username and password?

[MSSPL-PiyaleeMaiti]

@lbalmaceda I allow grant_type Password from the application settings by which I get the response using passwordRealm() method. But now the one problem occurs. My code is below:

emailIdLogin = () => {
    console.log('emailIdLogin', this.state.userName, this.state.password);
    auth0
    .auth
    .passwordRealm({username: this.state.userName, password: this.state.password, realm: "oh-development"})
    .then((response) => {
      console.log('response-emailIdLogin', response);
      this.getUserInfo2(response);
    })
    .catch((err) => {
      console.log('error-emailIdLogin', err);
    });
  }

getUserInfo2 = (credentials = '') => {
    let self = this;
    if(credentials) {
      auth0
      .auth
      .userInfo({token: credentials.accessToken})
      .then((userInfo) => {
        console.log('getUserInfo2', userInfo);
        self.userUserInfo(credentials, userInfo);
      })
      .catch(err => {
        console.log('error-getUserInfo2', err);
      });
    }
  }

  userUserInfo = (credentials, userInfo='') => {
      auth0
      .users(credentials.accessToken)
      .getUser({id: userInfo.sub})
      .then((fullUserInfo) => {
        console.log('userUserInfo', fullUserInfo);
      })
      .catch(err => {
        console.log('error-userUserInfo', err);
      });
  }

Here I can't get response using auth0.users().getUser() this method. Show below error:
Bad HTTP authentication header format.
Can you tell me how I resolve this issue?

[MSSPL-PiyaleeMaiti]

@lbalmaceda It works for me. Working code is below:

emailIdLogin = () => {
    console.log('emailIdLogin', this.state.userName, this.state.password);
    auth0
    .auth
    .passwordRealm({
      username: this.state.userName,
      password: this.state.password,
      realm: "oh-development",
      scope : 'read:current_user openid',
      audience : `https://${Environment.AUTHDOMAIN}/api/v2/`,
    })
    .then((response) => {
      console.log('response-emailIdLogin', response);
      this.getUserInfo2(response);
    })
    .catch((err) => {
      console.log('error-emailIdLogin', err);
    });
  }

[lbalmaceda]

@MSSPL-PiyaleeMaiti I missed this one.

So as per your response, I can't use that API for login with username and password?

You can but you shouldn't as it's not a safe approach to use from a mobile app. You can read more about it here.

If you have more doubts regarding this SDK feel free to open a new issue. If you have questions regarding the platform I suggest you contact our team at https://support.auth0.com.

[MSSPL-PiyaleeMaiti]

@lbalmaceda Thanks for your response. I already contact with support team. And with help of them, my code is working, and I get the proper response which I want. My code is below post, you can see. Thanks for your help.

[MSSPL-PiyaleeMaiti]

@lbalmaceda I have a problem with the scope read:current_user. When I add this then for the first time show a permission screen in APP for that current_user. Is there any way to omit that permission screen and always set that permission as allowing. Can you suggest any solution?

[lbalmaceda]

@MSSPL-PiyaleeMaiti That's the consent screen, which is there to let the user know that a new scope has been requested by your application and their (scoped) information may be accessed by you. It can be skipped only in certain scenarios. Please read the whole thread here and ask your questions there.

[MSSPL-PiyaleeMaiti]

Thanks for your response, it's now working as per my requirement.