import { SelfServiceVerificationFlow , SubmitSelfServiceVerificationFlowBody } from '@ory/kratos-client' ; import { Card , CardTitle } from '@ory/themes' ; import { AxiosError } from 'axios' ; import type { NextPage } from 'next' ; import Head from 'next/head' ; import Link from 'next/link' ; import { useRouter } from 'next/router' ; import { useEffect , useState } from 'react' ; import { Flow , ActionCard , CenterLink , MarginCard } from '../pkg' ; import ory from '../pkg/sdk' ; const Verification = ( ) => { const [ flow , setFlow ] = useState < SelfServiceVerificationFlow > ( ) ; const router = useRouter ( ) ; const { flow : flowId , return_to : returnTo } = router . query ; useEffect ( ( ) => { if ( ! router . isReady || flow ) { return ; } if ( flowId ) { ory . getSelfServiceVerificationFlow ( String ( flowId ) ) . then ( ( { data } ) => { setFlow ( data ) ; } ) . catch ( ( err ) => { switch ( err . response ?. status ) { case 410 : case 403 : return router . push ( '/verification' ) ; } throw err ; } ) ; return ; } ory . initializeSelfServiceVerificationFlowForBrowsers ( returnTo ? String ( returnTo ) : undefined ) . then ( ( { data } ) => { setFlow ( data ) ; } ) . catch ( ( err ) => { switch ( err . response ?. status ) { case 400 : return router . push ( '/' ) ; } throw err ; } ) ; } , [ flowId , router , router . isReady , returnTo , flow ] ) ; const onSubmit = ( values ) => router . push ( `/verification?flow=${ flow ?. id }` , undefined , { shallow : true } ) . then ( ( ) => ory . submitSelfServiceVerificationFlow ( String ( flow ?. id ) , undefined , values ) . then ( ( { data } ) => { setFlow ( data ) ; } ) . catch ( ( err ) => { switch ( err . response ?. status ) { case 400 : setFlow ( err . response ?. data ) ; return ; } throw err ; } ) ) ; return ( < > < Head > < title > Verify your account - Ory NextJS Integration Example < /title> < meta name = "description" content = "NextJS + React + Vercel + Ory" / > < /Head> < MarginCard > < CardTitle > Verify your account < /CardTitle> < Flow onSubmit = { onSubmit } flow = { flow } / > < /MarginCard> < ActionCard > < Link href = "/" passHref > < CenterLink > Go back < /CenterLink> < /Link> < /ActionCard> < />); } ; export default Verification ;