URL blocked: "Add all your app domains as valid OAuth redirect URIs" (with a Facebook Business App)

Question

Trying to get Facebook Login to work with my next-auth / nextjs app.

It all works when I select a Consumer App and it's in Development Mode.

However, I want to use features of the App Type Business App. Business Apps in Facebook don't have Development Mode / Production Mode. Instead, everything is managed via access levels. The first 2 types in this list is what I am referring to:

Now, when I try it out with a Consumer App, things work fine. It does not work for me however when I use a Business App. I get the following error:

URL blocked This redirect failed because the redirect URI is not white-listed in the app's client OAuth settings. Make sure that the client and web OAuth logins are on and add all your app domains as valid OAuth redirect URIs.

However, I cannot add the URL to valid OAuth redirect URIs, since Facebook tells me that localhost is automatically approved in development mode, so I doesn't allow me to add it. But this is weird, since there is no 'development mode' for business apps.

See these 2 images:

I found that a bit strange, so I deployed it to production and tested it - this works.

So Consumer App + localhost works, Business App + Localhost doesn't work, Business App + Production works.

Does anyone know what the problem is with localhost + business apps on facebook? I would really love to test things in development, and not have to push everything to production all the time.

Answer 1

The only thing I can think of is trying to use shaHmac512 to encrypt and sign your token, digesting with hex

I do remember having to do this for auth from localhost

and to gain access to "long-lived" access tokens for facebook business/facebook for developers

const accessToken = process.env.FACEBOOK_ACCESS_TOKEN ?? "";
const secretKey = process.env.FACEBOOK_SECRET ?? "";


function signHmacSha512(key: string, secret: string) {
  key = accessToken;
  secret = secretKey;
  const hmac = crypto.createHmac("sha512", key);
  const signed = hmac.update(Buffer.from(secret, "utf-8")).digest("hex");
  return signed;
}


console.log(JSON.stringify(signHmacSha512(accessToken, secretKey), null, 2));

no promises it will definitely work, I did this before they became meta in the past 9 months

might be worth checking out this thread though Facebook login message: "URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings."