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.

You can try and add a domain name to your local test setup, so that you can access your project via `myproject.local` or something. Then it should allow you to save Valid OAuth Redirect URIs. But then you will probably also need working SSL, I think `localhost` is the only exception left. — CBroe, Feb 07 '22 at 07:21

score 0 · Answer 1 · answered Feb 06 '22 at 07:28

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."

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

1 Answers1