The provided Facebook login JS SDK works with User Login (User Access Token aka UAT) flow via “Facebook Login for Business” but not for the Business Login (System-user Access Token aka SUAT).
Facebook Login for Business configuration
We currently use the User Access Token login flow since it successfully opens the Facebook login popup, and returns the access token after successfully authenticating and authorizing. However, we want to use the System-user Access Token to use a non-expiring token and also attach the token to Business as opposed to the user.
I tried following below documentation but without success.
Facebook Login for Business – Invoke a Login Dialog
This code is used in an Angular application, but I was able to use the SDK without issue.
Working User (UAT) Flow
This flow uses the UAT configuration ID. This uses your FB profile connected to a business account. Login Dialog works fine, and I can finish the flow and retrieve the necessary token in order to exchange it with our back-end server.
<!-- FB SDK in index.html -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
...
FB.init({
appId: [Facebook App ID],
version: 'v15.0',
cookie: true,
});
...
FB.login(async (response: StatusResponse) => {
// login logic goes here...
}, {
config_id: [User Login config ID],
auth_type: 'reauthenticate' // "rerequest" & "reauthorize" works as well...
}
Non-working Business (SUAT) Flow
However, when we attempt to use the SUAT configuration ID, the login breaks two different way. The first example shows the error message after successfully authenticating with Facebook.
FB.login(async (response: StatusResponse) => {
// login logic goes here...
}, {
config_id: [Business Login config ID],
auth_type: 'reauthenticate' // "rerequest" & "reauthorize" will also give the same error page.
}
Facebook – “It looks like this app isn’t available”.
Then, when we tried using auth_type code as mentioned in their documentation, the FB login popup breaks completely with a different message. Even though auth_type code is specifically mentioned in their specific documentation, I found it weird that the Definitely Typed Repo for Facebook JS SDK did not have code as part of their choices. So I manually added ‘code’ to the auth_type options.
FB.login(async (response: StatusResponse) => {
// login logic goes here...
}, {
config_id: [Business Login config ID],
auth_type: 'code',
override_default_response_type: true,
}
Facebook – “Sorry, something went wrong.”
All scopes defined in both configuration has been approved for advanced permissions. I’ve tried many different configurations of the above settings (API versions, auth_types, etc.) but only the UAT configurations seems to work for the FB JS SDK.
I’ve noticed there’s been a lot more search results regarding this issue in the past few months. We’ve been dealing with this issue since January 2023. If anyone has a workaround or suggestions, it would be greatly appreciated!