konnosDashboard
sign-in-mfa.tsx112 lines · main
1// @ts-nocheck
2import * as Sentry from '@sentry/nextjs'
3import { useQueryClient } from '@tanstack/react-query'
4import { getAccessToken, useParams } from 'common'
5import { useRouter } from 'next/router'
6import { useEffect, useState } from 'react'
7import { toast } from 'sonner'
8import { LogoLoader } from 'ui'
9
10import { SignInMfaForm } from '@/components/interfaces/SignIn/SignInMfaForm'
11import SignInLayout from '@/components/layouts/SignInLayout/SignInLayout'
12import { useAddLoginEvent } from '@/data/misc/audit-login-mutation'
13import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
14import useLatest from '@/hooks/misc/useLatest'
15import { auth, buildPathWithParams, getReturnToPath } from '@/lib/gotrue'
16import type { NextPageWithLayout } from '@/types'
17
18const SignInMfaPage: NextPageWithLayout = () => {
19 const router = useRouter()
20
21 const queryClient = useQueryClient()
22 const {
23 // current methods for mfa are github and sso
24 method: signInMethod = 'unknown',
25 } = useParams()
26 const signInMethodRef = useLatest(signInMethod)
27
28 const { mutate: sendEvent } = useSendEventMutation()
29 const { mutate: addLoginEvent } = useAddLoginEvent()
30
31 const [loading, setLoading] = useState(true)
32
33 // This useEffect redirects the user to MFA if they're already halfway signed in
34 useEffect(() => {
35 auth
36 .initialize()
37 .then(async ({ error }) => {
38 if (error) {
39 // if there was a problem signing in via the url, don't redirect
40 setLoading(false)
41 return
42 }
43
44 const token = await getAccessToken()
45
46 if (token) {
47 const { data, error } = await auth.mfa.getAuthenticatorAssuranceLevel()
48 if (error) {
49 // if there was a problem signing in via the url, don't redirect
50 toast.error(
51 `Failed to retrieve assurance level: ${error.message}. Please try signing in again`
52 )
53 setLoading(false)
54 return router.push({ pathname: '/sign-in', query: router.query })
55 }
56
57 if (data.currentLevel === data.nextLevel) {
58 sendEvent({
59 action: 'sign_in',
60 properties: {
61 category: 'account',
62 method: signInMethodRef.current,
63 },
64 })
65 addLoginEvent({})
66
67 await queryClient.resetQueries()
68 router.push(getReturnToPath())
69 return
70 } else {
71 // Show the MFA form
72 setLoading(false)
73 return
74 }
75 } else {
76 // if the user doesn't have a token, he needs to go back to the sign-in page
77 const redirectTo = buildPathWithParams('/sign-in')
78 router.replace(redirectTo)
79 return
80 }
81 })
82 .catch((error) => {
83 Sentry.captureException(error)
84 console.error('Auth initialization error:', error)
85 toast.error('Failed to initialize authentication. Please try again.')
86 setLoading(false)
87 router.push({ pathname: '/sign-in', query: router.query })
88 })
89 }, [])
90
91 if (loading) {
92 return (
93 <div className="flex flex-col flex-1 bg-alternative h-screen items-center justify-center">
94 <LogoLoader />
95 </div>
96 )
97 }
98
99 return (
100 <SignInLayout
101 heading="Two-factor authentication"
102 subheading="Enter the authentication code from your two-factor authentication app"
103 logoLinkToMarketingSite={true}
104 >
105 <div className="flex flex-col gap-5">
106 <SignInMfaForm />
107 </div>
108 </SignInLayout>
109 )
110}
111
112export default SignInMfaPage