feat: 2FA respect after_update param.

hokusai/development.yml

@@ -6,13 +6,21 @@ services:
     environment:
       - NODE_ENV=development
       - REDIS_URL=redis://force-redis:6379/0
+      - OPENREDIS_URL=redis://force-redis:6379/0
       - PORT=5000
       - S3_KEY
       - S3_SECRET
       - DEPLOY_ENV
     env_file: ../.env
+    command: ["yarn", "start:dev"]
     ports:
       - 5000:5000
+    volumes:
+      - ../:/app
+      # prevents bind mount from overwriting node_modules in docker image.
+      - /app/node_modules
+    depends_on:
+      - force-redis
   force-redis:
     image: redis:3.2-alpine
     ports:

src/v2/Components/UserSettings/TwoFactorAuthentication/Components/AppSecondFactor/Modal.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Input, Modal, Sans } from "@artsy/palette"
+import { Box, Button, Flex, Input, Modal, Sans, Serif } from "@artsy/palette"
 import { CreateAppSecondFactorMutationResponse } from "v2/__generated__/CreateAppSecondFactorMutation.graphql"
 import { useSystemContext } from "v2/Artsy"
 import { Formik, FormikHelpers as FormikActions, FormikProps } from "formik"
@@ -9,6 +9,7 @@ import { ApiError } from "../../ApiError"
 import { EnableSecondFactor } from "../Mutation/EnableSecondFactor"
 import { UpdateAppSecondFactor } from "./Mutation/UpdateAppSecondFactor"
 import { BackupSecondFactorReminder } from "../BackupSecondFactorReminder"
+import { redirectMessage } from "v2/Components/UserSettings/TwoFactorAuthentication/helpers"
 
 export interface FormValues {
   name: string
@@ -234,3 +235,34 @@ const InnerForm: React.FC<InnerFormProps> = ({
     </Box>
   )
 }
+
+interface OnCompleteRedirectModalProps {
+  onClick: () => void
+  redirectTo: string
+  show: boolean
+}
+
+export const OnCompleteRedirectModal: React.FC<OnCompleteRedirectModalProps> = props => {
+  const { onClick, redirectTo, show } = props
+
+  return (
+    <Modal
+      title="Set up with app"
+      onClose={onClick}
+      show={show}
+      hideCloseButton={true}
+      FixedButton={
+        <Button onClick={onClick} width="100%">
+          OK
+        </Button>
+      }
+    >
+      <Serif size="3t" color="black60">
+        You’ve successfully set up two-factor authentication!
+      </Serif>
+      <Serif mt={2} size="3t" color="black60">
+        {redirectMessage(redirectTo)}
+      </Serif>
+    </Modal>
+  )
+}

src/v2/Components/UserSettings/TwoFactorAuthentication/Components/AppSecondFactor/index.tsx

@@ -13,7 +13,7 @@ import { RelayRefetchProp, createFragmentContainer, graphql } from "react-relay"
 import request from "superagent"
 
 import { useSystemContext } from "v2/Artsy"
-import { AppSecondFactorModal } from "./Modal"
+import { AppSecondFactorModal, OnCompleteRedirectModal } from "./Modal"
 import { ApiError } from "../../ApiError"
 import { ApiErrorModal } from "../ApiErrorModal"
 import { CreateAppSecondFactor } from "./Mutation/CreateAppSecondFactor"
@@ -22,6 +22,8 @@ import { AppSecondFactor_me } from "v2/__generated__/AppSecondFactor_me.graphql"
 import { ConfirmPasswordModal } from "v2/Components/ConfirmPasswordModal"
 import { CreateAppSecondFactorInput } from "v2/__generated__/CreateAppSecondFactorMutation.graphql"
 
+import { afterUpdateRedirect } from "v2/Components/UserSettings/TwoFactorAuthentication/helpers"
+
 interface AppSecondFactorProps extends BorderBoxProps {
   me: AppSecondFactor_me
   relayRefetch?: RelayRefetchProp
@@ -34,23 +36,35 @@ export const AppSecondFactor: React.FC<AppSecondFactorProps> = props => {
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
   const [showSetupModal, setShowSetupModal] = useState(false)
   const [showCompleteModal, setShowCompleteModal] = useState(false)
+  const [showCompleteRedirectModal, setShowCompleteRedirectModal] = useState(false)
   const [stagedSecondFactor, setStagedSecondFactor] = useState(null)
   const [isDisabling] = useState(false)
   const [isCreating, setCreating] = useState(false)
 
   const { relayEnvironment } = useSystemContext()
 
+  const redirectTo = afterUpdateRedirect()
+
   function onComplete() {
     const showCompleteModalCallback = () => {
       setShowSetupModal(false)
       setShowCompleteModal(true)
     }
 
+    const showCompleteRedirectModalCallback = () => {
+      setShowSetupModal(false)
+      setShowCompleteRedirectModal(true)
+    }
+
     if (props.me.hasSecondFactorEnabled) {
       // @ts-expect-error STRICT_NULL_CHECK
       relayRefetch.refetch({}, {}, showCompleteModalCallback)
     } else {
-      showCompleteModalCallback()
+      if (redirectTo) {
+        showCompleteRedirectModalCallback()
+      } else {
+        showCompleteModalCallback()
+      }
     }
   }
 
@@ -66,6 +80,14 @@ export const AppSecondFactor: React.FC<AppSecondFactorProps> = props => {
     }
   }
 
+  function onCompleteRedirect() {
+    if (props.me.hasSecondFactorEnabled) {
+      setShowCompleteModal(false)
+    } else {
+      window.location.assign(redirectTo)
+    }
+  }
+
   function handleMutationError(errors: ApiError[]) {
     if (!Array.isArray(errors)) {
       throw errors
@@ -223,6 +245,11 @@ export const AppSecondFactor: React.FC<AppSecondFactorProps> = props => {
           </Serif>
         )}
       </Modal>
+      <OnCompleteRedirectModal
+        onClick={onCompleteRedirect}
+        redirectTo={redirectTo}
+        show={showCompleteRedirectModal}
+      />
     </BorderBox>
   )
 }

src/v2/Components/UserSettings/TwoFactorAuthentication/Components/SmsSecondFactor/Modal.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Input, Modal, Sans, Spacer } from "@artsy/palette"
+import { Box, Button, Flex, Input, Modal, Sans, Serif, Spacer } from "@artsy/palette"
 import { FormikHelpers as FormikActions } from "formik"
 import React, { useState } from "react"
 import styled from "styled-components"
@@ -17,6 +17,7 @@ import { UpdateSmsSecondFactor } from "./Mutation/UpdateSmsSecondFactor"
 import { BackupSecondFactorReminder } from "../BackupSecondFactorReminder"
 
 import { CreateSmsSecondFactorMutationResponse } from "v2/__generated__/CreateSmsSecondFactorMutation.graphql"
+import { redirectMessage } from "v2/Components/UserSettings/TwoFactorAuthentication/helpers"
 
 interface SmsSecondFactorModalProps {
   onClose: () => void
@@ -291,3 +292,34 @@ export const SmsSecondFactorModal: React.FC<SmsSecondFactorModalProps> = props =
     </>
   )
 }
+
+interface OnCompleteRedirectModalProps {
+  onClick: () => void
+  redirectTo: string
+  show: boolean
+}
+
+export const OnCompleteRedirectModal: React.FC<OnCompleteRedirectModalProps> = props => {
+  const { onClick, redirectTo, show } = props
+
+  return (
+    <Modal
+      title="Set up with text message"
+      onClose={onClick}
+      show={show}
+      hideCloseButton={true}
+      FixedButton={
+        <Button onClick={onClick} width="100%">
+          OK
+        </Button>
+      }
+    >
+      <Serif size="3t" color="black60">
+        You’ve successfully set up two-factor authentication!
+      </Serif>
+      <Serif mt={2} size="3t" color="black60">
+        {redirectMessage(redirectTo)}
+      </Serif>
+    </Modal>
+  )
+}

src/v2/Components/UserSettings/TwoFactorAuthentication/Components/SmsSecondFactor/index.tsx

@@ -14,14 +14,16 @@ import request from "superagent"
 import { useSystemContext } from "v2/Artsy"
 
 import { ApiError } from "../../ApiError"
-import { SmsSecondFactorModal } from "./Modal"
+import { SmsSecondFactorModal, OnCompleteRedirectModal } from "./Modal"
 import { CreateSmsSecondFactor } from "./Mutation/CreateSmsSecondFactor"
 import { CreateSmsSecondFactorInput } from "v2/__generated__/CreateSmsSecondFactorMutation.graphql"
 import { SmsSecondFactor_me } from "v2/__generated__/SmsSecondFactor_me.graphql"
 import { ApiErrorModal } from "../ApiErrorModal"
 import { DisableFactorConfirmation } from "../DisableFactorConfirmation"
 import { ConfirmPasswordModal } from "v2/Components/ConfirmPasswordModal"
 
+import { afterUpdateRedirect } from "v2/Components/UserSettings/TwoFactorAuthentication/helpers"
+
 interface SmsSecondFactorProps extends BorderBoxProps {
   me: SmsSecondFactor_me
   relayRefetch?: RelayRefetchProp
@@ -34,23 +36,36 @@ export const SmsSecondFactor: React.FC<SmsSecondFactorProps> = props => {
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
   const [showSetupModal, setShowSetupModal] = useState(false)
   const [showCompleteModal, setShowCompleteModal] = useState(false)
+  const [showCompleteRedirectModal, setShowCompleteRedirectModal] = useState(false)
   const [apiErrors, setApiErrors] = useState<ApiError[]>([])
   const [isDisabling] = useState(false)
   const [isCreating, setCreating] = useState(false)
 
   const [stagedSecondFactor, setStagedSecondFactor] = useState(null)
 
+  const redirectTo = afterUpdateRedirect()
+
   function onComplete() {
     const showCompleteModalCallback = () => {
       setShowSetupModal(false)
       setShowCompleteModal(true)
     }
 
+    const showCompleteRedirectModalCallback = () => {
+      setShowSetupModal(false)
+      setShowCompleteRedirectModal(true)
+    }
+
     if (props.me.hasSecondFactorEnabled) {
       // @ts-expect-error STRICT_NULL_CHECK
       relayRefetch.refetch({}, {}, showCompleteModalCallback)
     } else {
       showCompleteModalCallback()
+      if (redirectTo) {
+        showCompleteRedirectModalCallback()
+      } else {
+        showCompleteModalCallback()
+      }
     }
   }
 
@@ -66,6 +81,14 @@ export const SmsSecondFactor: React.FC<SmsSecondFactorProps> = props => {
     }
   }
 
+  function onCompleteRedirect() {
+    if (props.me.hasSecondFactorEnabled) {
+      setShowCompleteModal(false)
+    } else {
+      window.location.assign(redirectTo)
+    }
+  }
+
   function handleMutationError(errors: ApiError[]) {
     if (!Array.isArray(errors)) {
       throw errors
@@ -219,6 +242,11 @@ export const SmsSecondFactor: React.FC<SmsSecondFactorProps> = props => {
           </Serif>
         )}
       </Modal>
+      <OnCompleteRedirectModal
+        onClick={onCompleteRedirect}
+        redirectTo={redirectTo}
+        show={showCompleteRedirectModal}
+      />
     </BorderBox>
   )
 }

src/v2/Components/UserSettings/TwoFactorAuthentication/helpers.ts

@@ -0,0 +1,23 @@
+import { getClientParam } from "v2/Utils/getClientParam"
+import { getURLHost } from "v2/Utils/url"
+import sanitizeRedirect from "@artsy/passport/sanitize-redirect"
+
+export const afterUpdateRedirect = () => {
+  const afterUpdateURL = getClientParam("after_update")
+
+  if (afterUpdateURL) {
+    const sanitizedURL = sanitizeRedirect(afterUpdateURL)
+    return sanitizedURL
+  }
+
+  return ''
+}
+
+export const redirectMessage = (url) => {
+  const urlHost = getURLHost(url)
+  if (urlHost) {
+    return 'You will be redirected to: ' + urlHost
+  } else {
+    return ''
+  }
+}

src/v2/Utils/url.ts

@@ -0,0 +1,8 @@
+export const getURLHost = (url) => {
+  try {
+    const urlObject = new URL(url)
+    return urlObject.hostname
+  } catch (error) {
+    return ''
+  }
+}