When implementing the WhatsApp embedded signup flow, I can redirect to the signup flow an retrieve an access code. When I want to exchange the access code for an access code, I get the following error message:

OAuthException: Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request

My code:

const fbAsyncInit = function () {
    // JavaScript SDK configuration and setup
    FB.init({
        appId:    '<APP_ID>', // Meta App ID
        cookie:   true, // enable cookies
        xfbml:    true, // parse social plugins on this page
        version:  'v18.0' //Graph API version
    });
};

fbAsyncInit();

function launchWhatsAppSignup() {
    // Launch Facebook login
    FB.login(function (response) {
        if (response.authResponse) {
            const code = response.authResponse.code;
            //Use this token to call the debug_token API and get the shared WABA's ID
            resource.storeCredentials({token: code})
                .then((response) => {
                    router.push({name: 'integration.whatsapp.select-phone-number'})
                })
                .catch(setError);
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    }, {
        config_id: '<CONFIG_ID>', // configuration ID obtained in the previous step goes here
        response_type: 'code',     // must be set to 'code' for System User access token
        override_default_response_type: true,
        extras: {
            setup: {
                // Prefilled data can go here
            }
        }
    });
}

When I want to exchange the code for an access token using the following code:

$response = Http::get('.0/oauth/access_token', [
        'client_id' => env('FACEBOOK_CLIENT_ID'),
        'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
        'code' => $this->code,
]);

I get the following error:

Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request

I used my localhost to test this out, I also did this on a live environment with a URL I specified in the Facebook login settings, but without any luck.

Any Idea what I'm doing wrong?

When implementing the WhatsApp embedded signup flow, I can redirect to the signup flow an retrieve an access code. When I want to exchange the access code for an access code, I get the following error message:

OAuthException: Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request

My code:

const fbAsyncInit = function () {
    // JavaScript SDK configuration and setup
    FB.init({
        appId:    '<APP_ID>', // Meta App ID
        cookie:   true, // enable cookies
        xfbml:    true, // parse social plugins on this page
        version:  'v18.0' //Graph API version
    });
};

fbAsyncInit();

function launchWhatsAppSignup() {
    // Launch Facebook login
    FB.login(function (response) {
        if (response.authResponse) {
            const code = response.authResponse.code;
            //Use this token to call the debug_token API and get the shared WABA's ID
            resource.storeCredentials({token: code})
                .then((response) => {
                    router.push({name: 'integration.whatsapp.select-phone-number'})
                })
                .catch(setError);
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    }, {
        config_id: '<CONFIG_ID>', // configuration ID obtained in the previous step goes here
        response_type: 'code',     // must be set to 'code' for System User access token
        override_default_response_type: true,
        extras: {
            setup: {
                // Prefilled data can go here
            }
        }
    });
}

When I want to exchange the code for an access token using the following code:

$response = Http::get('https://graph.facebook./v18.0/oauth/access_token', [
        'client_id' => env('FACEBOOK_CLIENT_ID'),
        'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
        'code' => $this->code,
]);

I get the following error:

Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request

I used my localhost to test this out, I also did this on a live environment with a URL I specified in the Facebook login settings, but without any luck.

Any Idea what I'm doing wrong?

• javascript
• whatsapp-cloud-api

Share Improve this question Follow edited Nov 27, 2023 at 19:41 TylerH 21.1k7979 gold badges7979 silver badges114114 bronze badges asked Nov 27, 2023 at 8:52 job vinkjob vink 15122 silver badges1212 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

zigzags answer is correct, it has to do with the redirect_uri.. I was able to overe this issue using the manual-flow. Basically you have to create the oauth url manually and open it, the following code worked for me:

function startEmbeddedSignupFlowManualUrl () {
  // Facebook's OAuth 2.0 endpoint for requesting an access token
  const oauth2Endpoint = 'https://www.facebook./v18.0/dialog/oauth'

  // Parameters to pass to the OAuth 2.0 endpoint.
  const params = {
    client_id: '<your_client_id>',
    redirect_uri: '<your_redirect_uri>',
    response_type: 'code',
    config_id: '<your_fb_login_config_id>',
    state: 'pass-through value'
  }

  // Construct the OAuth URL with parameters
  const oauthURL = `${oauth2Endpoint}?${new URLSearchParams(params).toString()}`

  // Open a new window for the OAuth flow
  window.location.replace(oauthURL)
}

Hope this helps!

The problem is that that despite FB's docs being unclear about it, redirect_uri is a required parameter on your call to https://graph.facebook./v18.0/oauth/access_token, and like the error says it must match the redirect_uri value on the previous call to start the oauth/dialog endpoint.

The problem with this that you and I both have is that we're using the FB JS SDK and the FB.login(...) method to authenticate/login. This process sets a redirect_uri (that we don't have access to and cannot override) within the popup.

I'm not sure there is a solution at this time. Facebook provides a broken JS SDK and its docs are misleading.

UPDATE

My org had to upgrade the whole FB Login App to FB Login for Business within the Meta App Dashboard. At that point redirect_uri was no longer required.

Still don't know if there's any way around this without doing that upgrade.

So the fix for me was to set the redirecturi to "". Could potentially be removed entirely I never tried this. But as mentioned by zigzag there is no way to set a redirect uri in the client sdk so the assumption is that it was an emptry string or there simply isn't one.

Seems There is no changes are required in you code until you fix this error. But there is definetly some configurations are remaining to do on your developer dashboard of facebook

Follow:

1.Go to Developer dashboard page / Go to Facebook Login for Business (Sidebar) / Settings

2.Make Sure OAuth Serrings are Enabled to YES

3.Add your live app url in below fields on the page

• Redirect URI Validator

• Allowed Domains for the JavaScript SDK

• Valid OAuth Redirect URIs

After this all, the feature will work on only https url (only in live app)

You must use redirect_uri when call API get access token from code.

Please use redirect_uri as same as redirect_uri use with popup login facebook.

You can view setting redirect_uri in app facebook developer, choose the redirect_uri you are using

• Facebook login for business => Settings => Valid OAuth Redirect URIs

var request = require('request');
var options = {
  'method': 'GET',
  'url': 'https://graph.facebook./<VER>/oauth/access_token?client_id=<CLIENT_ID>&redirect_uri=<REDIRECT_URI>&client_secret<CLIENT_SECRET>&code=<CODE>',
  'headers': {
    'Cookie': 'ps_l=0; ps_n=0'
  }
};
request(options, function (error, response) {
  if (error) throw new Error(error);
  console.log(response.body);
});

It's working for me