DisableCustomProviderModal.tsx71 lines · main
1import type { CustomOAuthProvider } from '@supabase/auth-js'
2import { useParams } from 'common'
3import { toast } from 'sonner'
4import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
5
6import { useProjectApiUrl } from '@/data/config/project-endpoint-query'
7import { useOAuthCustomProviderUpdateMutation } from '@/data/oauth-custom-providers/oauth-custom-provider-update-mutation'
8
9interface DisableCustomProviderModalProps {
10 visible: boolean
11 selectedProvider?: CustomOAuthProvider
12 onClose: () => void
13}
14
15export const DisableCustomProviderModal = ({
16 visible,
17 selectedProvider,
18 onClose,
19}: DisableCustomProviderModalProps) => {
20 const { ref: projectRef } = useParams()
21 const { hostEndpoint: clientEndpoint } = useProjectApiUrl({ projectRef })
22 const { mutate, isPending } = useOAuthCustomProviderUpdateMutation({
23 onSuccess: () => {
24 toast.success('Custom provider disabled')
25 onClose()
26 },
27 })
28
29 const onConfirmDisable = () => {
30 mutate({
31 identifier: selectedProvider?.identifier,
32 projectRef,
33 clientEndpoint,
34 enabled: false,
35 })
36 }
37
38 return (
39 <ConfirmationModal
40 variant="warning"
41 size="medium"
42 loading={isPending}
43 visible={visible}
44 title={
45 <>
46 Confirm to disable custom provider{' '}
47 <code className="text-sm">{selectedProvider?.name}</code>
48 </>
49 }
50 confirmLabel="Confirm disable"
51 confirmLabelLoading="Disabling..."
52 onCancel={() => onClose()}
53 onConfirm={() => onConfirmDisable()}
54 alert={{
55 title: 'Users will not be able to sign in with this provider',
56 description:
57 'You can re-enable it at any time. Existing sessions are not affected, but new sign-ins will fail until the provider is re-enabled.',
58 }}
59 >
60 <p className="text-sm">Before disabling this custom provider, consider:</p>
61 <ul className="space-y-2 mt-2 text-sm text-foreground-light">
62 <li className="list-disc ml-6">
63 Users authenticating with this provider will be unable to sign in
64 </li>
65 <li className="list-disc ml-6">
66 Applications relying on this provider should be updated or paused
67 </li>
68 </ul>
69 </ConfirmationModal>
70 )
71}