How to implement Facebook OIDC login on Next.js with NextAuth?

Viewed 1152

I have implemented a regular (Auth2) Facebook login with NextAuth that works fine, but now, I have to switch to OIDC login and can't seem to implement it properly. I'm getting the following error message:

[token_endpoint must be configured on the issuer](https://next-auth.js.org/errors#callback_oauth_error token_endpoint must be configured on the issuer TypeError: token_endpoint must be configured on the issuer)

And this is my configuration on the Facebook Provider:

export default NextAuth({
  providers: [
    FacebookProvider({
      idToken: true,
      clientId: process.env.FBID,
      clientSecret: process.env.FBSECRET,
      wellKnown: "https://www.facebook.com/.well-known/openid-configuration",
      token: {
        url: "https://www.facebook.com/v11.0/dialog/oauth",
        params: { scope: "openid email public_profile" },
      },
    }),
  ],
  secret: "sunSAd2RkCajg2DLR3+5MfsinFwws8ZuzfPm2C+FXkc=",
});
1 Answers

Try this code

providers: [
  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",
      },
    },

    // wellKnown: "https://www.facebook.com/.well-known/openid-configuration/",
    token: {
      url: "https://graph.facebook.com/oauth/access_token",
      async request(context) {
        try {
          // request to https://graph.facebook.com/oauth/access_token?code=""&client_id=""&redirect_uri=""&client_secret=""
          const response = await axios.get(this.url, {
            params: {
              code: context.params.code,
              client_id: context.provider.clientId,
              redirect_uri: context.provider.callbackUrl,
              client_secret: context.provider.clientSecret,
            },
          });

          const tokens = response.data;
          return { tokens };
        } catch (error) {
          throw error;
        }
      },
    },
  }),
]
Related