Add `scopes` option to `Auth` component in Auth UI

[johnzanussi]

Feature request

Add ability to pass scopes option to Auth component for third-party providers

Is your feature request related to a problem? Please describe.

When users sign in via a third-party provider I'd like to request additional scopes.

Describe the solution you'd like

According to the docs, the supabase.auth.signInWithOAuth function can take an optional options object with redirectTo and scopes properties.

Currently the <Auth> component only accepts the redirectTo property.

I'm proposing adding a providerScopes (or similar) propery to the <Auth> component.

<Auth
    supabaseClient={supabase}
    appearance={{ theme: ThemeSupa }}
    theme="dark"
    providers={['google']}
    providerScopes={['https://www.googleapis.com/auth/youtube.readonly']}
/>

An update to Auth.tsx and SocialAuth.tsx would need to happen to accept the prop and pass it along to the handleProviderSignIn function.

From

...
const handleProviderSignIn = async (provider: Provider) => {
  setLoading(true)
  const { error } = await supabaseClient.auth.signInWithOAuth({
    provider,
    options: { redirectTo },
})
...

To

...
const handleProviderSignIn = async (provider: Provider) => {
  setLoading(true)
  const { error } = await supabaseClient.auth.signInWithOAuth({
    provider,
    options: {
      redirectTo,
      scopes: providerScopes,
    },
})
...

Describe alternatives you've considered

The only alternative here is to recreate the <Auth> component locally and add the missing functionality.

Additional context

I'm happy to make the changes and open a PR for this but the contributing guidelines mentioned that a feature request should be first.

[aggmoulik]

Hey @MildTomato I would love to work on this issue.

[aychtang]

I also have a need for this in my app, seems like someone's asking about it in https://github.com/supabase/auth-ui/issues/82 as well.

I've uploaded my own package based on the suggested approach at https://github.com/aychtang/auth-ui and can confirm it works. It would be great if it could be approved for someone to work on getting this into the main repository @silentworks.

I can help merge in from my fork or happy for @johnzanussi or @aggmoulik to take it as well.

[mansueli]

@aychtang can you/do you want to submit a PR for this?

[aavetis]

would be awesome!

[avgupta456]

Also interested in this. Any updates?

[silentworks]

Not yet, but this is on my radar. Also PRs welcomed but do note it should cover all the frameworks we currently support in the Auth UI.

[silentworks]

This should be in the next release which I will get out today. You should be able to configure provider scopes for multiple providers since not all providers use the same scope naming and you can have multiple providers at the same time with this component. Also note that the providerScopes are optional, so you can set scopes for github while not setting any for google. Example below:

<Auth
  supabaseClient={supabase}
  providers={['github', 'google']}
  providerScopes={{
    github: 'read:user'
  }}
/>

I've also added the queryParams property for those using google or workos as a provider. Since in order to get a refresh_token from google you much provide some extra settings in queryParams.

<Auth 
  supabaseClient={supabase}
  providers={['github', 'google']}
  queryParams={{
    access_type: 'offline',
    prompt: 'consent'
  }}
/>