<MagicLinkVerification/> component
<MagicLinkVerification /> resolves the email-link callback step. It reads the callback parameters, verifies the link with the backend, and then moves the user on to the final redirect or back into sign-in when the link is no longer valid.
Usage
The following example shows a basic usage of <MagicLinkVerification />.
import { MagicLinkVerification } from '@wacht/nextjs';export default function MagicLinkVerificationUsage() { return ( <> <MagicLinkVerification /> </> );}Callback params
The component reads
token, attempt, and optional redirect_uri from the current URL. If either token or attempt is missing, the component treats the link as malformed and stops there. The callback parameters are parsed once when the component mounts.Verification
The hook verifies the token and attempt with the backend. If the backend accepts the link, the component marks the flow as successful and prepares the redirect. The verification result is tied to the current attempt, so old links do not continue a different flow.
Redirect and retry
After verification, the component resolves the final redirect using
redirect_uri, then the deployment sign-in redirect, then the deployment frontend host. If the link is invalid or has already been used, the component shows the error state and lets the user try signing in again. In staging, the redirect keeps __dev_session__ attached so the session survives the round trip.Examples
Verification route
export default function MagicLinkPage() { return <MagicLinkVerification />;}