Build a custom flow for handling email links

'use client'  import * as React from 'react' import { useSignUp } from '@clerk/nextjs'  export default function SignInPage() {  const [emailAddress, setEmailAddress] = React.useState('')  const [verified, setVerified] = React.useState(false)  const [verifying, setVerifying] = React.useState(false)  const [error, setError] = React.useState('')  const { signUp, isLoaded } = useSignUp()   if (!isLoaded) return null   const { startEmailLinkFlow } = signUp.createEmailLinkFlow()   async function submit(e: React.FormEvent) {  e.preventDefault()  // Reset states in case user resubmits form mid sign-up  setVerified(false)  setError('')   setVerifying(true)   if (!isLoaded && !signUp) return null   // Start the sign-up process using the email provided  try {  await signUp.create({  emailAddress,  })   // Dynamically set the host domain for dev and prod  // You could instead use an environment variable or other source for the host domain  const protocol = window.location.protocol  const host = window.location.host   // Send the user an email with the email link  const signUpAttempt = await startEmailLinkFlow({  // URL to navigate to after the user visits the link in their email  redirectUrl: `${protocol}//${host}/sign-up/verify`,  })   // Check the verification result  const verification = signUpAttempt.verifications.emailAddress   // Handle if user visited the link and completed sign-up from /sign-up/verify  if (verification.verifiedFromTheSameClient()) {  setVerifying(false)  setVerified(true)  }  } catch (err: any) {  // See https://clerk.com/docs/guides/development/custom-flows/error-handling  // for more info on error handling  console.error(JSON.stringify(err, null, 2))   if (err.errors?.[0]?.longMessage) {  console.log('Clerk error:', err.errors[0].longMessage)  setError(err.errors[0].longMessage)  } else {  setError('An error occurred.')  }  }  }   async function reset(e: React.FormEvent) {  e.preventDefault()  setVerifying(false)  }   if (error) {  return (  <div>  <p>Error: {error}</p>  <button onClick={() => setError('')}>Try again</button>  </div>  )  }   if (verifying) {  return (  <div>  <p>Check your email and visit the link that was sent to you.</p>  <form onSubmit={reset}>  <button type="submit">Restart</button>  </form>  </div>  )  }   if (verified) {  return <div>Signed up successfully!</div>  }   return (  <div>  <h1>Sign up</h1>  <form onSubmit={submit}>  <input  type="email"  placeholder="Enter email address"  value={emailAddress}  onChange={(e) => setEmailAddress(e.target.value)}  />  <button type="submit">Continue</button>  </form>  </div>  ) }

'use client'  import * as React from 'react' import { useClerk } from '@clerk/nextjs' import { EmailLinkErrorCodeStatus, isEmailLinkError } from '@clerk/nextjs/errors' import Link from 'next/link'  export default function VerifyEmailLink() {  const [verificationStatus, setVerificationStatus] = React.useState('loading')   const { handleEmailLinkVerification, loaded } = useClerk()   async function verify() {  try {  // Dynamically set the host domain for dev and prod  // You could instead use an environment variable or other source for the host domain  const protocol = window.location.protocol  const host = window.location.host   await handleEmailLinkVerification({  // URL to navigate to if sign-up flow needs more requirements, such as MFA  redirectUrl: `${protocol}//${host}/sign-up`,  })   // If not redirected at this point,  // the flow has completed  setVerificationStatus('verified')  } catch (err: any) {  let status = 'failed'   if (isEmailLinkError(err)) {  // If link expired, set status to expired  if (err.code === EmailLinkErrorCodeStatus.Expired) {  status = 'expired'  } else if (err.code === EmailLinkErrorCodeStatus.ClientMismatch) {  // OPTIONAL: This check is only required if you have  // the 'Require the same device and browser' setting  // enabled in the Clerk Dashboard  status = 'client_mismatch'  }  }   setVerificationStatus(status)  }  }   React.useEffect(() => {  if (!loaded) return   verify()  }, [handleEmailLinkVerification, loaded])   if (verificationStatus === 'loading') {  return <div>Loading...</div>  }   if (verificationStatus === 'failed') {  return (  <div>  <h1>Verify your email</h1>  <p>The email link verification failed.</p>  <Link href="/sign-up">Sign up</Link>  </div>  )  }   if (verificationStatus === 'expired') {  return (  <div>  <h1>Verify your email</h1>  <p>The email link has expired.</p>  <Link href="/sign-up">Sign up</Link>  </div>  )  }   // OPTIONAL: This check is only required if you have  // the 'Require the same device and browser' setting  // enabled in the Clerk Dashboard  if (verificationStatus === 'client_mismatch') {  return (  <div>  <h1>Verify your email</h1>  <p>  You must complete the email link sign-up on the same device and browser that you started  it on.  </p>  <Link href="/sign-up">Sign up</Link>  </div>  )  }   return (  <div>  <h1>Verify your email</h1>  <p>Successfully signed up. Return to the original tab to continue.</p>  </div>  ) }

'use client'  import * as React from 'react' import { useSignIn } from '@clerk/nextjs' import { EmailLinkFactor, SignInFirstFactor } from '@clerk/types'  export default function SignInPage() {  const [emailAddress, setEmailAddress] = React.useState('')  const [verified, setVerified] = React.useState(false)  const [verifying, setVerifying] = React.useState(false)  const [error, setError] = React.useState('')  const { signIn, isLoaded } = useSignIn()   if (!isLoaded) return null   const { startEmailLinkFlow } = signIn.createEmailLinkFlow()   async function submit(e: React.FormEvent) {  e.preventDefault()  // Reset states in case user resubmits form mid sign-in  setVerified(false)  setError('')   if (!isLoaded && !signIn) return null   // Start the sign-in process using the email provided  try {  const { supportedFirstFactors } = await signIn.create({  identifier: emailAddress,  })   setVerifying(true)   // Filter the returned array to find the 'email_link' entry  const isEmailLinkFactor = (factor: SignInFirstFactor): factor is EmailLinkFactor => {  return factor.strategy === 'email_link'  }  const emailLinkFactor = supportedFirstFactors?.find(isEmailLinkFactor)   if (!emailLinkFactor) {  setError('Email link factor not found')  return  }   const { emailAddressId } = emailLinkFactor   // Dynamically set the host domain for dev and prod  // You could instead use an environment variable or other source for the host domain  const protocol = window.location.protocol  const host = window.location.host   // Send the user an email with the email link  const signInAttempt = await startEmailLinkFlow({  emailAddressId,  redirectUrl: `${protocol}//${host}/sign-in/verify`,  })   // Check the verification result  const verification = signInAttempt.firstFactorVerification   // Handle if verification expired  if (verification.status === 'expired') {  setError('The email link has expired.')  }   // Handle if user visited the link and completed sign-in from /sign-in/verify  if (verification.verifiedFromTheSameClient()) {  setVerifying(false)  setVerified(true)  }  } catch (err: any) {  // See https://clerk.com/docs/guides/development/custom-flows/error-handling  // for more info on error handling  console.error(JSON.stringify(err, null, 2))  setError('An error occurred.')  }  }   async function reset(e: React.FormEvent) {  e.preventDefault()  setVerifying(false)  }   if (error) {  return (  <div>  <p>Error: {error}</p>  <button onClick={() => setError('')}>Try again</button>  </div>  )  }   if (verifying) {  return (  <div>  <p>Check your email and visit the link that was sent to you.</p>  <form onSubmit={reset}>  <button type="submit">Restart</button>  </form>  </div>  )  }   if (verified) {  return <div>Signed in successfully!</div>  }   return (  <div>  <h1>Sign in</h1>  <form onSubmit={submit}>  <input  type="email"  placeholder="Enter email address"  value={emailAddress}  onChange={(e) => setEmailAddress(e.target.value)}  />  <button type="submit">Continue</button>  </form>  </div>  ) }

'use client'  import * as React from 'react' import { useClerk } from '@clerk/nextjs' import { EmailLinkErrorCodeStatus, isEmailLinkError } from '@clerk/nextjs/errors' import Link from 'next/link'  export default function VerifyEmailLink() {  const [verificationStatus, setVerificationStatus] = React.useState('loading')   const { handleEmailLinkVerification, loaded } = useClerk()   async function verify() {  try {  // Dynamically set the host domain for dev and prod  // You could instead use an environment variable or other source for the host domain  const protocol = window.location.protocol  const host = window.location.host   await handleEmailLinkVerification({  // URL to navigate to if sign-in flow needs more requirements, such as MFA  redirectUrl: `${protocol}//${host}/sign-in`,  })   // If not redirected at this point,  // the flow has completed  setVerificationStatus('verified')  } catch (err: any) {  let status = 'failed'   if (isEmailLinkError(err)) {  // If link expired, set status to expired  if (err.code === EmailLinkErrorCodeStatus.Expired) {  status = 'expired'  } else if (err.code === EmailLinkErrorCodeStatus.ClientMismatch) {  // OPTIONAL: This check is only required if you have  // the 'Require the same device and browser' setting  // enabled in the Clerk Dashboard  status = 'client_mismatch'  }  }   setVerificationStatus(status)  return  }  }   React.useEffect(() => {  if (!loaded) return   verify()  }, [handleEmailLinkVerification, loaded])   if (verificationStatus === 'loading') {  return <div>Loading...</div>  }   if (verificationStatus === 'failed') {  return (  <div>  <h1>Verify your email</h1>  <p>The email link verification failed.</p>  <Link href="/sign-in">Sign in</Link>  </div>  )  }   if (verificationStatus === 'expired') {  return (  <div>  <h1>Verify your email</h1>  <p>The email link has expired.</p>  <Link href="/sign-in">Sign in</Link>  </div>  )  }   // OPTIONAL: This check is only required if you have  // the 'Require the same device and browser' setting  // enabled in the Clerk Dashboard  if (verificationStatus === 'client_mismatch') {  return (  <div>  <h1>Verify your email</h1>  <p>  You must complete the email link sign-in on the same device and browser as you started it  on.  </p>  <Link href="/sign-in">Sign in</Link>  </div>  )  }   return (  <div>  <h1>Verify your email</h1>  <p>Successfully signed in. Return to the original tab to continue.</p>  </div>  ) }

'use client'  import * as React from 'react' import { useUser, useReverification } from '@clerk/nextjs'  export default function Page() {  const { isLoaded, isSignedIn, user } = useUser()  const [email, setEmail] = React.useState('')  const [verifying, setVerifying] = React.useState(false)  const [error, setError] = React.useState('')  const createEmailAddress = useReverification((email: string) =>  user?.createEmailAddress({ email }),  )   if (!isLoaded) {  // Handle loading state  return null  }   if (!isSignedIn) {  // Handle signed out state  return <p>You must be signed in to access this page</p>  }   // Handle addition of the email address  const handleSubmit = async (e: React.FormEvent) => {  e.preventDefault()   try {  setVerifying(true)   // Add an unverified email address to user  const res = await createEmailAddress(email)  // Reload user to get updated User object  await user.reload()   // Find the email address that was just added  const emailAddress = user.emailAddresses.find((a) => a.id === res.id)   if (!emailAddress) {  setError('Email address not found')  return  }   const { startEmailLinkFlow } = emailAddress.createEmailLinkFlow()   // Dynamically set the host domain for dev and prod  // You could instead use an environment variable or other source for the host domain  const protocol = window.location.protocol  const host = window.location.host   // Send the user an email with the verification link  startEmailLinkFlow({ redirectUrl: `${protocol}//${host}/account/add-email/verify` })  } catch (err) {  // See https://clerk.com/docs/guides/development/custom-flows/error-handling  // for more info on error handling  console.error(JSON.stringify(err, null, 2))  setError('An error occurred.')  }  }   async function reset(e: React.FormEvent) {  e.preventDefault()  setVerifying(false)  }   if (error) {  return (  <div>  <p>Error: {error}</p>  <button onClick={() => setError('')}>Try again</button>  </div>  )  }   if (verifying) {  return (  <div>  <p>Check your email and visit the link that was sent to you.</p>  <form onSubmit={reset}>  <button type="submit">Restart</button>  </form>  </div>  )  }   // Display the initial form to capture the email address  return (  <>  <h1>Add email</h1>  <div>  <form onSubmit={(e) => handleSubmit(e)}>  <input  placeholder="Enter email address"  type="email"  value={email}  onChange={(e) => setEmail(e.target.value)}  />  <button type="submit">Continue</button>  </form>  </div>  </>  ) }

'use client'  import * as React from 'react' import { useClerk } from '@clerk/nextjs' import { EmailLinkErrorCodeStatus, isEmailLinkError } from '@clerk/nextjs/errors' import Link from 'next/link'  export type VerificationStatus =  | 'expired'  | 'failed'  | 'loading'  | 'verified'  | 'verified_switch_tab'  | 'client_mismatch'  export default function VerifyEmailLink() {  const [verificationStatus, setVerificationStatus] = React.useState('loading')   const { handleEmailLinkVerification, loaded } = useClerk()   async function verify() {  try {  await handleEmailLinkVerification({})  setVerificationStatus('verified')  } catch (err: any) {  let status: VerificationStatus = 'failed'   if (isEmailLinkError(err)) {  // If link expired, set status to expired  if (err.code === EmailLinkErrorCodeStatus.Expired) {  status = 'expired'  } else if (err.code === EmailLinkErrorCodeStatus.ClientMismatch) {  // OPTIONAL: This check is only required if you have  // the 'Require the same device and browser' setting  // enabled in the Clerk Dashboard  status = 'client_mismatch'  }  }   setVerificationStatus(status)  return  }  }   React.useEffect(() => {  if (!loaded) return   verify()  }, [handleEmailLinkVerification, loaded])   if (verificationStatus === 'loading') {  return <div>Loading...</div>  }   if (verificationStatus === 'failed') {  return (  <div>  <h1>Verify your email</h1>  <p>The email link verification failed.</p>  <Link href="/account/add-email">Return to add email</Link>  </div>  )  }   if (verificationStatus === 'expired') {  return (  <div>  <h1>Verify your email</h1>  <p>The email link has expired.</p>  <Link href="/account/add-email">Return to add email</Link>  </div>  )  }   // OPTIONAL: This check is only required if you have  // the 'Require the same device and browser' setting  // enabled in the Clerk Dashboard  if (verificationStatus === 'client_mismatch') {  return (  <div>  <h1>Verify your email</h1>  <p>  You must complete the email link verification on the same device and browser as you  started it on.  </p>  <Link href="/account/add-email">Return to add email</Link>  </div>  )  }   return (  <div>  <h1>Verify your email</h1>  <p>Successfully added email!</p>  </div>  ) }