Skip to content

Commit d505226

Browse files
author
Andrew Smith
authored
Add providerScopes property for setting social auth scopes (#166)
1 parent a2aa401 commit d505226

File tree

13 files changed

+75
-12
lines changed

13 files changed

+75
-12
lines changed

‎.changeset/selfish-humans-wash.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@supabase/auth-ui-react': patch
3+
'@supabase/auth-ui-shared': patch
4+
'@supabase/auth-ui-solid': patch
5+
'@supabase/auth-ui-svelte': patch
6+
---
7+
8+
Add providerScopes property for setting social auth scopes

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ yarn-error.log*
2525
.pnpm-debug.log*
2626

2727
# local env files
28+
.env
2829
.env.local
2930
.env.development.local
3031
.env.test.local

‎examples/react/.env.example

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
VITE_SUPABASE_URL=http://localhost:54321
2+
VITE_SUPABASE_ANON_KEY=

‎examples/react/src/App.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import styles from './App.module.css'
22
import { createClient } from '@supabase/supabase-js'
33
import { SocialLayout, ThemeSupa, ViewType } from '@supabase/auth-ui-shared'
44
import { Auth } from '@supabase/auth-ui-react'
5-
import { useEffect, useState } from 'react'
5+
import { useState } from 'react'
66
import ToggleButton from './ToggleButton'
77
import MenuIcon from './MenuIcon'
88

99
const supabase = createClient(
10-
'https://fmlovqieocwjaghmavax.supabase.co',
11-
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZtbG92cWllb2N3amFnaG1hdmF4Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2Njc1MTE3NzYsImV4cCI6MTk4MzA4Nzc3Nn0.gdJ0CmtGcauVXXD1TY5GtHPePPoC2IEP2_vYQLjYnIg'
10+
import.meta.env.VITE_SUPABASE_URL,
11+
import.meta.env.VITE_SUPABASE_ANON_KEY
1212
)
1313

1414
const classes: { [key: string]: string } = {

‎examples/solidjs/.env.example

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
VITE_SUPABASE_URL=http://localhost:54321
2+
VITE_SUPABASE_ANON_KEY=

‎examples/solidjs/src/App.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import { Auth } from '@supabase/auth-ui-solid'
1111
import { ThemeSupa } from '@supabase/auth-ui-shared'
1212

1313
const supabase = createClient(
14-
'https://fmlovqieocwjaghmavax.supabase.co',
15-
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZtbG92cWllb2N3amFnaG1hdmF4Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2Njc1MTE3NzYsImV4cCI6MTk4MzA4Nzc3Nn0.gdJ0CmtGcauVXXD1TY5GtHPePPoC2IEP2_vYQLjYnIg'
14+
import.meta.env.VITE_SUPABASE_URL,
15+
import.meta.env.VITE_SUPABASE_ANON_KEY
1616
)
1717

1818
const classes: { [key: string]: string } = {

‎packages/react/src/components/Auth/Auth.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ function Auth({
1616
supabaseClient,
1717
socialLayout = 'vertical',
1818
providers,
19+
providerScopes,
20+
queryParams,
1921
view = 'sign_in',
2022
redirectTo,
2123
onlyThirdPartyProviders = false,
@@ -80,6 +82,8 @@ function Auth({
8082
appearance={appearance}
8183
supabaseClient={supabaseClient}
8284
providers={providers}
85+
providerScopes={providerScopes}
86+
queryParams={queryParams}
8387
socialLayout={socialLayout}
8488
redirectTo={redirectTo}
8589
onlyThirdPartyProviders={onlyThirdPartyProviders}

‎packages/react/src/components/Auth/interfaces/SocialAuth.tsx

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import { Provider, SupabaseClient } from '@supabase/supabase-js'
22
import { useState } from 'react'
3-
import { I18nVariables, SocialLayout, template } from '@supabase/auth-ui-shared'
3+
import {
4+
I18nVariables,
5+
ProviderScopes,
6+
SocialLayout,
7+
template,
8+
} from '@supabase/auth-ui-shared'
49
import { Appearance } from '../../../types'
510
import { Button, Container, Divider } from './../../UI/index.js'
611
import * as SocialIcons from './../Icons.js'
@@ -9,6 +14,8 @@ interface SocialAuthProps {
914
supabaseClient: SupabaseClient
1015
socialLayout?: SocialLayout
1116
providers?: Provider[]
17+
providerScopes?: Partial<ProviderScopes>
18+
queryParams?: { [key: string]: string }
1219
redirectTo?: RedirectTo
1320
onlyThirdPartyProviders?: boolean
1421
view?: 'sign_in' | 'sign_up'
@@ -22,6 +29,8 @@ function SocialAuth({
2229
supabaseClient,
2330
socialLayout = 'vertical',
2431
providers = ['github', 'google', 'azure'],
32+
providerScopes,
33+
queryParams,
2534
redirectTo,
2635
onlyThirdPartyProviders = true,
2736
view = 'sign_in',
@@ -37,7 +46,11 @@ function SocialAuth({
3746
setLoading(true)
3847
const { error } = await supabaseClient.auth.signInWithOAuth({
3948
provider,
40-
options: { redirectTo },
49+
options: {
50+
redirectTo,
51+
scopes: providerScopes?.[provider],
52+
queryParams,
53+
},
4154
})
4255
if (error) setError(error.message)
4356
setLoading(false)

‎packages/shared/src/types.ts

+6
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,16 @@ export interface BaseAppearance {
6969
}
7070
}
7171

72+
export type ProviderScopes = {
73+
[key in Partial<Provider>]: string
74+
}
75+
7276
export interface BaseAuth {
7377
supabaseClient: SupabaseClient
7478
socialLayout?: SocialLayout
7579
providers?: Provider[]
80+
providerScopes?: Partial<ProviderScopes>
81+
queryParams?: { [key: string]: string }
7682
view?: ViewType
7783
redirectTo?: RedirectTo
7884
onlyThirdPartyProviders?: boolean

‎packages/solid/src/components/Auth/Auth.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,8 @@ function Auth(props: AuthProps): JSX.Element | null {
156156
appearance={mergedProps().appearance}
157157
supabaseClient={mergedProps().supabaseClient}
158158
providers={mergedProps().providers}
159+
providerScopes={mergedProps().providerScopes}
160+
queryParams={mergedProps().queryParams}
159161
socialLayout={mergedProps().socialLayout as SocialLayout}
160162
redirectTo={mergedProps().redirectTo}
161163
onlyThirdPartyProviders={mergedProps().onlyThirdPartyProviders}

‎packages/solid/src/components/Auth/interfaces/SocialAuth.tsx

+13-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import { Provider, SupabaseClient } from '@supabase/supabase-js'
22
import { createSignal, For, Show } from 'solid-js'
3-
import { I18nVariables, SocialLayout, template } from '@supabase/auth-ui-shared'
3+
import {
4+
I18nVariables,
5+
ProviderScopes,
6+
SocialLayout,
7+
template,
8+
} from '@supabase/auth-ui-shared'
49
import { Appearance } from '../../../types'
510
import { Button, Container, Divider } from '../../UI'
611
import * as SocialIcons from '../Icons'
@@ -9,6 +14,8 @@ interface SocialAuthProps {
914
supabaseClient: SupabaseClient
1015
socialLayout: SocialLayout | string
1116
providers?: Provider[]
17+
providerScopes?: Partial<ProviderScopes>
18+
queryParams?: { [key: string]: string }
1219
redirectTo: RedirectTo
1320
onlyThirdPartyProviders: boolean
1421
view: 'sign_in' | 'sign_up'
@@ -26,7 +33,11 @@ function SocialAuth(props: SocialAuthProps) {
2633
setLoading(true)
2734
const { error } = await props.supabaseClient.auth.signInWithOAuth({
2835
provider,
29-
options: { redirectTo: props.redirectTo },
36+
options: {
37+
redirectTo: props.redirectTo,
38+
scopes: props.providerScopes?.[provider],
39+
queryParams: props.queryParams,
40+
},
3041
})
3142
if (error) setError(error.message)
3243
setLoading(false)

‎packages/svelte/src/lib/Auth/Auth.svelte

+6-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
VIEWS,
88
en,
99
type SocialLayout,
10-
type ViewType
10+
type ViewType,
11+
type ProviderScopes
1112
} from '@supabase/auth-ui-shared';
1213
import type { Appearance } from '$lib/types';
1314
import EmailAuth from './interfaces/EmailAuth.svelte';
@@ -20,6 +21,8 @@
2021
export let supabaseClient: SupabaseClient;
2122
export let socialLayout: SocialLayout = 'vertical';
2223
export let providers: Provider[] = [];
24+
export let providerScopes: Partial<ProviderScopes> | undefined = undefined;
25+
export let queryParams: { [key: string]: string } | undefined = undefined;
2326
export let view: ViewType = 'sign_in';
2427
export let redirectTo: string | undefined = undefined;
2528
export let onlyThirdPartyProviders = false;
@@ -62,6 +65,8 @@
6265
{appearance}
6366
{supabaseClient}
6467
{providers}
68+
{providerScopes}
69+
{queryParams}
6570
{socialLayout}
6671
{redirectTo}
6772
{onlyThirdPartyProviders}

‎packages/svelte/src/lib/Auth/interfaces/SocialAuth.svelte

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<script lang="ts">
22
import type { SupabaseClient, Provider } from '@supabase/supabase-js';
3-
import { template, type I18nVariables, type SocialLayout } from '@supabase/auth-ui-shared';
3+
import {
4+
template,
5+
type I18nVariables,
6+
type SocialLayout,
7+
type ProviderScopes
8+
} from '@supabase/auth-ui-shared';
49
import type { Appearance } from '$lib/types';
510
import Button from '$lib/UI/Button.svelte';
611
import Container from '$lib/UI/Container.svelte';
@@ -13,6 +18,8 @@
1318
export let onlyThirdPartyProviders: boolean;
1419
export let i18n: I18nVariables;
1520
export let providers: Provider[] = [];
21+
export let providerScopes: Partial<ProviderScopes> | undefined;
22+
export let queryParams: { [key: string]: string } | undefined;
1623
export let appearance: Appearance;
1724
1825
let error = '';
@@ -26,7 +33,9 @@
2633
const { error: providerSigninError } = await supabaseClient.auth.signInWithOAuth({
2734
provider,
2835
options: {
29-
redirectTo
36+
redirectTo,
37+
scopes: providerScopes?.[provider],
38+
queryParams
3039
}
3140
});
3241
if (providerSigninError) error = providerSigninError.message;

0 commit comments

Comments
 (0)