Files
supabase/apps/studio/data/support/support-email-verification-mutation.ts
barcofourie 85be44aab0 feat: adds verify support email page (#46331)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Feature. Adds a page to verify support email. This is part 4 of a 4 part
PR.

## What is the current behavior?


https://linear.app/supabase/issue/TOOLING-748/investigation-provide-support-option-for-users-unable-to-login

## What is the new behavior?

<img width="1505" height="853" alt="Screenshot 2026-05-25 at 10 19 24"
src="https://github.com/user-attachments/assets/98fb0c8a-ae25-46ba-b03a-f35861f6d136"
/>


## Additional context

Add any other context or screenshots.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added email verification flow. Users can verify addresses via
tokenized links and receive real-time feedback: loading state, success
confirmation, expired-link warning, and clear error messaging for
failures. A dedicated verification page and UI guide users through the
process.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46331?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-26 14:02:14 +02:00

58 lines
1.6 KiB
TypeScript

import { useMutation } from '@tanstack/react-query'
import { toast } from 'sonner'
import { constructHeaders, fetchHandler, handleError } from '@/data/fetchers'
import { API_URL } from '@/lib/constants'
import type { ResponseError, UseCustomMutationOptions } from '@/types'
export type VerifyEmailVariables = {
token: string
}
export type VerifyEmailData = {
result: 'success'
}
export async function verifyEmail({ token }: VerifyEmailVariables): Promise<VerifyEmailData> {
const baseUrl = API_URL?.replace('/platform', '')
const url = `${baseUrl}/platform/support/verify-email`
const headers = await constructHeaders({ 'Content-Type': 'application/json' })
const res = await fetchHandler(url, {
method: 'POST',
headers,
body: JSON.stringify({ token }),
})
if (!res.ok) {
const body = await res.json().catch(() => ({}))
handleError({ ...body, code: res.status })
}
return res.json() as Promise<VerifyEmailData>
}
export const useVerifyEmailMutation = ({
onSuccess,
onError,
...options
}: Omit<
UseCustomMutationOptions<VerifyEmailData, ResponseError, VerifyEmailVariables>,
'mutationFn'
> = {}) => {
return useMutation<VerifyEmailData, ResponseError, VerifyEmailVariables>({
mutationFn: (vars) => verifyEmail(vars),
async onSuccess(data, variables, context) {
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
if (onError === undefined) {
toast.error(`Failed to verify email: ${data.message}`)
} else {
onError(data, variables, context)
}
},
...options,
})
}