import { SelfServiceError } from '@ory/kratos-client' ; import { CardTitle , CodeBox } from '@ory/themes' ; import { AxiosError } from 'axios' ; import type { NextPage } from 'next' ; import Link from 'next/link' ; import { useRouter } from 'next/router' ; import { useEffect , useState } from 'react' ; import { ActionCard , CenterLink , MarginCard } from '../pkg' ; import ory from '../pkg/sdk' ; const Login = ( ) => { const [ error , setError ] = useState < SelfServiceError | string > ( ) ; const router = useRouter ( ) ; const { id } = router . query ; useEffect ( ( ) => { if ( ! router . isReady || error ) { return ; } ory . getSelfServiceError ( String ( id ) ) . then ( ( { data } ) => { setError ( data ) ; } ) . catch ( ( err ) => { switch ( err . response ?. status ) { case 404 : case 403 : case 410 : return router . push ( '/' ) ; } return Promise . reject ( err ) ; } ) ; } , [ id , router , router . isReady , error ] ) ; if ( ! error ) { return null ; } return ( < > < MarginCard wide > < CardTitle > An error occurred < /CardTitle> < CodeBox code = { JSON . stringify ( error , null , 2 ) } / > < /MarginCard> < ActionCard wide > < Link href = "/" passHref > < CenterLink > Go back < /CenterLink> < /Link> < /ActionCard> < />); } ; export default Login ;