diff --git a/frontend/src/App.js b/frontend/src/App.js
index 4b1621b4e0..02bc038ef9 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -128,7 +128,7 @@ export default function App() {
diff --git a/frontend/src/AuthenticateField.js b/frontend/src/AuthenticateField.js
index 87ae9cb5ac..37c2af368f 100644
--- a/frontend/src/AuthenticateField.js
+++ b/frontend/src/AuthenticateField.js
@@ -17,14 +17,29 @@ import WithPseudoBox from './withPseudoBox'
const AuthenticateField = WithPseudoBox(function AuthenticateField({
name,
forwardedRef,
+ sendMethod,
...props
}) {
const [field, meta] = useField(name)
const { i18n } = useLingui()
+ const codeSendMessage =
+ sendMethod === 'email' ? (
+
+ We've sent you an email with an authentication code to sign into
+ Tracker.
+
+ ) : (
+
+ We've sent an SMS to your registered phone number with an authentication
+ code to sign into Tracker.
+
+ )
+
return (
+ {codeSendMessage}{' '}
Please enter your two factor code below.
@@ -50,6 +65,7 @@ const AuthenticateField = WithPseudoBox(function AuthenticateField({
AuthenticateField.propTypes = {
name: string.isRequired,
forwardedRef: oneOfType([func, shape({ current: elementType })]),
+ sendMethod: string.isRequired,
}
const withForwardedRef = React.forwardRef((props, ref) => {
diff --git a/frontend/src/SignInPage.js b/frontend/src/SignInPage.js
index 3a5197278e..8d33a3b0ba 100644
--- a/frontend/src/SignInPage.js
+++ b/frontend/src/SignInPage.js
@@ -19,15 +19,17 @@ import EmailField from './EmailField'
import { fieldRequirements } from './fieldRequirements'
import { TrackerButton } from './TrackerButton'
import { LoadingMessage } from './LoadingMessage'
+import { useUserState } from './UserState'
+import { useLingui } from '@lingui/react'
export default function SignInPage() {
+ const { login } = useUserState()
+ const { i18n } = useLingui()
const history = useHistory()
const toast = useToast()
const validationSchema = object().shape({
- password: string().required(
- fieldRequirements.password.required.message,
- ),
+ password: string().required(fieldRequirements.password.required.message),
email: string()
.required(fieldRequirements.email.required.message)
.email(fieldRequirements.email.email.message),
@@ -45,8 +47,41 @@ export default function SignInPage() {
})
},
onCompleted({ signIn }) {
- // redirect to the authenticate page
- history.push(`/authenticate/${signIn.authenticateToken}`)
+ // 2FA not enabled
+ if (signIn.result.__typename === 'RegularSignInResult') {
+ login({
+ jwt: signIn.result.authResult.authToken,
+ tfa: signIn.result.authResult.user.tfaValidated,
+ userName: signIn.result.authResult.user.userName,
+ })
+ // // redirect to the home page.
+ history.push('/')
+ // // Display a welcome message
+ toast({
+ title: i18n._(t`Sign In.`),
+ description: i18n._(t`Welcome, you are successfully signed in!`),
+ status: 'success',
+ duration: 9000,
+ isClosable: true,
+ })
+ }
+ // 2FA enabled
+ else if (signIn.result.__typename === 'TFASignInResult') {
+ // redirect to the authenticate page
+ history.push(
+ `/authenticate/${signIn.result.sendMethod}/${signIn.result.authenticateToken}`,
+ )
+ } else {
+ toast({
+ title: t`Incorrect send method received.`,
+ description: t`Incorrect signIn.result typename.`,
+ status: 'error',
+ duration: 9000,
+ isClosable: true,
+ position: 'top-left',
+ })
+ console.log('Incorrect signIn.result typename.')
+ }
},
})
diff --git a/frontend/src/TwoFactorAuthenticatePage.js b/frontend/src/TwoFactorAuthenticatePage.js
index 4528e80912..d52eea8e78 100644
--- a/frontend/src/TwoFactorAuthenticatePage.js
+++ b/frontend/src/TwoFactorAuthenticatePage.js
@@ -16,7 +16,7 @@ export default function TwoFactorAuthenticatePage() {
const history = useHistory()
const toast = useToast()
const { i18n } = useLingui()
- const { authenticateToken } = useParams()
+ const { sendMethod, authenticateToken } = useParams()
const validationSchema = object().shape({
twoFactorCode: number()
@@ -91,7 +91,11 @@ export default function TwoFactorAuthenticatePage() {
Two Factor Authentication
-
+