fix(react-apollo): add verify email button (#2782)
### **User description** fixes https://github.com/nhost/nhost/issues/2741 ___ ### **PR Type** Bug fix, Enhancement, Tests ___ ### **Description** - Added a `requestType` parameter to the `verifyEmail` function to handle different types of email verification requests. - Updated the email change test to include the `requestType` parameter. - Replaced auto-redirect in the `VerifyPage` component with a verification button and added error handling with notifications. - Updated dependencies in `nhost.toml` to newer versions. - Added a changeset file to document the email verification button update. ___ ### **Changes walkthrough** 📝 <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Tests</strong></td><td><table> <tr> <td> <details> <summary><strong>change-email.test.ts</strong><dd><code>Update email change test with request type parameter</code> </dd></summary> <hr> examples/react-apollo/e2e/authenticated/change-email.test.ts - Added `requestType` parameter to `verifyEmail` function call. </details> </td> <td><a href="https://github.com/nhost/nhost/pull/2782/files#diff-5bf556a7e19bcc9932603bd52dd41929f1cabd65924ea88ad4123efcd9daad13">+2/-1</a> </td> </tr> </table></td></tr><tr><td><strong>Enhancement</strong></td><td><table> <tr> <td> <details> <summary><strong>utils.ts</strong><dd><code>Enhance email verification utility with request type</code> </dd></summary> <hr> examples/react-apollo/e2e/utils.ts <li>Added <code>requestType</code> parameter to <code>verifyEmail</code> function.<br> <li> Implemented conditional logic based on <code>requestType</code>.<br> <li> Added button click for verification.<br> </details> </td> <td><a href="https://github.com/nhost/nhost/pull/2782/files#diff-3bdd9b675af03a22eb7e8077183e8179504a9c3a085980da4938fd0c5e4b8907">+13/-7</a> </td> </tr> <tr> <td> <details> <summary><strong>Verify.tsx</strong><dd><code>Add verification button and error handling in VerifyPage</code> </dd></summary> <hr> examples/react-apollo/src/Verify.tsx <li>Replaced auto-redirect with a verification button.<br> <li> Added error handling with notifications.<br> <li> Updated UI components for verification.<br> </details> </td> <td><a href="https://github.com/nhost/nhost/pull/2782/files#diff-b55b7fe9f71f1b4f1e1364b5ea5079241c87fe57f4a7c39d01039b43de725d7f">+21/-14</a> </td> </tr> </table></td></tr><tr><td><strong>Documentation</strong></td><td><table> <tr> <td> <details> <summary><strong>gentle-brooms-flash.md</strong><dd><code>Add changeset for email verification button update</code> </dd></summary> <hr> .changeset/gentle-brooms-flash.md - Added changeset for email verification button update. </details> </td> <td><a href="https://github.com/nhost/nhost/pull/2782/files#diff-6604024b1192b02c32aa85737b31d5d5d517701c1b1de26df95892df36d38893">+5/-0</a> </td> </tr> </table></td></tr><tr><td><strong>Dependencies</strong></td><td><table> <tr> <td> <details> <summary><strong>nhost.toml</strong><dd><code>Update dependencies in nhost.toml</code> </dd></summary> <hr> examples/react-apollo/nhost/nhost.toml - Updated Hasura, Auth, and Postgres versions. </details> </td> <td><a href="https://github.com/nhost/nhost/pull/2782/files#diff-268d6c8dddd6990d60d62c1c923955c4e0e7549a80f0f5856192f889378416a0">+3/-3</a> </td> </tr> </table></td></tr></tr></tbody></table> ___ > 💡 **PR-Agent usage**: >Comment `/help` on the PR to get a list of all available PR-Agent tools and their descriptions
This commit is contained in:
Hassan Ben Jobrane
committed by
GitHub
GitHub
parent
807b8c049a
commit
e3f0732108
5
.changeset/gentle-brooms-flash.md
Normal file
5
.changeset/gentle-brooms-flash.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@nhost-examples/react-apollo': patch
|
||||
---
|
||||
|
||||
fix: add verify email button instead of doing an auto-redirect
|
||||
@@ -31,7 +31,8 @@ test('should be able to change email', async ({ page, browser }) => {
|
||||
page: mailhogPage,
|
||||
email: newEmail,
|
||||
context: mailhogPage.context(),
|
||||
linkText: /change email/i
|
||||
linkText: /change email/i,
|
||||
requestType: 'email-confirm-change'
|
||||
})
|
||||
|
||||
await expect(updatedEmailPage.getByText(/profile page/i)).toBeVisible()
|
||||
|
||||
@@ -158,8 +158,8 @@ export async function resetPassword({
|
||||
.click()
|
||||
|
||||
const authenticatedPage = await authenticatedPagePromise
|
||||
await authenticatedPage.getByRole('button', { name: /Verify/i }).click()
|
||||
await authenticatedPage.waitForLoadState()
|
||||
|
||||
return authenticatedPage
|
||||
}
|
||||
|
||||
@@ -177,25 +177,31 @@ export async function verifyEmail({
|
||||
email,
|
||||
page,
|
||||
context,
|
||||
linkText = /verify email/i
|
||||
linkText = /verify email/i,
|
||||
requestType
|
||||
}: {
|
||||
email: string
|
||||
page: Page
|
||||
context: BrowserContext
|
||||
linkText?: string | RegExp
|
||||
requestType?: 'email-confirm-change' | 'email-verify' | 'password-reset' | 'signin-passwordless'
|
||||
}) {
|
||||
await page.goto(mailhogURL)
|
||||
await page.locator('.messages > .msglist-message', { hasText: email }).nth(0).click()
|
||||
|
||||
// Based on: https://playwright.dev/docs/pages#handling-new-pages
|
||||
const authenticatedPagePromise = context.waitForEvent('page')
|
||||
|
||||
const verifyEmailPagePromise = context.waitForEvent('page')
|
||||
await page.frameLocator('#preview-html').getByRole('link', { name: linkText }).click()
|
||||
const verifyEmailPage = await verifyEmailPagePromise
|
||||
await verifyEmailPage.waitForLoadState()
|
||||
|
||||
const authenticatedPage = await authenticatedPagePromise
|
||||
await authenticatedPage.waitForLoadState()
|
||||
if (requestType === 'email-confirm-change') {
|
||||
return verifyEmailPage
|
||||
}
|
||||
|
||||
return authenticatedPage
|
||||
await verifyEmailPage.getByRole('button', { name: /Verify/i }).click()
|
||||
await verifyEmailPage.waitForLoadState()
|
||||
return verifyEmailPage
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
[global]
|
||||
|
||||
[hasura]
|
||||
version = 'v2.33.4-ce'
|
||||
version = 'v2.38.0-ce'
|
||||
adminSecret = '{{ secrets.HASURA_GRAPHQL_ADMIN_SECRET }}'
|
||||
webhookSecret = '{{ secrets.NHOST_WEBHOOK_SECRET }}'
|
||||
|
||||
@@ -29,7 +29,7 @@ httpPoolSize = 100
|
||||
version = 18
|
||||
|
||||
[auth]
|
||||
version = '0.28.0-beta002'
|
||||
version = '0.32.0'
|
||||
|
||||
[auth.elevatedPrivileges]
|
||||
mode = 'required'
|
||||
@@ -154,7 +154,7 @@ enabled = true
|
||||
issuer = 'nhost'
|
||||
|
||||
[postgres]
|
||||
version = '14.6-20240129-1'
|
||||
version = '14.11-20240515-1'
|
||||
|
||||
[provider]
|
||||
|
||||
|
||||
@@ -1,32 +1,39 @@
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Button, Card, Container, Stack, Text } from '@mantine/core'
|
||||
import { showNotification } from '@mantine/notifications'
|
||||
import { useNhostClient } from '@nhost/react'
|
||||
import { Container } from '@mantine/core'
|
||||
import { FaEnvelope } from 'react-icons/fa'
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
|
||||
const VerifyPage: React.FC = () => {
|
||||
const nhost = useNhostClient()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [searchParams] = useSearchParams()
|
||||
|
||||
useEffect(() => {
|
||||
const redirectToVerificationLink = () => {
|
||||
const ticket = searchParams.get('ticket')
|
||||
const redirectTo = searchParams.get('redirectTo')
|
||||
const type = searchParams.get('type')
|
||||
const redirectTo = searchParams.get('redirectTo')
|
||||
|
||||
if (ticket && redirectTo && type) {
|
||||
if (ticket && type && redirectTo) {
|
||||
window.location.href = `${nhost.auth.url}/verify?ticket=${ticket}&type=${type}&redirectTo=${redirectTo}`
|
||||
} else {
|
||||
showNotification({
|
||||
color: 'red',
|
||||
title: 'Error',
|
||||
message: 'An error occured while verifying your account'
|
||||
})
|
||||
}
|
||||
|
||||
setLoading(false)
|
||||
}, [searchParams, nhost?.auth?.url])
|
||||
|
||||
if (loading) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<span>Failed to authenticate with magick link</span>
|
||||
<Card shadow="sm" p="lg" radius="md" withBorder>
|
||||
<Stack align="center">
|
||||
<Text>Please verify your account by clicking the link below.</Text>
|
||||
<Button leftIcon={<FaEnvelope size={14} />} onClick={redirectToVerificationLink}>
|
||||
Verify
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user