Google provider Types are broken in v4

[crubier]

Description 🐜

In v4, if I use GoogleProvider, I have to cast it to OAuthConfig<Profile> , otherwise I get the following typing error:

Type 'OAuthConfig<GoogleProfile>' is not assignable to type 'Provider'.
  Type 'OAuthConfig<GoogleProfile>' is not assignable to type 'OAuthConfig<Profile>'.
    Property 'picture' is missing in type 'Profile' but required in type 'GoogleProfile'.ts(2322)
    
    
google.d.ts(5, 5): 'picture' is declared here.

(alias) GoogleProvider<GoogleProfile>(options: OAuthUserConfig<Profile>): OAuthConfig<GoogleProfile>
import GoogleProvider

See this commit which works around the problem on our repo
labelflow/labelflow@f794e5e

Is this a bug in your own project?

No

How to reproduce ☕️

Use v4 beta 1

Use GoogleProvider with typescript.

Example: Use this commit labelflow/labelflow@f794e5e

Screenshots / Logs 📽

Environment 🖥

 System:
    OS: macOS 11.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 77.31 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 3.0.1 - ~/.yarn/bin/yarn
    npm: 7.20.0 - ~/.nvm/versions/node/v14.15.4/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 93.1.29.77
    Chrome: 93.0.4577.63
    Edge: 93.0.961.38
    Firefox: 91.0.2
    Safari: 14.1.2
  npmPackages:
    react: 17.0.2 => 17.0.2 
    typescript: 4.3.5 => 4.3.5 

Contributing 🙌🏽

Yes, I am willing to help solve this bug in a PR

[balazsorban44]

Right! I forgot about that. I haven't quite finished it at the time. But here is a fix: #2682

Basically the profile callbacks first argument will be different for any providers, depending on the scopes set by the user, so we want to keep it overrideable.

[balazsorban44]

4.0.0-beta.2 has been released, including a fix for this!

If you are using the profile callback, you will be able to override the default type like this:

FacebookProvider({
  ...
  profile(profile: YourCustomProfileType) {
    return {
      name: "",
      email: "",
      picture: "",
      id: ""
    }
  }
})

This is probably only needed if you are adding scopes other than the default.