diff --git a/lib/types/siwe-types.js b/lib/types/siwe-types.js index b1014923e..caef0b682 100644 --- a/lib/types/siwe-types.js +++ b/lib/types/siwe-types.js @@ -1,130 +1,131 @@ // @flow import type { LogInExtraInfo } from './account-types.js'; import type { SignedIdentityKeysBlob } from './crypto-types.js'; import { type DeviceTokenUpdateRequest, type PlatformDetails, } from './device-types.js'; import { type CalendarQuery } from './entry-types.js'; export type SIWENonceResponse = { +nonce: string, }; export type SIWEAuthRequest = { +message: string, +signature: string, +calendarQuery?: ?CalendarQuery, +deviceTokenUpdateRequest?: ?DeviceTokenUpdateRequest, +platformDetails: PlatformDetails, +watchedIDs: $ReadOnlyArray, +signedIdentityKeysBlob?: ?SignedIdentityKeysBlob, +initialNotificationsEncryptedMessage?: string, +doNotRegister?: boolean, }; export type SIWEAuthServerCall = { +message: string, +signature: string, + +doNotRegister?: boolean, ...LogInExtraInfo, }; export type SIWESocialProof = { +siweMessage: string, +siweMessageSignature: string, }; // This is a message that the rendered webpage (landing/siwe.react.js) uses to // communicate back to the React Native WebView that is rendering it // (native/account/siwe-panel.react.js) export type SIWEWebViewMessage = | { +type: 'siwe_success', +address: string, +message: string, +signature: string, } | { +type: 'siwe_closed', } | { +type: 'walletconnect_modal_update', +state: 'open', +height: number, } | { +type: 'walletconnect_modal_update', +state: 'closed', }; export type SIWEMessage = { // RFC 4501 dns authority that is requesting the signing. +domain: string, // Ethereum address performing the signing conformant to capitalization // encoded checksum specified in EIP-55 where applicable. +address: string, // Human-readable ASCII assertion that the user will sign, and it must not // contain `\n`. +statement?: string, // RFC 3986 URI referring to the resource that is the subject of the signing // (as in the __subject__ of a claim). +uri: string, // Current version of the message. +version: string, // EIP-155 Chain ID to which the session is bound, and the network where // Contract Accounts must be resolved. +chainId: number, // Randomized token used to prevent replay attacks, at least 8 alphanumeric // characters. +nonce: string, // ISO 8601 datetime string of the current time. +issuedAt: string, // ISO 8601 datetime string that, if present, indicates when the signed // authentication message is no longer valid. +expirationTime?: string, // ISO 8601 datetime string that, if present, indicates when the signed // authentication message will become valid. +notBefore?: string, // System-specific identifier that may be used to uniquely refer to the // sign-in request. +requestId?: string, // List of information or references to information the user wishes to have // resolved as part of authentication by the relying party. They are // expressed as RFC 3986 URIs separated by `\n- `. +resources?: $ReadOnlyArray, // @deprecated // Signature of the message signed by the wallet. // // This field will be removed in future releases, an additional parameter // was added to the validate function were the signature goes to validate // the message. +signature?: string, // @deprecated // Type of sign message to be generated. // // This field will be removed in future releases and will rely on the // message version. +type?: 'Personal signature', +validate: (signature: string, provider?: any) => Promise, +toMessage: () => string, }; export type SIWEResult = { +address: string, +message: string, +signature: string, }; diff --git a/web/account/siwe-login-form.react.js b/web/account/siwe-login-form.react.js index 27bfcbb82..a5ceaa3e1 100644 --- a/web/account/siwe-login-form.react.js +++ b/web/account/siwe-login-form.react.js @@ -1,210 +1,269 @@ // @flow import '@rainbow-me/rainbowkit/styles.css'; +import classNames from 'classnames'; import invariant from 'invariant'; import * as React from 'react'; import { useDispatch } from 'react-redux'; import { useAccount, useSigner } from 'wagmi'; import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js'; import { getSIWENonce, getSIWENonceActionTypes, siweAuth, siweAuthActionTypes, } from 'lib/actions/siwe-actions.js'; import ConnectedWalletInfo from 'lib/components/connected-wallet-info.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; +import stores from 'lib/facts/stores.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import type { LogInStartingPayload } from 'lib/types/account-types.js'; import type { OLMIdentityKeys, SignedIdentityKeysBlob, } from 'lib/types/crypto-types.js'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils.js'; +import { ServerError } from 'lib/utils/errors.js'; import { createSIWEMessage, getSIWEStatementForPublicKey, siweMessageSigningExplanationStatements, } from 'lib/utils/siwe-utils.js'; import { useSignedIdentityKeysBlob } from './account-hooks.js'; import HeaderSeparator from './header-separator.react.js'; import css from './siwe.css'; import Button from '../components/button.react.js'; import OrBreak from '../components/or-break.react.js'; import LoadingIndicator from '../loading-indicator.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { webLogInExtraInfoSelector } from '../selectors/account-selectors.js'; +type SIWELogInError = 'account_does_not_exist'; + type SIWELoginFormProps = { +cancelSIWEAuthFlow: () => void, }; const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector( getSIWENonceActionTypes, ); const siweAuthLoadingStatusSelector = createLoadingStatusSelector(siweAuthActionTypes); function SIWELoginForm(props: SIWELoginFormProps): React.Node { const { address } = useAccount(); const { data: signer } = useSigner(); const dispatchActionPromise = useDispatchActionPromise(); const getSIWENonceCall = useServerCall(getSIWENonce); const getSIWENonceCallLoadingStatus = useSelector( getSIWENonceLoadingStatusSelector, ); const siweAuthLoadingStatus = useSelector(siweAuthLoadingStatusSelector); const siweAuthCall = useServerCall(siweAuth); const logInExtraInfo = useSelector(webLogInExtraInfoSelector); const [siweNonce, setSIWENonce] = React.useState(null); const siweNonceShouldBeFetched = !siweNonce && getSIWENonceCallLoadingStatus !== 'loading'; React.useEffect(() => { if (!siweNonceShouldBeFetched) { return; } dispatchActionPromise( getSIWENonceActionTypes, (async () => { const response = await getSIWENonceCall(); setSIWENonce(response); })(), ); }, [dispatchActionPromise, getSIWENonceCall, siweNonceShouldBeFetched]); const primaryIdentityPublicKeys: ?OLMIdentityKeys = useSelector( state => state.cryptoStore.primaryIdentityKeys, ); const signedIdentityKeysBlob: ?SignedIdentityKeysBlob = useSignedIdentityKeysBlob(); const callSIWEAuthEndpoint = React.useCallback( - (message: string, signature: string, extraInfo) => { + async (message: string, signature: string, extraInfo) => { invariant( signedIdentityKeysBlob, 'signedIdentityKeysBlob must be set in attemptSIWEAuth', ); - return siweAuthCall({ - message, - signature, - signedIdentityKeysBlob, - ...extraInfo, - }); + try { + return await siweAuthCall({ + message, + signature, + signedIdentityKeysBlob, + doNotRegister: true, + ...extraInfo, + }); + } catch (e) { + if ( + e instanceof ServerError && + e.message === 'account_does_not_exist' + ) { + setError('account_does_not_exist'); + } + throw e; + } }, [signedIdentityKeysBlob, siweAuthCall], ); const attemptSIWEAuth = React.useCallback( (message: string, signature: string) => { const extraInfo = logInExtraInfo(); return dispatchActionPromise( siweAuthActionTypes, callSIWEAuthEndpoint(message, signature, extraInfo), undefined, ({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload), ); }, [callSIWEAuthEndpoint, dispatchActionPromise, logInExtraInfo], ); const dispatch = useDispatch(); const onSignInButtonClick = React.useCallback(async () => { invariant(signer, 'signer must be present during SIWE attempt'); invariant(siweNonce, 'nonce must be present during SIWE attempt'); invariant( primaryIdentityPublicKeys, 'primaryIdentityPublicKeys must be present during SIWE attempt', ); const statement = getSIWEStatementForPublicKey( primaryIdentityPublicKeys.ed25519, ); const message = createSIWEMessage(address, statement, siweNonce); const signature = await signer.signMessage(message); await attemptSIWEAuth(message, signature); dispatch({ type: setDataLoadedActionType, payload: { dataLoaded: true, }, }); }, [ address, attemptSIWEAuth, primaryIdentityPublicKeys, signer, siweNonce, dispatch, ]); const { cancelSIWEAuthFlow } = props; const backButtonColor = React.useMemo( () => ({ backgroundColor: '#211E2D' }), [], ); const signInButtonColor = React.useMemo( () => ({ backgroundColor: '#6A20E3' }), [], ); + const [error, setError] = React.useState(); + + const mainMiddleAreaClassName = classNames({ + [css.mainMiddleArea]: true, + [css.hidden]: !!error, + }); + const errorOverlayClassNames = classNames({ + [css.errorOverlay]: true, + [css.hidden]: !error, + }); + if ( siweAuthLoadingStatus === 'loading' || !siweNonce || !primaryIdentityPublicKeys || !signedIdentityKeysBlob ) { return (
); } + let errorText; + if (error === 'account_does_not_exist') { + errorText = ( + <> +

+ No Comm account found for that Ethereum wallet! +

+

+ We require that users register on their mobile devices. Comm relies on + a primary device capable of scanning QR codes in order to authorize + secondary devices. +

+

+ You can install our iOS app  + + here + + , or our Android app  + + here + + . +

+ + ); + } + return (

Sign in with Ethereum

Wallet Connected

-
-

{siweMessageSigningExplanationStatements}

-

- By signing up, you agree to our{' '} - Terms of Use &{' '} - Privacy Policy. -

+
+
+
+

{siweMessageSigningExplanationStatements}

+

+ By signing up, you agree to our{' '} + Terms of Use &{' '} + Privacy Policy. +

+
+ +
+
{errorText}
-
); } export default SIWELoginForm; diff --git a/web/account/siwe.css b/web/account/siwe.css index 5e4526891..26278dd47 100644 --- a/web/account/siwe.css +++ b/web/account/siwe.css @@ -1,40 +1,66 @@ div.ethereumLogoContainer { display: flex; justify-content: center; align-content: center; margin: 0 4px; } div.siweLoginFormContainer p { color: white; font-family: sans-serif; font-size: 15px; } div.messageSigningStatements p { padding-bottom: 20px; } div.siweLoginFormContainer { display: flex; flex-direction: column; } div.walletConnectedText p { font-weight: bold; } div.connectButtonContainer { padding-top: 4px; padding-bottom: 12px; } div.loadingIndicator { display: flex; justify-content: center; } div.siweContainer { display: flex; flex-direction: column; } + +div.middleArea { + position: relative; +} +div.mainMiddleArea { + display: flex; + flex-direction: column; +} +div.errorOverlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + flex-direction: column; + justify-content: center; + gap: 12px; +} +div.hidden { + visibility: hidden; +} + +div.siweLoginFormContainer p.redText { + color: var(--error-primary); +}