Facebook provider authorization params

[gkielwasser]

Hi,

It seems I cannot add any parameters for the Facebook provider.

Concerning the Google provider i did the following and the prompt parameter is well append to the url.

providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      authorization: { params: { prompt: 'consent' } },
    }),
  ],

I tried the same for Facebook but the display parameter is not appended in the url.

providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET,
      authorization: { params: { display: 'popup' } }
    })
  ],

I'm using the following Nextauth version 4.0.0-beta.2

Thanks

[balazsorban44]

It might be that we simply don't support display: popup. When we created the authorization URL, we redirect the user to that URL.

But a quick google search gave me this:

You need to include the Facebook JS SDK for those popups to work correctly. Instructions on how to include the SDK are available in the developer documentation.

https://stackoverflow.com/a/10179342/5364135

so maybe start there and see if that helps.

[balazsorban44]

You can override the authorization property. Maybe these would help:

#2411 (comment)
https://next-auth.js.org/configuration/providers/oauth-provider#options

[gkielwasser]

Sorry I cannot follow you. Reading both of your 2 links, what I state in my first comment looks like the way I should override the authorization, isn't it ?

import FacebookProvider  from "next-auth/providers/facebook";

export default function NextAuth({
  ...,
  providers: [
     FacebookProvider({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET,
      authorization: { params: { display: 'popup' } }
    })
  ]
})

I would say there is something wrong with the merge function. If we try to override an authorization that is a string with an authorization that is an object, it won't assign the user options.

To clarify what happen during the merge:
the given input "authorization" : "anAuthorizationUrlString" woudn't be overrided with "authorization": { params: { } }.
The merge output will still be "authorization" : "anAuthorizationUrlString"

[balazsorban44]

I've been going around thinking of this why I did not understand your problem. I finally think I see the issue, and it comes from the following place:

next-auth/src/lib/merge.ts

Line 13 in 5066726

if (isObject(target) && isObject(source)) {

We use a merge function to merge the user's config options with the default one, and it only does merging if both the target and source are objects. We should normalize the incoming configs before merging to avoid this problem.

I came across this yesterday myself when I wanted to override the SpotifyProvider, which had the same string formatted default authorization:

next-auth/src/providers/spotify.js

Line 8 in 5066726

"https://accounts.spotify.com/authorize?scope=user-read-email",

I'm sorry that it took so long to realize the problem here 😅

I think https://github.com/nextauthjs/next-auth/blob/beta/src/server/lib/providers.ts is a good place to parse strings to objects before merging. Will open a PR soon.

[balazsorban44]

@gkielwasser I am addressing this in #2842!

If you want to try it out, you can install it like so npm i [email protected]

UPDATE: It's merged, and will be available in the next beta release, no ETA yet.

[gkielwasser]

@balazsorban44 Yep it is exactly the part of code I suspected :)
Thank you very much for that fix, I will test it as soon as possible!