diff --git a/web/account/log-in-form.react.js b/web/account/log-in-form.react.js
--- a/web/account/log-in-form.react.js
+++ b/web/account/log-in-form.react.js
@@ -1,7 +1,9 @@
 // @flow
 
+import { useConnectModal } from '@rainbow-me/rainbowkit';
 import invariant from 'invariant';
 import * as React from 'react';
+import { useSigner } from 'wagmi';
 
 import { logInActionTypes, logIn } from 'lib/actions/user-actions';
 import { useModalContext } from 'lib/components/modal-provider.react';
@@ -28,10 +30,13 @@
 import { webLogInExtraInfoSelector } from '../selectors/account-selectors';
 import css from './log-in-form.css';
 import PasswordInput from './password-input.react';
+import SIWEButton from './siwe-button.react.js';
 import SIWE from './siwe.react.js';
 
 const loadingStatusSelector = createLoadingStatusSelector(logInActionTypes);
 function LoginForm(): React.Node {
+  const { openConnectModal } = useConnectModal();
+  const { data: signer } = useSigner();
   const inputDisabled = useSelector(loadingStatusSelector) === 'loading';
   const loginExtraInfo = useSelector(webLogInExtraInfoSelector);
   const callLogIn = useServerCall(logIn);
@@ -42,6 +47,10 @@
   const [username, setUsername] = React.useState<string>('');
   const [password, setPassword] = React.useState<string>('');
   const [errorMessage, setErrorMessage] = React.useState<string>('');
+  const [
+    siweAuthFlowSelected,
+    setSIWEAuthFlowSelected,
+  ] = React.useState<boolean>(false);
 
   const usernameInputRef = React.useRef();
 
@@ -127,9 +136,16 @@
     return 'Log in';
   }, [inputDisabled]);
 
+  const onSIWEButtonClick = React.useCallback(() => {
+    setSIWEAuthFlowSelected(true);
+    openConnectModal && openConnectModal();
+  }, [openConnectModal]);
+
   let siwe;
-  if (isDev) {
+  if (isDev && siweAuthFlowSelected && signer) {
     siwe = <SIWE />;
+  } else if (isDev) {
+    siwe = <SIWEButton onSIWEButtonClick={onSIWEButtonClick} />;
   }
 
   return (
@@ -168,6 +184,7 @@
           >
             {loginButtonContent}
           </Button>
+          <hr />
           {siwe}
           <div className={css.modal_form_error}>{errorMessage}</div>
         </div>
diff --git a/web/account/siwe.react.js b/web/account/siwe.react.js
--- a/web/account/siwe.react.js
+++ b/web/account/siwe.react.js
@@ -3,7 +3,7 @@
 import '@rainbow-me/rainbowkit/dist/index.css';
 
 import olm from '@matrix-org/olm';
-import { ConnectButton, useConnectModal } from '@rainbow-me/rainbowkit';
+import { ConnectButton } from '@rainbow-me/rainbowkit';
 import invariant from 'invariant';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
@@ -32,14 +32,12 @@
 import { setPrimaryIdentityPublicKey } from '../redux/primary-identity-public-key-reducer';
 import { useSelector } from '../redux/redux-utils';
 import { webLogInExtraInfoSelector } from '../selectors/account-selectors.js';
-import SIWEButton from './siwe-button.react.js';
 import css from './siwe.css';
 
 const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector(
   getSIWENonceActionTypes,
 );
 function SIWE(): React.Node {
-  const { openConnectModal } = useConnectModal();
   const { address } = useAccount();
   const { data: signer } = useSigner();
   const dispatch = useDispatch();
@@ -52,15 +50,9 @@
   const logInExtraInfo = useSelector(webLogInExtraInfoSelector);
 
   const [siweNonce, setSIWENonce] = React.useState<?string>(null);
-  const [
-    hasSIWEButtonBeenClicked,
-    setHasSIWEButtonBeenClicked,
-  ] = React.useState<boolean>(false);
 
   const siweNonceShouldBeFetched =
-    !siweNonce &&
-    getSIWENonceCallLoadingStatus !== 'loading' &&
-    (signer || hasSIWEButtonBeenClicked);
+    !siweNonce && getSIWENonceCallLoadingStatus !== 'loading';
 
   React.useEffect(() => {
     if (!siweNonceShouldBeFetched) {
@@ -115,6 +107,7 @@
   );
 
   const onSignInButtonClick = React.useCallback(async () => {
+    invariant(signer, 'signer must be present during SIWE attempt');
     invariant(siweNonce, 'nonce must be present during SIWE attempt');
     invariant(
       primaryIdentityPublicKey,
@@ -126,47 +119,29 @@
     attemptSIWEAuth(message, signature);
   }, [address, attemptSIWEAuth, primaryIdentityPublicKey, signer, siweNonce]);
 
-  let siweLoginForm;
-  if (signer && (!siweNonce || !primaryIdentityPublicKey)) {
-    siweLoginForm = (
+  if (!siweNonce || !primaryIdentityPublicKey) {
+    return (
       <div className={css.connectButtonContainer}>
         <LoadingIndicator status="loading" size="medium" />
       </div>
     );
-  } else if (signer) {
-    siweLoginForm = (
-      <div className={css.siweLoginFormContainer}>
-        <div className={css.connectButtonContainer}>
-          <ConnectButton />
-        </div>
-        <p>{siweMessageSigningExplanationStatements[0]}</p>
-        <p>{siweMessageSigningExplanationStatements[1]}</p>
-        <p>
-          By signing up, you agree to our{' '}
-          <a href="https://comm.app/terms">Terms of Use</a> &{' '}
-          <a href="https://comm.app/privacy">Privacy Policy</a>.
-        </p>
-        <Button variant="filled" onClick={onSignInButtonClick}>
-          Sign in
-        </Button>
-      </div>
-    );
   }
 
-  const onSIWEButtonClick = React.useCallback(() => {
-    setHasSIWEButtonBeenClicked(true);
-    openConnectModal && openConnectModal();
-  }, [openConnectModal]);
-
-  let siweButton;
-  if (openConnectModal) {
-    siweButton = <SIWEButton onSIWEButtonClick={onSIWEButtonClick} />;
-  }
   return (
-    <div className={css.siweContainer}>
-      <hr />
-      {siweLoginForm}
-      {siweButton}
+    <div className={css.siweLoginFormContainer}>
+      <div className={css.connectButtonContainer}>
+        <ConnectButton />
+      </div>
+      <p>{siweMessageSigningExplanationStatements[0]}</p>
+      <p>{siweMessageSigningExplanationStatements[1]}</p>
+      <p>
+        By signing up, you agree to our{' '}
+        <a href="https://comm.app/terms">Terms of Use</a> &{' '}
+        <a href="https://comm.app/privacy">Privacy Policy</a>.
+      </p>
+      <Button variant="filled" onClick={onSignInButtonClick}>
+        Sign in
+      </Button>
     </div>
   );
 }