Logo
Home

OAuth 2.0 Integration Tips: Be Careful When Entering Your Redirect URI

Hey Devs,

As a follow up to my most recent article, OAuth 2.0 Support in the QuickBooks NodeJS SDK Explained, I thought I would highlight a couple of odd errors I ran into, which caused me to spin cycles trying to figure out what went wrong.  It turned out that both were caused by a really simple mistake that a lot of folks would normally overlook.  In the endeavor to save you guys time, I’d like to point it out to you.

The Errors….

This one happens after your user clicks on the sign into QuickBooks button during the sign in flow.  The expectation is to load the authentication window where your user will enter their credentials; instead you are presented with the above error, which says “The redirect_uri query parameter value is invalid. Make sure it is listed in the Redirect URIs section on your app’s keys tab and matches it exactly. Click here to learn more about the redirect_uri query parameter.”

The other error I found making the call to Exchange code for access token.  The response I got back was “{ error: ‘invalid_grant’ } ” in the response instead of the access token.

What caused it?

First lets take a look at how I defined the redirect uri in my dashboard.

Redirect URI 2 is defined as ‘http://localhost:3000/callback’.

In both errors, the cause was a mistake I made when specifying the redirect uri parameter on the requests.

The Remedy for the Error

The first error was in the request for the Authorization Token.

  var redirecturl = QuickBooks.AUTHORIZATION_URL +
    '?client_id=' + consumerKey +
    '&redirect_uri=' + encodeURIComponent('http://localhost:' + port + '/callback/') +
    '&scope=com.intuit.quickbooks.accounting' +
    '&response_type=code' +
    '&state=' + generateAntiForgery(req.session);

I defined this as:

'http://localhost:' + port + '/callback/'

The mistake was here: ‘/callback/’, whereas in the dashboard it was defined as ‘/callback’ without the additional ‘/’ at the end.  Removing the ‘/’ cured this error.

The second error was in the request to get the Access Token:

  var postBody = {
    url: 'https://oauth.platform.intuit.com/oauth2/v1/tokens/bearer',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded',
      Authorization: 'Basic ' + auth,
    },
    form: {
      grant_type: 'authorization_code',
      code: req.query.code,
      redirect_uri: 'http://localhost:' + port + '/callback/'
    }

In line 11 above, I defined the redirect uri parameter as:

'http://localhost:' + port + '/callback/'

Again, pay attention to the ‘/callback/’ part of the path.  I again had an additional ‘/’ whereas I defined it in the dashboard as ‘/callback’ only.  Removing the ‘/’ from the uri parameter from the request post body cured this error.

So that’s it. A simple ‘/’ had set me back hours!  Save yourself time and make sure the uri parameters between the dashboard and your requests match!

Thats it, and as usually happy coding devs!

Jimmy Wong

Intuit Developer Evangelist


Posted

in

by

Tags:

Comments

5 responses to “OAuth 2.0 Integration Tips: Be Careful When Entering Your Redirect URI”

  1. jose@pavelespinal.com Avatar
    jose@pavelespinal.com

    I faced exactly the same errors while I was integrating the PHP SDK with CodeIgniter framework. A single trailing slash in the base_url of the config file was enough to make me re-reading my code once and again a couple of times.

    I keep amazed by the elegance of the PHP SDK, nonetheless. To whom it might concern, the integration sample is here: https://github.com/jespinal/ciqb-integration

    Happy coding.

    1. Jimmy Wong Avatar
      Jimmy Wong

      Hey Jose,

      Thanks for the compliments on the PHP SDK and I’ll be sure to pass it on to the developer of it. Also thank you for sharing your sample integration!

      Best Regards,
      Jimmy

  2. Cody Avatar
    Cody

    Thank you for sharing this! I am in the process of working through my first project adding Quickbooks payments to a Woocommerce site. It appears that my settings in Woocommerce attempt to automatically set the paths. However, I am still getting the error you mentioned above. Where would I go to edit the lines of code you have mentioned above? Thank you!

    1. Jimmy Wong Avatar
      Jimmy Wong

      Hey Cody,

      In my example I’ve used the NodeJS SDK, the lines you would edit would be lines 53 and 74 of app.js.

      For the other SDK’s I would recommend asking the question on our developer help forums.

      Thanks,
      Jimmy

  3. ROC Avatar
    ROC

    Hi jimmy, I got a similar porblem, I have 2 issues, the first one Says:
    {“error_description”:”Mismatching redirectUri: http://localhost/connecti/associate/QuickBooks/paymentOptions“,

    Te second one says:
    “,”error”:”invalid_grant”}”

    I am using PHP and this is my code:
    ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, “https://oauth.platform.intuit.com/oauth2/v1/tokens/bearer”);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_TIMEOUT, 30);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, ‘POST’);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_POSTFIELDS,
    “grant_type=authorization_code&code=”.$code.”&redirect_uri=http://localhost/connecti/associate/QuickBooks/paymentOptions”);

    The Redirect Uri in my developer account is :
    http://localhost/connecti/associate/QuickBooks/paymentOptions
    Do you whats is going on?

Leave a Reply

Your email address will not be published. Required fields are marked *