Facebook Provider Callback Error

[codal-Jamie]

Environment

System:
OS: macOS 12.2.1
CPU: (10) arm64 Apple M1 Pro
Memory: 1.97 GB / 32.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
Yarn: 1.22.17 - /opt/homebrew/bin/yarn
npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
Browsers:
Chrome: 99.0.4844.51
Safari: 15.3
npmPackages:
next: ^12.1.0 => 12.1.0
next-auth: ^4.0.1 => 4.2.1
react: ^17.0.1 => 17.0.2

Reproduction URL

N/A - Client Website

Describe the issue

Hi,

I'm running into some issues with setting up the Facebook provider. I'm using the same code as the example in the docs besides the environment variables.
FacebookProvider({ clientId: process.env.FACEBOOK_CLIENT_ID, clientSecret: process.env.FACEBOOK_CLIENT_SECRET, }),

I'm receiving this error in the console: id_token detected in the response, you must use client.callback() instead of client.oauthCallback()

Adding idToken as a param doesn't seem to solve the issue either.

The issue appears when clicking the Facebook button on the website before being redirected to Facebook.

How to reproduce

Set up next-auth using Facebook Example https://next-auth.js.org/providers/facebook and adding onClick={() => signIn('facebook', { callbackUrl:/, }) }. to a button.

Expected behavior

Facebook OAuth flow is completed and the user is able to log in to the website.

[srsajjad]

Facing same issue. Facebook login was working before (was using access_token), suddenly getting this message -
id_token detected in the response, you must use client.callback() instead of client.oauthCallback()

Now tried adding idToken: true. Getting this error -
CALLBACK_OAUTH_ERROR RPError: unexpected iss value, expected undefined, got: https://www.facebook.com/

[FadiAboMsalam]

@srsajjad same issue bro any ideas how to solve

[dz3n]

@srsajjad did you manage to fix this?

[srsajjad]

Now I am just using facebook js sdk along with CredentialsProvider.

From js sdk getting the access token. A package like react-facebook-login takes care of the sdk implementation. Then from FE you call signIn and send the token to CredentialsProvider

[alihussain575]

I have gotten the same issue but in production

[anees-asghar]

For anyone still facing this problem, set the issuer parameter in your auth provider settings. So, in the case of OP: issuer: "https://www.facebook.com/".

[gustavo-maurina]

I have the same problem, even though I found the culprit, I can't fix it.

The problem for me is, the application in question implements Facebook login on a website and iOS/Android apps. When the user logs in the iOS app, the authentication happens with OpenID, and this "sets" the user information to OpenID, and then, when I try to log in the website, it attemps to authenticate with Auth2, and the error you mentioned happens, since the id_token is not expected in the Auth2 format, but is there because of the previous OpenID login

[fabriciosautner]

Same problem here!

It was working and it stopped working.

[Miciurash]

This seems to be an issue across providers. Got the same issue with Salesforce.

[Miciurash]

@codal-Jamie - looks like this can be solved by removing the openid scope from the provider as per directus/directus#11048 (reply in thread)

[alihussain575]

Has someone found a solution to this?

[KristenWilde]

Yes! You can customize the next-auth FacebookProvider to use openid, like this:

    FacebookProvider({
        idToken: true,
        clientId: process.env.FACEBOOK_CLIENT_ID,
        clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
        authorization: {
          url: 'https://www.facebook.com/v11.0/dialog/oauth',
          params: {
            client_id: process.env.FACEBOOK_CLIENT_ID,
            scope: 'openid email',
            response_type: 'code',
          },
        },
        token: {
          url: 'https://graph.facebook.com/oauth/access_token',
          async request(context) {
            const url =
              `https://graph.facebook.com/oauth/access_token` +
              `?code=${context.params.code}` +
              `&client_id=${context.provider.clientId}` +
              `&redirect_uri=${context.provider.callbackUrl}` +
              `&client_secret=${context.provider.clientSecret}`;
            const response = await fetch(url);
            const tokens = await response.json();
            return { tokens };
          },
        },
      }),

I adapted this from https://stackoverflow.com/a/72772143/5759088
Now users can successfully log in with Facebook on both the website and the mobile app.

[Sai-Myo-Myat]

@KristenWilde Thanks, it's work for me.