Facebook Provider - Request Higher quality image

[stevedaniels-traintime]

Question 💬

The image for OAuth providers (i.e. Facebook) seem to be very small (only 50px x 50px) in the session.user.image.

Is there any way to configure NextAuth to request a larger image from the OAuth providers, Facebook in particular?

Many thanks

[balazsorban44]

So if Facebook provides an API endpoint for that, you could do it with the profile callback in the Facebook Provider config:

https://next-auth.js.org/configuration/providers#using-a-custom-provider

cc @lluia

[stevedaniels-traintime]

@balazsorban44 Thanks for the tip 👍

Achieved via the following if it helps anybody:

Providers.Facebook({
    /**
     * Get custom profile information for facebook login
     * @param profile is the Facebook profile
     * @param tokens are the access tokens
     * @returns a next-auth user model with customised fields
     */
    async profile(profile, tokens) {
        // Profile id
        const { id } = profile
        // Access token
        const { accessToken } = tokens
        // Graph API URL to return a large picture
        const url = `https://graph.facebook.com/v10.0/${id}/picture?type=large&access_token=${accessToken}`
        // GET req via axios
        const response = await axios.get(url)
        // Get the url for the large picture 
        const { responseUrl } = response.request.res
        // Return customised next-auth user session
        return {
          id: profile.id,
          name: profile.name,
          email: profile.email,
          image: responseUrl
        }
      },
}),