diff --git a/client/src/components/UseAnotherMethod/UseAnotherMethod.tsx b/client/src/components/UseAnotherMethod/UseAnotherMethod.tsx index f9a4199bd..b255ed73b 100644 --- a/client/src/components/UseAnotherMethod/UseAnotherMethod.tsx +++ b/client/src/components/UseAnotherMethod/UseAnotherMethod.tsx @@ -8,6 +8,7 @@ export interface OwnProps {} export interface StateProps { availableMethods: Method2FA[] | null; + isSecurityKeySupported: boolean; } export interface DispatchProps { @@ -48,8 +49,13 @@ class UseAnotherMethod extends Component { key: "duo_push" } ]; + const methodsComponents = methods + // Filter out security key if not supported by browser. + .filter(m => m.key !== "u2f" || (m.key === "u2f" && this.props.isSecurityKeySupported)) + // Filter out the methods that are not supported by the server. .filter(m => this.props.availableMethods && this.props.availableMethods.includes(m.key)) + // Create the buttons .map(m => ); return ( diff --git a/client/src/containers/components/SecondFactorForm/SecondFactorForm.ts b/client/src/containers/components/SecondFactorForm/SecondFactorForm.ts index 78c608bc3..018b97fe1 100644 --- a/client/src/containers/components/SecondFactorForm/SecondFactorForm.ts +++ b/client/src/containers/components/SecondFactorForm/SecondFactorForm.ts @@ -5,9 +5,7 @@ import LogoutBehavior from '../../../behaviors/LogoutBehavior'; import { RootState } from '../../../reducers'; import { StateProps, DispatchProps } from '../../../components/SecondFactorForm/SecondFactorForm'; import FetchPrefered2faMethod from '../../../behaviors/FetchPrefered2faMethod'; -import SetPrefered2faMethod from '../../../behaviors/SetPrefered2faMethod'; -import { getPreferedMethodSuccess, setUseAnotherMethod } from '../../../reducers/Portal/SecondFactor/actions'; -import Method2FA from '../../../types/Method2FA'; +import { setUseAnotherMethod } from '../../../reducers/Portal/SecondFactor/actions'; const mapStateToProps = (state: RootState): StateProps => { return { @@ -16,15 +14,6 @@ const mapStateToProps = (state: RootState): StateProps => { } } -async function storeMethod(dispatch: Dispatch, method: Method2FA) { - // display the new option - dispatch(getPreferedMethodSuccess(method)); - dispatch(setUseAnotherMethod(false)); - - // And save the method for next time. - await SetPrefered2faMethod(dispatch, method); -} - const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => { return { onInit: () => FetchPrefered2faMethod(dispatch), diff --git a/client/src/containers/components/SecondFactorU2F/SecondFactorU2F.ts b/client/src/containers/components/SecondFactorU2F/SecondFactorU2F.ts index bbf645f9f..d05f31a9e 100644 --- a/client/src/containers/components/SecondFactorU2F/SecondFactorU2F.ts +++ b/client/src/containers/components/SecondFactorU2F/SecondFactorU2F.ts @@ -10,7 +10,6 @@ import { securityKeySignSuccess, securityKeySign, securityKeySignFailure, - setSecurityKeySupported } from '../../../reducers/Portal/SecondFactor/actions'; import FetchStateBehavior from '../../../behaviors/FetchStateBehavior'; @@ -94,11 +93,7 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps: OwnProps) => { await dispatch(push('/confirmation-sent')); }, onInit: async () => { - const isU2FSupported = await u2fApi.isSupported(); - if (isU2FSupported) { - await dispatch(setSecurityKeySupported(true)); - await triggerSecurityKeySigning(dispatch, ownProps.redirectionUrl); - } + await triggerSecurityKeySigning(dispatch, ownProps.redirectionUrl); }, } } diff --git a/client/src/containers/components/UseAnotherMethod/UseAnotherMethod.tsx b/client/src/containers/components/UseAnotherMethod/UseAnotherMethod.tsx index 9e502a1f3..5e1e5db61 100644 --- a/client/src/containers/components/UseAnotherMethod/UseAnotherMethod.tsx +++ b/client/src/containers/components/UseAnotherMethod/UseAnotherMethod.tsx @@ -2,13 +2,16 @@ import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { RootState } from '../../../reducers'; import SetPrefered2faMethod from '../../../behaviors/SetPrefered2faMethod'; -import { getPreferedMethodSuccess, setUseAnotherMethod } from '../../../reducers/Portal/SecondFactor/actions'; +import { getPreferedMethodSuccess, setUseAnotherMethod, setSecurityKeySupported } from '../../../reducers/Portal/SecondFactor/actions'; import Method2FA from '../../../types/Method2FA'; import UseAnotherMethod, {StateProps, DispatchProps} from '../../../components/UseAnotherMethod/UseAnotherMethod'; import GetAvailable2faMethods from '../../../behaviors/GetAvailable2faMethods'; +import u2fApi from 'u2f-api'; + const mapStateToProps = (state: RootState): StateProps => ({ availableMethods: state.secondFactor.getAvailableMethodResponse, + isSecurityKeySupported: state.secondFactor.securityKeySupported, }) async function storeMethod(dispatch: Dispatch, method: Method2FA) { @@ -22,7 +25,10 @@ async function storeMethod(dispatch: Dispatch, method: Method2FA) { const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => { return { - onInit: () => GetAvailable2faMethods(dispatch), + onInit: async () => { + dispatch(setSecurityKeySupported(await u2fApi.isSupported())); + await GetAvailable2faMethods(dispatch); + }, onOneTimePasswordMethodClicked: () => storeMethod(dispatch, 'totp'), onSecurityKeyMethodClicked: () => storeMethod(dispatch, 'u2f'), onDuoPushMethodClicked: () => storeMethod(dispatch, "duo_push"),