Use encrypted auth token for images

src/components/AnchorForCommentsOnly/index.js

@@ -5,8 +5,8 @@ import {
     propTypes as anchorForCommentsOnlyPropTypes,
     defaultProps as anchorForCommentsOnlyDefaultProps,
 } from './anchorForCommentsOnlyPropTypes';
-import AnchorWithAuthToken from './AnchorWithAuthToken';
 import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
+import addEncryptedAuthTokenToURL from '../../libs/addEncryptedAuthTokenToURL';
 
 const propTypes = {
     /** Do we need an auth token to view this link or download the remote resource? */
@@ -27,11 +27,12 @@ const defaultProps = {
  */
 const AnchorForCommentsOnly = (props) => {
     const propsToPass = _.omit(props, 'isAuthTokenRequired');
-    return props.isAuthTokenRequired
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        ? <AnchorWithAuthToken {...propsToPass} />
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        : <BaseAnchorForCommentsOnly {...propsToPass} />;
+    if (props.isAuthTokenRequired) {
+        propsToPass.href = addEncryptedAuthTokenToURL(props.href);
+        propsToPass.shouldDownloadFile = true;
+    }
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <BaseAnchorForCommentsOnly {...propsToPass} />;
 };
 
 AnchorForCommentsOnly.propTypes = propTypes;

src/components/AttachmentModal.js

@@ -2,14 +2,12 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import Str from 'expensify-common/lib/str';
-import {withOnyx} from 'react-native-onyx';
 import CONST from '../CONST';
 import Modal from './Modal';
 import AttachmentView from './AttachmentView';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
-import ONYXKEYS from '../ONYXKEYS';
-import addAuthTokenToURL from '../libs/addAuthTokenToURL';
+import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 import compose from '../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import Button from './Button';
@@ -41,11 +39,6 @@ const propTypes = {
     /** Do the urls require an authToken? */
     isAuthTokenRequired: PropTypes.bool,
 
-    /** Current user session */
-    session: PropTypes.shape({
-        authToken: PropTypes.string.isRequired,
-    }).isRequired,
-
     ...withLocalizePropTypes,
 
     ...windowDimensionsPropTypes,
@@ -89,11 +82,9 @@ class AttachmentModal extends PureComponent {
     }
 
     render() {
-        const sourceURL = addAuthTokenToURL({
-            url: this.state.sourceURL,
-            authToken: this.props.session.authToken,
-            required: this.props.isAuthTokenRequired,
-        });
+        const sourceURL = this.props.isAuthTokenRequired
+            ? addEncryptedAuthTokenToURL(this.state.sourceURL)
+            : this.state.sourceURL;
 
         const attachmentViewStyles = this.props.isSmallScreenWidth
             ? [styles.imageModalImageCenterContainer]
@@ -164,10 +155,5 @@ AttachmentModal.propTypes = propTypes;
 AttachmentModal.defaultProps = defaultProps;
 export default compose(
     withWindowDimensions,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    }),
     withLocalize,
 )(AttachmentModal);

src/components/ThumbnailImage.js

@@ -1,10 +1,8 @@
 import React, {PureComponent} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import {withOnyx} from 'react-native-onyx';
-import ONYXKEYS from '../ONYXKEYS';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
-import addAuthTokenToURL from '../libs/addAuthTokenToURL';
+import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 import styles, {getWidthAndHeightStyle} from '../styles/styles';
 
 const propTypes = {
@@ -15,11 +13,6 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
 
-    /** Current user session */
-    session: PropTypes.shape({
-        authToken: PropTypes.string.isRequired,
-    }).isRequired,
-
     /** Do the urls require an authToken? */
     isAuthTokenRequired: PropTypes.bool.isRequired,
 };
@@ -50,11 +43,9 @@ class ThumbnailImage extends PureComponent {
     }
 
     render() {
-        const url = addAuthTokenToURL({
-            url: this.props.previewSourceURL,
-            authToken: this.props.session.authToken,
-            required: this.props.isAuthTokenRequired,
-        });
+        const url = this.props.isAuthTokenRequired
+            ? addEncryptedAuthTokenToURL(this.props.previewSourceURL)
+            : this.props.previewSourceURL;
 
         return (
             <View
@@ -77,8 +68,4 @@ class ThumbnailImage extends PureComponent {
 
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
-export default withOnyx({
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
-})(ThumbnailImage);
+export default ThumbnailImage;

src/libs/API.js

@@ -266,7 +266,10 @@ function reauthenticate(command = '') {
 
             // Update authToken in Onyx and in our local variables so that API requests will use the
             // new authToken
-            Onyx.merge(ONYXKEYS.SESSION, {authToken: response.authToken});
+            Onyx.merge(ONYXKEYS.SESSION, {
+                authToken: response.authToken,
+                encryptedAuthToken: response.encryptedAuthToken,
+            });
             authToken = response.authToken;
 
             // The authentication process is finished so the network can be unpaused to continue

src/libs/actions/Session.js

@@ -25,7 +25,7 @@ function setSuccessfulSignInData(data) {
     PushNotification.register(data.accountID);
     Onyx.merge(ONYXKEYS.SESSION, {
         shouldShowComposeInput: true,
-        ..._.pick(data, 'authToken', 'accountID', 'email'),
+        ..._.pick(data, 'authToken', 'accountID', 'email', 'encryptedAuthToken'),
     });
 }
 
@@ -143,9 +143,10 @@ function fetchAccountDetails(login) {
  * re-authenticating after an authToken expires.
  *
  * @param {String} authToken
+ * @param {String} encryptedAuthToken – Not required for the CreateLogin API call, but passed to setSuccessfulSignInData
  * @param {String} email
  */
-function createTemporaryLogin(authToken, email) {
+function createTemporaryLogin(authToken, encryptedAuthToken, email) {
     const autoGeneratedLogin = Str.guid('expensify.cash-');
     const autoGeneratedPassword = Str.guid();
 
@@ -163,7 +164,7 @@ function createTemporaryLogin(authToken, email) {
                 throw new Error(createLoginResponse.message);
             }
 
-            setSuccessfulSignInData(createLoginResponse);
+            setSuccessfulSignInData({...createLoginResponse, encryptedAuthToken});
 
             // If we have an old generated login for some reason
             // we should delete it before storing the new details
@@ -211,8 +212,8 @@ function signIn(password, twoFactorAuthCode) {
         email: credentials.login,
     })
         .then((authenticateResponse) => {
-            const {authToken, email} = authenticateResponse;
-            createTemporaryLogin(authToken, email);
+            const {authToken, encryptedAuthToken, email} = authenticateResponse;
+            createTemporaryLogin(authToken, encryptedAuthToken, email);
         })
         .catch((error) => {
             Onyx.merge(ONYXKEYS.ACCOUNT, {error: error.message, loading: false});
@@ -256,7 +257,7 @@ function setPassword(password, validateCode, accountID) {
     })
         .then((response) => {
             if (response.jsonCode === 200) {
-                createTemporaryLogin(response.authToken, response.email);
+                createTemporaryLogin(response.authToken, response.encryptedAuthToken, response.email);
                 return;
             }
 

src/libs/addEncryptedAuthTokenToURL.js

@@ -0,0 +1,19 @@
+import lodashGet from 'lodash/get';
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../ONYXKEYS';
+
+let encryptedAuthToken = '';
+Onyx.connect({
+    key: ONYXKEYS.SESSION,
+    callback: session => encryptedAuthToken = lodashGet(session, 'encryptedAuthToken', ''),
+});
+
+/**
+ * Add encryptedAuthToken to this attachment URL
+ *
+ * @param {String} url
+ * @returns {String}
+ */
+export default function (url) {
+    return `${url}?encryptedAuthToken=${encryptedAuthToken}`;
+}

src/libs/migrateOnyx.js

@@ -1,3 +1,4 @@
+import AddEncryptedAuthToken from './migrations/AddEncryptedAuthToken';
 import RenameActiveClientsKey from './migrations/RenameActiveClientsKey';
 import RenamePriorityModeKey from './migrations/RenamePriorityModeKey';
 
@@ -10,6 +11,7 @@ export default function () {
         const migrationPromises = [
             RenameActiveClientsKey,
             RenamePriorityModeKey,
+            AddEncryptedAuthToken,
         ];
 
         // Reduce all promises down to a single promise. All promises run in a linear fashion, waiting for the

src/libs/migrations/AddEncryptedAuthToken.js

@@ -0,0 +1,41 @@
+import _ from 'underscore';
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+import {reauthenticate} from '../API';
+
+/**
+ * This migration adds an encryptedAuthToken to the SESSION key, if it is not present.
+ *
+ * @returns {Promise}
+ */
+export default function () {
+    return new Promise((resolve) => {
+        const connectionID = Onyx.connect({
+            key: ONYXKEYS.SESSION,
+            callback: (session) => {
+                Onyx.disconnect(connectionID);
+
+                if (session && !_.isEmpty(session.encryptedAuthToken)) {
+                    console.debug('[Migrate Onyx] Skipped migration AddEncryptedAuthToken');
+                    return resolve();
+                }
+
+                if (!session || !session.authToken) {
+                    console.debug('[Migrate Onyx] Skipped migration AddEncryptedAuthToken');
+                    return resolve();
+                }
+
+                // If there is an auth token but no encrypted auth token, reauthenticate.
+                if (session.authToken && _.isUndefined(session.encryptedAuthToken)) {
+                    return reauthenticate('Onyx_Migration_AddEncryptedAuthToken')
+                        .then(() => {
+                            console.debug('[Migrate Onyx] Ran migration AddEncryptedAuthToken');
+                            return resolve();
+                        });
+                }
+
+                return resolve();
+            },
+        });
+    });
+}