import { SelfServiceRegistrationFlow , SubmitSelfServiceRegistrationFlowBody } from '@ory/kratos-client' ; import { CardTitle } from '@ory/themes' ; import { AxiosError } from 'axios' ; import type { NextPage } from 'next' ; import Head from 'next/head' ; import { useRouter , NextRouter } from 'next/router' ; import { useEffect , useState } from 'react' ; import { Flow , ActionCard , CenterLink , MarginCard } from '../pkg' ; import { handleFlowError } from '../pkg/errors' ; import ory from '../pkg/sdk' ; const Registration = ( ) => { const router = useRouter ( ) ; const [ flow , setFlow ] = useState < SelfServiceRegistrationFlow > ( ) ; const { flow : flowId , return_to : returnTo } = router . query ; useEffect ( ( ) => { if ( ! router . isReady || flow ) { return ; } if ( flowId ) { ory . getSelfServiceRegistrationFlow ( String ( flowId ) ) . then ( ( { data } ) => { setFlow ( data ) ; } ) . catch ( handleFlowError ( router , 'registration' , setFlow ) ) ; return ; } ory . initializeSelfServiceRegistrationFlowForBrowsers ( returnTo ? String ( returnTo ) : undefined ) . then ( ( { data } ) => { setFlow ( data ) ; } ) . catch ( handleFlowError ( router , 'registration' , setFlow ) ) ; } , [ flowId , router , router . isReady , returnTo , flow ] ) ; const onSubmit = ( values ) => router . push ( `/registration?flow=${ flow ?. id }` , undefined , { shallow : true } ) . then ( ( ) => ory . submitSelfServiceRegistrationFlow ( String ( flow ?. id ) , values ) . then ( ( { data } ) => { console . log ( 'This is the user session: ' , data , data . identity ) ; return router . push ( flow ?. return_to || '/' ) . then ( ( ) => { } ) ; } ) . catch ( handleFlowError ( router , 'registration' , setFlow ) ) . catch ( ( err ) => { if ( err . response ?. status === 400 ) { setFlow ( err . response ?. data ) ; return ; } return Promise . reject ( err ) ; } ) ) ; return ( < > < Head > < title > Create account - Ory NextJS Integration Example < /title> < meta name = "description" content = "NextJS + React + Vercel + Ory" / > < /Head> < MarginCard > < CardTitle > Create account < /CardTitle> < Flow onSubmit = { onSubmit } flow = { flow } / > < /MarginCard> < ActionCard > < CenterLink data - testid = "cta-link" href = "/login" > Sign in < /CenterLink> < /ActionCard> < />); } ; export default Registration ;