diff --git a/apps/i18n/common/en_us.json b/apps/i18n/common/en_us.json
index 8ab1301d0d7b7..d750bfc729b8d 100644
--- a/apps/i18n/common/en_us.json
+++ b/apps/i18n/common/en_us.json
@@ -1007,8 +1007,10 @@
   "shareSettingDisableDialogNote": "Note that students will still be able to share projects created using the programming tools designed for younger students like Play Lab and Artist. These tools limit what students can create and do not allow for uploading any of their own assets. To protect students’ privacy, shared creations in the project gallery are labeled only with the first letter of a student’s name and an age range.",
   "shareSettingMoreDetailsTooltip": "App Lab / Game Lab / Web Lab sharing enabled?",
   "shareWarningsAge": "Please provide your age below and click OK to continue.",
-  "shareWarningsMoreInfo": "Our Privacy Policy",
-  "shareWarningsStoreData": "This app built on Code Studio stores data that could be viewed by anyone with this sharing link, so avoid providing personal information about yourself or others.",
+  "shareWarningsMoreInfo": "Code.org Privacy Policy",
+  "shareWarningsStoreDataBeforeHighlight": "This app built on Code Studio stores data that can be viewed by anyone with access to this project, so ",
+  "shareWarningsStoreDataHighlight": "avoid providing personal information about yourself or others",
+  "shareWarningsStoreDataAfterHighlight": ".",
   "sharingAgePrompt": "Please select an age.",
   "sharingBlockedByTeacher": "Sorry, you do not have permissions to share this project. If you want to be able to share your project, please ask your teacher to enable sharing of App Lab / Game Lab / Web Lab projects for your section from the 'Manage students' tab in their dashboard. They can do this by adding the project sharing column from the Actions settings menu.",
   "show": "Show",
diff --git a/apps/src/applab/Exporter.js b/apps/src/applab/Exporter.js
index 0029c62144182..e949460089d9e 100644
--- a/apps/src/applab/Exporter.js
+++ b/apps/src/applab/Exporter.js
@@ -14,10 +14,12 @@ import exportFontAwesomeCssEjs from '../templates/export/fontAwesome.css.ejs';
 import exportExpoIndexEjs from '../templates/export/expo/index.html.ejs';
 import exportExpoPackageJson from '../templates/export/expo/package.exported_json';
 import exportExpoAppJsonEjs from '../templates/export/expo/app.json.ejs';
-import exportExpoAppJs from '../templates/export/expo/App.exported_js';
+import exportExpoAppEjs from '../templates/export/expo/App.js.ejs';
 import exportExpoCustomAssetJs from '../templates/export/expo/CustomAsset.exported_js';
+import exportExpoDataWarningJs from '../templates/export/expo/DataWarning.exported_js';
 import exportExpoPackagedFilesEjs from '../templates/export/expo/packagedFiles.js.ejs';
 import exportExpoPackagedFilesEntryEjs from '../templates/export/expo/packagedFilesEntry.js.ejs';
+import exportExpoWarningPng from '../templates/export/expo/warning.png';
 import exportExpoIconPng from '../templates/export/expo/icon.png';
 import exportExpoSplashPng from '../templates/export/expo/splash.png';
 import logToCloud from '../logToCloud';
@@ -139,7 +141,7 @@ const APP_OPTIONS_OVERRIDES = {
   readonlyWorkspace: true,
 };
 
-export function getAppOptionsFile() {
+export function getAppOptionsFile(expoMode) {
   function getAppOptionsAtPath(whitelist, sourceOptions) {
     if (!whitelist || !sourceOptions) {
       return null;
@@ -155,6 +157,14 @@ export function getAppOptionsFile() {
   }
   const options = getAppOptionsAtPath(APP_OPTIONS_WHITELIST, getAppOptions());
   _.merge(options, APP_OPTIONS_OVERRIDES);
+  options.nativeExport = expoMode;
+  if (!expoMode) {
+    // call non-whitelisted hasDataAPIs() function and persist as a bool in
+    // the exported options:
+    const { shareWarningInfo = {} } = getAppOptions();
+    const { hasDataAPIs } = shareWarningInfo;
+    options.exportUsesDataAPIs = hasDataAPIs && hasDataAPIs();
+  }
   return `window.APP_OPTIONS = ${JSON.stringify(options)};`;
 }
 
@@ -230,14 +240,21 @@ function extractCSSFromHTML(el) {
 const fontAwesomeWOFFRelativeSourcePath = '/fonts/fontawesome-webfont.woff2';
 const fontAwesomeWOFFPath = 'applab/fontawesome-webfont.woff2';
 
+function getExportConfigPath() {
+  const baseHref = project.getShareUrl();
+  return `${baseHref}/export_config?script_call=setExportConfig`;
+}
+
 export default {
   exportAppToZip(appName, code, levelHtml, expoMode) {
     const { css, outerHTML } = transformLevelHtml(levelHtml);
 
+    const exportConfigPath = getExportConfigPath();
     const jQueryBaseName = 'jquery-1.12.1.min';
     var html;
     if (expoMode) {
       html = exportExpoIndexEjs({
+        exportConfigPath,
         htmlBody: outerHTML,
         applabApiPath: "applab-api.j",
         jQueryPath: jQueryBaseName + ".j",
@@ -250,6 +267,7 @@ export default {
       });
     } else {
       html = exportProjectEjs({
+        exportConfigPath,
         htmlBody: outerHTML,
         fontPath: fontAwesomeWOFFPath,
       });
@@ -287,6 +305,11 @@ export default {
     });
 
     if (expoMode) {
+      appAssets.push({
+        url: exportExpoWarningPng,
+        zipPath: appName + '/appassets/warning.png',
+        dataType: 'binary',
+      });
       appAssets.push({
         url: exportExpoIconPng,
         zipPath: appName + '/appassets/icon.png',
@@ -307,11 +330,17 @@ export default {
         appName: appName,
         projectId: project.getCurrentId()
       });
+      const { shareWarningInfo = {} } = getAppOptions();
+      const { hasDataAPIs } = shareWarningInfo;
+      const appJs = exportExpoAppEjs({
+        hasDataAPIs: hasDataAPIs && hasDataAPIs(),
+      });
 
       zip.file(appName + "/package.json", exportExpoPackageJson);
       zip.file(appName + "/app.json", appJson);
-      zip.file(appName + "/App.js", exportExpoAppJs);
+      zip.file(appName + "/App.js", appJs);
       zip.file(appName + "/CustomAsset.js", exportExpoCustomAssetJs);
+      zip.file(appName + "/DataWarning.js", exportExpoDataWarningJs);
     }
     // NOTE: for expoMode, it is important that index.html comes first...
     zip.file(mainProjectFilesPrefix + "index.html", rewriteAssetUrls(appAssets, html));
@@ -339,7 +368,7 @@ export default {
       ))).then(
         ([applabApi], [commonLocale], [applabLocale], [applabCSS], [commonCSS], [fontAwesomeWOFF], ...rest) => {
           zip.file(appName + "/" + (expoMode ? "assets/applab-api.j" : rootApplabPrefix + "applab-api.js"),
-                   [getAppOptionsFile(), commonLocale, applabLocale, applabApi].join('\n'));
+                   [getAppOptionsFile(expoMode), commonLocale, applabLocale, applabApi].join('\n'));
           zip.file(mainProjectFilesPrefix + fontAwesomeWOFFPath, fontAwesomeWOFF);
           if (expoMode) {
             const [data] = rest[0];
@@ -453,26 +482,38 @@ export default {
   },
 
   async publishToExpo(appName, code, levelHtml) {
-    const appOptionsJs = getAppOptionsFile();
+    const appOptionsJs = getAppOptionsFile(true);
     const { css, outerHTML } = transformLevelHtml(levelHtml);
     const fontAwesomeCSS = exportFontAwesomeCssEjs({fontPath: fontAwesomeWOFFPath});
+    const exportConfigPath = getExportConfigPath();
+    const { origin } = window.location;
+    const applabApiPath = getEnvironmentPrefix() === 'cdo-development' ?
+        `${origin}/blockly/js/applab-api.js` :
+        `${origin}/blockly/js/applab-api.min.js`;
     const html = exportExpoIndexEjs({
+      exportConfigPath,
       htmlBody: outerHTML,
-      commonLocalePath: "https://studio.code.org/blockly/js/en_us/common_locale.js",
-      applabLocalePath: "https://studio.code.org/blockly/js/en_us/applab_locale.js",
+      commonLocalePath: `${origin}/blockly/js/en_us/common_locale.js`,
+      applabLocalePath: `${origin}/blockly/js/en_us/applab_locale.js`,
       appOptionsPath: "appOptions.j",
       fontPath: fontAwesomeWOFFPath,
-      applabApiPath: "https://studio.code.org/blockly/js/applab-api.min.js",
+      applabApiPath,
       jQueryPath: "https://code.jquery.com/jquery-1.12.1.min.js",
-      commonCssPath: "https://studio.code.org/blockly/css/common.css",
-      applabCssPath: "https://studio.code.org/blockly/css/applab.css",
+      commonCssPath: `${origin}/blockly/css/common.css`,
+      applabCssPath: `${origin}/blockly/css/applab.css`,
+    });
+    const { shareWarningInfo = {} } = getAppOptions();
+    const { hasDataAPIs } = shareWarningInfo;
+    const appJs = exportExpoAppEjs({
+      hasDataAPIs: hasDataAPIs && hasDataAPIs(),
     });
 
     const appAssets = generateAppAssets({ html, code });
 
     const files = {
-      'App.js': { contents: exportExpoAppJs, type: 'CODE'},
+      'App.js': { contents: appJs, type: 'CODE'},
       'CustomAsset.js': { contents: exportExpoCustomAssetJs, type: 'CODE'},
+      'DataWarning.js': { contents: exportExpoDataWarningJs, type: 'CODE'},
     };
 
     const session = new SnackSession({
@@ -508,6 +549,13 @@ export default {
       filename: fontAwesomeWOFFPath,
     });
 
+    appAssets.push({
+      url: exportExpoWarningPng,
+      dataType: 'binary',
+      filename: 'warning.png',
+      assetLocation: 'appassets/',
+    });
+
     const assetDownloads = appAssets.map(asset =>
       download(asset.url, asset.dataType || 'text')
     );
@@ -519,7 +567,7 @@ export default {
     const snackAssetUrls = await Promise.all(assetUploads);
 
     snackAssetUrls.forEach((url, index) => {
-      files['assets/' + appAssets[index].filename] = {
+      files[(appAssets[index].assetLocation || 'assets/') + appAssets[index].filename] = {
         contents: url,
         type: 'ASSET',
       };
@@ -604,7 +652,7 @@ function transformLevelHtml(levelHtml) {
 }
 
 function getEnvironmentPrefix() {
-  const hostname = window.location.hostname;
+  const { hostname } = window.location;
   if (hostname.includes("adhoc")) {
     // As adhoc hostnames may include other keywords, check it first.
     return "cdo-adhoc";
diff --git a/apps/src/applab/api-entry.js b/apps/src/applab/api-entry.js
index a5ebf78d5ae84..b7840a1b3a753 100644
--- a/apps/src/applab/api-entry.js
+++ b/apps/src/applab/api-entry.js
@@ -15,6 +15,8 @@ import {getAppOptions, setAppOptions, setupApp} from '@cdo/apps/code-studio/init
 import {getStore} from '@cdo/apps/redux';
 import {setIsRunning} from '@cdo/apps/redux/runState';
 import {getExportedGlobals} from './export';
+import * as shareWarnings from '../shareWarnings';
+import {navigateToHref} from '../utils';
 window.CDOSounds = Sounds.getSingleton();
 
 const noop = function () {};
@@ -28,15 +30,16 @@ studioApp().highlight = noop;
 Applab.render = noop;
 
 // window.APP_OPTIONS gets generated on the fly by the exporter and appended to this file.
-setAppOptions(Object.assign(window.APP_OPTIONS, {isExported: true}));
+const exportOptions = Object.assign({isExported: true}, window.EXPORT_OPTIONS);
+setAppOptions(Object.assign(window.APP_OPTIONS, exportOptions));
 setupApp(window.APP_OPTIONS);
-loadApplab(getAppOptions());
+const config = getAppOptions();
+loadApplab(config);
 // reset applab turtle manually (normally called when execution begins)
 // before the student's code is run.
 Applab.resetTurtle();
 getStore().dispatch(setIsRunning(true));
 
-
 // Expose api functions globally, unless they already exist
 // in which case they are probably browser apis that we should
 // not overwrite... unless they are in a whitelist of browser
@@ -50,26 +53,30 @@ for (let key in globalApi) {
   }
 }
 
-const STORAGE_COMMANDS = [
-  'createRecord',
-  'readRecords',
-  'updateRecord',
-  'deleteRecord',
-  'onRecordEvent',
-  'getKeyValue',
-  'setKeyValue',
-  'getKeyValueSync',
-  'setKeyValueSync',
-];
-
-for (let key in STORAGE_COMMANDS) {
-  STORAGE_COMMANDS[key] = function () {
-    console.error("Data APIs are not available outside of code studio.");
-  };
-}
-
 // Set up an error handler for student errors and warnings.
 injectErrorHandler(new JavaScriptModeErrorHandler(
   () => Applab.JSInterpreter,
   Applab
 ));
+
+function __start() {
+  var script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = 'code.js';
+  document.getElementsByTagName("head")[0].appendChild(script);
+}
+
+if (!config.nativeExport) {
+  document.addEventListener('DOMContentLoaded', () => {
+    if (config.exportUsesDataAPIs) {
+      shareWarnings.checkSharedAppWarnings({
+        channelId: config.channel,
+        hasDataAPIs: () => ( true ),
+        onWarningsComplete: __start,
+        onTooYoung: () => ( navigateToHref('https://studio.code.org/too_young') ),
+      });
+    } else {
+      __start();
+    }
+  });
+}
diff --git a/apps/src/code-studio/components/AdvancedShareOptions.jsx b/apps/src/code-studio/components/AdvancedShareOptions.jsx
index 97b326ca4596c..f4d0eec2f0398 100644
--- a/apps/src/code-studio/components/AdvancedShareOptions.jsx
+++ b/apps/src/code-studio/components/AdvancedShareOptions.jsx
@@ -193,7 +193,6 @@ class AdvancedShareOptions extends React.Component {
         <p style={style.p}>
           Export your project as a zipped file, which will contain the
           HTML/CSS/JS files, as well as any assets, for your project.
-          Note that data APIs will not work outside of Code Studio.
         </p>
         <button onClick={this.downloadExport} style={{marginLeft: 0}}>
           {spinner}
@@ -227,7 +226,6 @@ class AdvancedShareOptions extends React.Component {
       <div>
         <p style={style.p}>
           Try running your project in the Expo app on iOS or Android.
-          Note that data APIs will not work outside of Code Studio.
           You can also export for submission to the Apple App Store or the
           Google Play Store (both require following our step-by-step guide).
         </p>
diff --git a/apps/src/templates/ShareWarnings.jsx b/apps/src/templates/ShareWarnings.jsx
index 52f8adca3eeb9..e2075c85a6e0b 100644
--- a/apps/src/templates/ShareWarnings.jsx
+++ b/apps/src/templates/ShareWarnings.jsx
@@ -5,10 +5,21 @@ import AgeDropdown from './AgeDropdown';
 import commonMsg from '@cdo/locale';
 
 const styles = {
+  ageDropdown: {
+    fontSize: 14,
+    width: 220,
+    height: 30,
+    lineHeight: '30px',
+    marginBottom: 10,
+  },
   dataMessage: {
     fontSize: 18,
+    lineHeight: '21px',
     marginBottom: 30
   },
+  dataMessageHighlight: {
+    backgroundColor: 'yellow',
+  },
   ageMessage: {
     fontSize: 18,
     marginBottom: 10
@@ -62,12 +73,18 @@ const ShareWarnings = React.createClass({
     return (
       <div>
         {this.props.showStoreDataAlert &&
-          <div style={styles.dataMessage}>{commonMsg.shareWarningsStoreData()}</div>
+          <div style={styles.dataMessage}>
+            {commonMsg.shareWarningsStoreDataBeforeHighlight()}
+            <span style={styles.dataMessageHighlight}>
+              {commonMsg.shareWarningsStoreDataHighlight()}
+            </span>
+            {commonMsg.shareWarningsStoreDataAfterHighlight()}
+          </div>
         }
         {this.props.promptForAge &&
           <div>
             <div style={styles.ageMessage}>{commonMsg.shareWarningsAge()}</div>
-            <AgeDropdown style={styles.ageDropdonw} ref="age"/>
+            <AgeDropdown style={styles.ageDropdown} ref="age"/>
           </div>
         }
         <div>
diff --git a/apps/src/templates/export/expo/App.exported_js b/apps/src/templates/export/expo/App.js.ejs
similarity index 75%
rename from apps/src/templates/export/expo/App.exported_js
rename to apps/src/templates/export/expo/App.js.ejs
index b8cf32dd7dd1e..f802363e6473a 100644
--- a/apps/src/templates/export/expo/App.exported_js
+++ b/apps/src/templates/export/expo/App.js.ejs
@@ -1,8 +1,9 @@
 import React from 'react';
 import { AppLoading } from 'expo';
-import { Platform, StyleSheet, View, WebView } from 'react-native';
+import { AsyncStorage, Platform, StyleSheet, View, WebView } from 'react-native';
 
 import CustomAsset from './CustomAsset';
+import DataWarning from './DataWarning';
 import packagedFiles from './packagedFiles';
 
 export default class App extends React.Component {
@@ -12,13 +13,30 @@ export default class App extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+<% if (!hasDataAPIs) { -%>
+      age: DataWarning.AGE_MINIMUM,
+<% } -%>
+    };
   }
 
   componentDidMount() {
     this.prepareAssets();
+    this.checkAge();
   }
 
+<% if (hasDataAPIs) { -%>
+  checkAge = async () => {
+    try {
+      const age = await AsyncStorage.getItem(DataWarning.AGE_KEY);
+      this.setState({ age });
+    } catch (e) {
+    }
+  };
+<% } else { -%>
+  checkAge = () => {};
+<% } -%>
+
   async prepareAssets() {
     const downloadAssets = packagedFiles.map(({ module, fileName }) =>
       CustomAsset.fromModule(module, fileName)
@@ -56,7 +74,13 @@ export default class App extends React.Component {
   }
 
   render() {
-    const { height, indexUri } = this.state;
+    const { age, height, indexUri } = this.state;
+
+    if (!age || age < DataWarning.AGE_MINIMUM) {
+      return (
+        <DataWarning onComplete={this.checkAge} />
+      );
+    }
 
     if (!indexUri) {
       return (
diff --git a/apps/src/templates/export/expo/DataWarning.exported_js b/apps/src/templates/export/expo/DataWarning.exported_js
new file mode 100644
index 0000000000000..33fc13db8992b
--- /dev/null
+++ b/apps/src/templates/export/expo/DataWarning.exported_js
@@ -0,0 +1,297 @@
+import React, { Component } from 'react';
+import {
+  AsyncStorage,
+  Dimensions,
+  Image,
+  Linking,
+  Picker,
+  Text,
+  TouchableOpacity,
+  View,
+  SafeAreaView,
+  StyleSheet,
+} from 'react-native';
+import PropTypes from 'prop-types';
+
+export default class DataWarning extends Component {
+  state = { };
+
+  propTypes = {
+    onComplete: PropTypes.func,
+  };
+
+  static AGE_KEY = '@ApplabApp:age';
+  static AGE_MINIMUM = 13;
+  static SMALL_SCREEN_WIDTH = 320;
+
+  async componentDidMount() {
+    const age = await AsyncStorage.getItem(DataWarning.AGE_KEY);
+    if (!age) {
+      return;
+    }
+
+    this.setState({
+      age,
+      ageLocked: true,
+      ageText: this.ageTextFromAge(age),
+    });
+    if (age >= DataWarning.AGE_MINIMUM) {
+      onComplete && onComplete();
+    }
+  }
+
+  onPressAge = () => {
+    this.setState({ picking: true });
+  };
+
+  onPressDone = () => {
+    this.setState({ picking: false });
+  };
+
+  onAgeChange = (itemValue) => {
+    this.setState({ age: itemValue, ageText: this.ageTextFromAge(itemValue) });
+  };
+
+  onPressPrivacy = () => {
+    Linking.openURL('https://code.org/privacy');
+  };
+
+  ageTextFromAge(age) {
+    return age == 21 ? '21+' : age;
+  }
+
+  onPressOK = async () => {
+    const { onComplete } = this.props;
+    const { age } = this.state;
+    try {
+      await AsyncStorage.setItem(DataWarning.AGE_KEY, age);
+    } catch (e) {
+    }
+    if (!age) {
+      return;
+    }
+    this.setState({ ageLocked: true });
+    if (age >= DataWarning.AGE_MINIMUM) {
+      onComplete && onComplete();
+    }
+  };
+
+  renderTooYoung() {
+    return (
+      <SafeAreaView style={styles.background}>
+        <View style={[styles.container, styles.containerTooYoung]}>
+          <Text style={styles.paragraph}>
+            Sorry, you cannot access this content.
+          </Text>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  render() {
+    const { age, ageLocked, ageText, picking } = this.state;
+    if (ageLocked && age < DataWarning.AGE_MINIMUM) {
+      return this.renderTooYoung();
+    }
+    const { height, width } = Dimensions.get('window');
+    const smallScreen = Math.min(height, width) <= DataWarning.SMALL_SCREEN_WIDTH;
+    const paragraphStyle = smallScreen ? styles.paragraphSmallScreen : styles.paragraph;
+    const ageSelected = !!ageText;
+    return [
+      (<SafeAreaView style={styles.background} key="background">
+        <View style={styles.container}>
+          <View style={styles.topWarningContainer}>
+            <Image
+              source={require('./appassets/warning.png')}
+              style={styles.warningImage}
+            />
+            <Text style={[paragraphStyle, styles.topWarning]}>
+              Warning
+            </Text>
+          </View>
+          <Text style={paragraphStyle}>
+            This app was built on Code.org by a student. The Code.org platform is optimized for creating prototypes and student projects, and as a result any data you enter while using the app could potentially be viewed by anyone with access to the app on any platform or website where this app is shared.
+            {'\n'}
+            {'\n'}
+            <Text style={[paragraphStyle, styles.warning]}>While using this app please do not enter any private information</Text> (such as your name, email, or street address). Any data you enter may be broadly accessible to the public.
+            {'\n'}
+            {'\n'}
+            Please provide your age below and click OK to continue.
+          </Text>
+          <TouchableOpacity onPress={this.onPressAge} style={styles.ageContainer}>
+            <Text style={paragraphStyle}>
+              {ageSelected ? ageText : 'Select Age'}
+            </Text>
+          </TouchableOpacity>
+          <View style={styles.okContainer}>
+            <TouchableOpacity onPress={this.onPressPrivacy}>
+              <Text style={[paragraphStyle, styles.privacy]}>
+                Code.org Privacy Policy
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              disabled={!ageSelected}
+              onPress={this.onPressOK}
+              style={[styles.okButtonContainer, ageSelected ? undefined : styles.okButtonContainerDisabled]}
+            >
+              <Text style={styles.okButton}>
+                OK
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </SafeAreaView>),
+      picking && <View style={styles.pickerFullscreen} key="picker">
+        <TouchableOpacity onPress={this.onPressDone} style={styles.pickerDoneContainer}>
+          <Text style={[paragraphStyle, styles.pickingDone]}>
+            Done
+          </Text>
+        </TouchableOpacity>
+        <Picker
+          itemStyle={styles.pickerItem}
+          onValueChange={this.onAgeChange}
+          selectedValue={age}
+          style={styles.picker}
+        >
+          <Picker.Item label="Select Age" />
+          <Picker.Item label="4" value="4" />
+          <Picker.Item label="5" value="5" />
+          <Picker.Item label="6" value="6" />
+          <Picker.Item label="7" value="7" />
+          <Picker.Item label="8" value="8" />
+          <Picker.Item label="9" value="9" />
+          <Picker.Item label="10" value="10" />
+          <Picker.Item label="11" value="11" />
+          <Picker.Item label="12" value="12" />
+          <Picker.Item label="13" value="13" />
+          <Picker.Item label="14" value="14" />
+          <Picker.Item label="15" value="15" />
+          <Picker.Item label="16" value="16" />
+          <Picker.Item label="17" value="17" />
+          <Picker.Item label="18" value="18" />
+          <Picker.Item label="19" value="19" />
+          <Picker.Item label="20" value="20" />
+          <Picker.Item label="21+" value="21" />
+        </Picker>
+      </View>
+    ];
+  }
+}
+
+const styles = StyleSheet.create({
+  ageContainer: {
+    alignItems: 'center',
+    borderColor: '#94a9be',
+    borderRadius: 8,
+    borderWidth: 1,
+    flexDirection: 'row',
+    marginTop: 10,
+    minHeight: 40,
+    paddingHorizontal: 10,
+  },
+  background: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-start',
+    backgroundColor: '#444444',
+  },
+  container: {
+    alignItems: 'stretch',
+    backgroundColor: 'white',
+    borderColor: 'white',
+    borderRadius: 18,
+    borderWidth: 18,
+    flex: 1,
+    justifyContent: 'flex-start',
+    margin: 6,
+    paddingTop: 6,
+  },
+  containerTooYoung: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  okButton: {
+    color: 'white',
+    fontFace: 'sans-serif',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  okButtonContainer: {
+    alignItems: 'center',
+    backgroundColor: '#ffa400',
+    borderRadius: 6,
+    justifyContent: 'center',
+    height: 40,
+    minWidth: 65,
+  },
+  okButtonContainerDisabled: {
+    backgroundColor: '#ffa4006f',
+  },
+  okContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 20,
+  },
+  paragraph: {
+    fontFace: 'sans-serif',
+    fontSize: 16,
+    lineHeight: 24,
+    textAlign: 'left',
+    color: '#34495e',
+  },
+  paragraphSmallScreen: {
+    fontFace: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 18,
+    textAlign: 'left',
+    color: '#34495e',
+  },
+  picker: {
+    backgroundColor: 'white',
+  },
+  pickerDoneContainer: {
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderColor: '#94a9be',
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    minHeight: 40,
+    paddingHorizontal: 10,
+  },
+  pickerFullscreen: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    backgroundColor: '#000000af',
+  },
+  pickerItem: {
+    fontFace: 'sans-serif',
+    color: 'black',
+  },
+  pickingDone: {
+    textAlign: 'right',
+    fontWeight: 'bold',
+  },
+  privacy: {
+    color: '#00adbd',
+    fontWeight: '900',
+  },
+  topWarning: {
+    fontSize: 26,
+    fontWeight: 'bold',
+  },
+  topWarningContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginBottom: 20,
+  },
+  warning: {
+    fontWeight: 'bold',
+    textDecorationLine: 'underline',
+  },
+  warningImage: {
+    height: 50,
+    width: 50,
+    marginRight: 15,
+  },
+});
diff --git a/apps/src/templates/export/expo/index.html.ejs b/apps/src/templates/export/expo/index.html.ejs
index 8ddcbc9e5b2ca..edfbf1fc7c146 100644
--- a/apps/src/templates/export/expo/index.html.ejs
+++ b/apps/src/templates/export/expo/index.html.ejs
@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=320, minimal-ui, target-densityDpi=device-dpi, user-scalable=no">
     <link rel="preload" href="<%- fontPath %>" as="font" type="font/woff2">
     <script src="<%- jQueryPath %>"></script>
+    <script>
+      function setExportConfig(config) { window.EXPORT_OPTIONS = config; }
+    </script>
+    <script src="<%- exportConfigPath %>"></script>
   <% if (appOptionsPath) { -%>
     <script src="<%- appOptionsPath %>"></script>
   <% } -%>
diff --git a/apps/src/templates/export/expo/warning.png b/apps/src/templates/export/expo/warning.png
new file mode 100644
index 0000000000000..d1ac7fa92c572
Binary files /dev/null and b/apps/src/templates/export/expo/warning.png differ
diff --git a/apps/src/templates/export/project.html.ejs b/apps/src/templates/export/project.html.ejs
index acad1f59fe7fd..c2b65f3fd3906 100644
--- a/apps/src/templates/export/project.html.ejs
+++ b/apps/src/templates/export/project.html.ejs
@@ -5,12 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="preload" href="<%- fontPath %>" as="font">
     <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
+    <script>
+      function setExportConfig(config) { window.EXPORT_OPTIONS = config; }
+    </script>
+    <script src="<%- exportConfigPath %>"></script>
     <script src="applab/applab-api.js"></script>
     <link rel="stylesheet" href="applab/applab.css">
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <%- htmlBody %>
-    <script src="code.js"></script>
   </body>
 </html>
diff --git a/apps/test/unit/applab/ExporterTest.js b/apps/test/unit/applab/ExporterTest.js
index 07d56a73398fc..85fc81d8c8d88 100644
--- a/apps/test/unit/applab/ExporterTest.js
+++ b/apps/test/unit/applab/ExporterTest.js
@@ -464,10 +464,12 @@ describe('The Exporter,', function () {
           'my-app/',
           'my-app/App.js',
           'my-app/CustomAsset.js',
+          'my-app/DataWarning.js',
           'my-app/app.json',
           'my-app/appassets/',
           'my-app/appassets/icon.png',
           'my-app/appassets/splash.png',
+          'my-app/appassets/warning.png',
           'my-app/assets/',
           'my-app/assets/README.txt',
           'my-app/assets/applab-api.j',
@@ -497,7 +499,7 @@ describe('The Exporter,', function () {
         assert.property(zipFiles, 'my-app/assets/applab-api.j');
         assert.equal(
           zipFiles['my-app/assets/applab-api.j'],
-          `${getAppOptionsFile()}\n${COMMON_LOCALE_JS_CONTENT}\n${APPLAB_LOCALE_JS_CONTENT}\n${APPLAB_API_JS_CONTENT}`
+          `${getAppOptionsFile(true)}\n${COMMON_LOCALE_JS_CONTENT}\n${APPLAB_LOCALE_JS_CONTENT}\n${APPLAB_API_JS_CONTENT}`
         );
       });
 
diff --git a/apps/test/unit/shareWarningsDialogTest.js b/apps/test/unit/shareWarningsDialogTest.js
index 08bde7411c3f0..427f468578751 100644
--- a/apps/test/unit/shareWarningsDialogTest.js
+++ b/apps/test/unit/shareWarningsDialogTest.js
@@ -20,8 +20,8 @@ describe('ShareWarningsDialog', function () {
     return dom.tagName === tagName && dom.innerHTML === text;
   }
 
-  function isDataPromptDiv(childComponent) {
-    return isTagWithText(childComponent, 'DIV', msg.shareWarningsStoreData());
+  function isDataPromptHighlightSpan(childComponent) {
+    return isTagWithText(childComponent, 'SPAN', msg.shareWarningsStoreDataHighlight());
   }
 
   function isAgeDiv(childComponent) {
@@ -41,13 +41,13 @@ describe('ShareWarningsDialog', function () {
     var shareWarnings = ReactTestUtils.scryRenderedComponentsWithType(
       componentInstance, ShareWarnings)[0];
 
-    var dataPromptDivs = ReactTestUtils.findAllInRenderedTree(shareWarnings,
-      isDataPromptDiv);
+    var dataPromptSpans = ReactTestUtils.findAllInRenderedTree(shareWarnings,
+      isDataPromptHighlightSpan);
     var ageDivs = ReactTestUtils.findAllInRenderedTree(shareWarnings, isAgeDiv);
     var ageDropdowns = ReactTestUtils.scryRenderedComponentsWithType(shareWarnings,
       AgeDropdown);
 
-    assert.strictEqual(dataPromptDivs.length, 0, 'zero data prompt divs');
+    assert.strictEqual(dataPromptSpans.length, 0, 'zero data prompt highlight spans');
     assert.strictEqual(ageDivs.length, 1, 'one age div');
     assert.strictEqual(ageDropdowns.length, 1, 'one age dropdown div');
   });
@@ -65,13 +65,13 @@ describe('ShareWarningsDialog', function () {
     var shareWarnings = ReactTestUtils.scryRenderedComponentsWithType(
       componentInstance, ShareWarnings)[0];
 
-    var dataPromptDivs = ReactTestUtils.findAllInRenderedTree(shareWarnings,
-      isDataPromptDiv);
+    var dataPromptSpans = ReactTestUtils.findAllInRenderedTree(shareWarnings,
+      isDataPromptHighlightSpan);
     var ageDivs = ReactTestUtils.findAllInRenderedTree(shareWarnings, isAgeDiv);
     var ageDropdowns = ReactTestUtils.scryRenderedComponentsWithType(shareWarnings,
       AgeDropdown);
 
-    assert.strictEqual(dataPromptDivs.length, 1);
+    assert.strictEqual(dataPromptSpans.length, 1);
     assert.strictEqual(ageDivs.length, 0);
     assert.strictEqual(ageDropdowns.length, 0);
   });
@@ -89,13 +89,13 @@ describe('ShareWarningsDialog', function () {
     var shareWarnings = ReactTestUtils.scryRenderedComponentsWithType(
       componentInstance, ShareWarnings)[0];
 
-    var dataPromptDivs = ReactTestUtils.findAllInRenderedTree(shareWarnings,
-      isDataPromptDiv);
+    var dataPromptSpans = ReactTestUtils.findAllInRenderedTree(shareWarnings,
+      isDataPromptHighlightSpan);
     var ageDivs = ReactTestUtils.findAllInRenderedTree(shareWarnings, isAgeDiv);
     var ageDropdowns = ReactTestUtils.scryRenderedComponentsWithType(shareWarnings,
       AgeDropdown);
 
-    assert.strictEqual(dataPromptDivs.length, 1);
+    assert.strictEqual(dataPromptSpans.length, 1);
     assert.strictEqual(ageDivs.length, 1);
     assert.strictEqual(ageDropdowns.length, 1);
   });
diff --git a/dashboard/app/controllers/projects_controller.rb b/dashboard/app/controllers/projects_controller.rb
index 7c263dfe64d8a..a94dd8e19f436 100644
--- a/dashboard/app/controllers/projects_controller.rb
+++ b/dashboard/app/controllers/projects_controller.rb
@@ -2,9 +2,10 @@
 require 'cdo/firehose'
 
 class ProjectsController < ApplicationController
-  before_action :authenticate_user!, except: [:load, :create_new, :show, :edit, :readonly, :redirect_legacy, :public, :index]
+  before_action :authenticate_user!, except: [:load, :create_new, :show, :edit, :readonly, :redirect_legacy, :public, :index, :export_config]
   before_action :authorize_load_project!, only: [:load, :create_new, :edit, :remix]
-  before_action :set_level, only: [:load, :create_new, :show, :edit, :readonly, :remix]
+  before_action :set_level, only: [:load, :create_new, :show, :edit, :readonly, :remix, :export_config]
+  protect_from_forgery except: :export_config
   include LevelsHelper
 
   TEMPLATES = %w(projects).freeze
@@ -375,6 +376,15 @@ def remix
     redirect_to action: 'edit', channel_id: new_channel_id
   end
 
+  def export_config
+    return if redirect_under_13_without_tos_teacher(@level)
+    if params[:script_call]
+      render js: "#{params[:script_call]}(#{firebase_options.to_json});"
+    else
+      render json: firebase_options
+    end
+  end
+
   def set_level
     @level = get_from_cache STANDALONE_PROJECTS[params[:key]][:name]
     @game = @level.game
diff --git a/dashboard/app/helpers/levels_helper.rb b/dashboard/app/helpers/levels_helper.rb
index 83fd46a1afc10..1393b03a1f311 100644
--- a/dashboard/app/helpers/levels_helper.rb
+++ b/dashboard/app/helpers/levels_helper.rb
@@ -420,6 +420,18 @@ def question_options
     app_options
   end
 
+  def firebase_options
+    fb_options = {}
+
+    if @level.game.use_firebase?
+      fb_options[:firebaseName] = CDO.firebase_name
+      fb_options[:firebaseAuthToken] = firebase_auth_token
+      fb_options[:firebaseChannelIdSuffix] = CDO.firebase_channel_id_suffix
+    end
+
+    fb_options
+  end
+
   # Options hash for Blockly
   def blockly_options
     l = @level
@@ -550,11 +562,7 @@ def blockly_options
     app_options[:legacyShareStyle] = true if @legacy_share_style
     app_options[:isMobile] = true if browser.mobile?
     app_options[:labUserId] = lab_user_id if @game == Game.applab || @game == Game.gamelab
-    if @level.game.use_firebase?
-      app_options[:firebaseName] = CDO.firebase_name
-      app_options[:firebaseAuthToken] = firebase_auth_token
-      app_options[:firebaseChannelIdSuffix] = CDO.firebase_channel_id_suffix
-    end
+    app_options.merge!(firebase_options)
     app_options[:canResetAbuse] = true if current_user && current_user.permission?(UserPermission::PROJECT_VALIDATOR)
     app_options[:isSignedIn] = !current_user.nil?
     app_options[:isTooYoung] = !current_user.nil? && current_user.under_13? && current_user.terms_version.nil?
diff --git a/dashboard/config/routes.rb b/dashboard/config/routes.rb
index d4bd5f0b70fc0..6742f62badb99 100644
--- a/dashboard/config/routes.rb
+++ b/dashboard/config/routes.rb
@@ -186,6 +186,7 @@ module OPS
         get "/#{key}/:channel_id/view", to: 'projects#show', key: key.to_s, as: "#{key}_project_view", readonly: true
         get "/#{key}/:channel_id/embed", to: 'projects#show', key: key.to_s, as: "#{key}_project_iframe_embed", iframe_embed: true
         get "/#{key}/:channel_id/remix", to: 'projects#remix', key: key.to_s, as: "#{key}_project_remix"
+        get "/#{key}/:channel_id/export_config", to: 'projects#export_config', key: key.to_s, as: "#{key}_project_export_config"
       end
       get '/angular', to: 'projects#angular'
     end