ChangeEmailAddressForm() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Account/Preferences/ChangeEmailAddress.tsx lines 57–134

export const ChangeEmailAddressForm = ({ onClose }: { onClose: () => void }) => {
  const captchaRef = useRef<HCaptcha>(null)
  const [captchaToken, setCaptchaToken] = useState<string | null>(null)

  const FormSchema = z.object({ email: z.string().email() })
  const form = useForm<z.infer<typeof FormSchema>>({
    mode: 'onBlur',
    reValidateMode: 'onBlur',
    resolver: zodResolver(FormSchema),
    defaultValues: { email: '' },
  })

  const { mutate: updateEmail, isPending } = useEmailUpdateMutation({
    onSuccess: (_, vars) => {
      toast.success(
        `A confirmation email has been sent to ${vars.email}. Please confirm the change within 10 minutes.`
      )
      onClose()
    },
    onError: (error) => {
      toast.error(`Failed to update email: ${error.message}`)
      setCaptchaToken(null)
      captchaRef.current?.resetCaptcha()
    },
  })

  const onSubmit: SubmitHandler<z.infer<typeof FormSchema>> = async (values) => {
    let token = captchaToken
    if (!token) {
      const captchaResponse = await captchaRef.current?.execute({ async: true })
      token = captchaResponse?.response ?? null
    }

    updateEmail({ email: values.email, hcaptchaToken: token ?? null })
  }

  return (
    <Form_Shadcn_ {...form}>
      <form id="update-email-form" onSubmit={form.handleSubmit(onSubmit)}>
        <div className="self-center">
          <HCaptcha
            ref={captchaRef}
            sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITE_KEY!}
            size="invisible"
            onVerify={(token) => setCaptchaToken(token)}
            onExpire={() => setCaptchaToken(null)}
          />
        </div>

        <DialogSection>
          <FormField_Shadcn_
            name="email"
            control={form.control}
            render={({ field }) => (
              <FormItemLayout
                label="Provide a new email address"
                description="A confirmation email will be sent to the provided email address"
              >
                <FormControl_Shadcn_>
                  <Input_Shadcn_ {...field} placeholder="example@email.com" />
                </FormControl_Shadcn_>
              </FormItemLayout>
            )}
          />
        </DialogSection>

        <DialogFooter>
          <Button type="default" disabled={isPending} onClick={onClose}>
            Cancel
          </Button>
          <Button htmlType="submit" loading={isPending} disabled={isPending}>
            Confirm
          </Button>
        </DialogFooter>
      </form>
    </Form_Shadcn_>
  )
}