Update all examples and README

with-webbrowser-redirect/README.md

@@ -1,11 +1,5 @@
 # WebBrowser Redirect Example
 
-Try it at https://expo.io/@documentation/webbrowser-redirect-example
-
-## How to use
-
-- Use [this link](https://snack.expo.io/@documentation/webbrowser-redirect-example) to open this project in your browser using Snack
-
 ### Running the app
 
 - `cd` into the `app` directory and run `yarn` or `npm install`
@@ -13,13 +7,4 @@ Try it at https://expo.io/@documentation/webbrowser-redirect-example
 
 ## The idea behind the example
 
-It's common to use the WebBrowser module, powered by
-SFSafariViewController on iOS and Chrome Custom Tabs on Android, for
-authentication. This is because it shares cookies with Safari and Chrome
-respecitvely, so any site that you are already logged into on your web
-browser will also be authenticated in the browser. Additionally, it is
-more secure than a WebView because the developer cannot inject code. In
-order to get data back from the WebBrowser, the website needs to
-explicitly redirect back to your app and provide the data in the url.
-This demonstrates how to do that, and how to extract the data from the
-url in your app.
+It's common to use the WebBrowser module, powered by SFSafariViewController and SFAuthenticationSession on iOS and Chrome Custom Tabs on Android to pass information back from a website to an app. A typical use case for this is authentication, because if you use a web browser authentication session it will share cookies with Safari and Chrome respecitvely, so any site that you are already logged into on your web browser will also be authenticated in the browser. Additionally, it is more secure than a WebView because the developer cannot inject code. Apple will also reject your app if you use a WebView for authentication - you need to use SFSafariAuthenticationSession (WebBrowser.openAuthSessionAsync). In order to get data back from the WebBrowser, the website needs to explicitly redirect back to your app and provide the data in the url. This demonstrates how to do that, and how to extract the data from the url in your app with both WebBrowser.openAuthSessionAsync and WebBrowser.openBrowserAsync.

with-webbrowser-redirect/app/App.js

@@ -1,6 +1,7 @@
-import { Linking, WebBrowser } from 'expo';
 import React from 'react';
 import { Button, StyleSheet, Text, View } from 'react-native';
+import { Linking } from 'expo';
+import * as WebBrowser from 'expo-web-browser';
 
 export default class App extends React.Component {
   state = {
@@ -13,8 +14,13 @@ export default class App extends React.Component {
         <Text style={styles.header}>Redirect Example</Text>
 
         <Button
-          onPress={this._openWebBrowserAsync}
-          title="Tap here to try it out"
+          onPress={this._openBrowserAsync}
+          title="Tap here to try it out with openBrowserAsync"
+        />
+
+        <Button
+          onPress={this._openAuthSessionAsync}
+          title="Tap here to try it out with openAuthSessionAsync"
         />
 
         {this._maybeRenderRedirectData()}
@@ -30,7 +36,30 @@ export default class App extends React.Component {
     this.setState({ redirectData: data });
   };
 
-  _openWebBrowserAsync = async () => {
+  // openAuthSessionAsync doesn't require that you add Linking listeners, it
+  // returns the redirect URL in the resulting Promise
+  _openAuthSessionAsync = async () => {
+    try {
+      let result = await WebBrowser.openAuthSessionAsync(
+        // We add `?` at the end of the URL since the test backend that is used
+        // just appends `authToken=<token>` to the URL provided.
+        `https://backend-xxswjknyfi.now.sh/?linkingUri=${Linking.makeUrl('/?')}`
+      );
+      let redirectData;
+      if (result.url) {
+        redirectData = Linking.parse(result.url);
+      }
+      this.setState({ result, redirectData });
+    } catch (error) {
+      alert(error);
+      console.log(error);
+    }
+  };
+
+  // openBrowserAsync requires that you subscribe to Linking events and the
+  // resulting Promise only contains information about whether it was canceled
+  // or dismissed
+  _openBrowserAsync = async () => {
     try {
       this._addLinkingListener();
       let result = await WebBrowser.openBrowserAsync(
@@ -59,7 +88,11 @@ export default class App extends React.Component {
       return;
     }
 
-    return <Text>{JSON.stringify(this.state.redirectData)}</Text>;
+    return (
+      <Text style={{ marginTop: 30 }}>
+        {JSON.stringify(this.state.redirectData)}
+      </Text>
+    );
   };
 }
 

with-webbrowser-redirect/app/app.json

@@ -3,7 +3,7 @@
     "name": "with-webbrowser-redirect",
     "slug": "with-webbrowser-redirect",
     "privacy": "public",
-    "sdkVersion": "32.0.0",
+    "sdkVersion": "35.0.0",
     "version": "1.0.0",
     "orientation": "portrait",
     "primaryColor": "#cccccc",
@@ -14,6 +14,10 @@
     "ios": {
       "supportsTablet": true
     },
-    "scheme": "expo.examples.with-webbrowser-redirect"
+    "scheme": "expo.examples.with-webbrowser-redirect",
+    "platforms": [
+      "android",
+      "ios"
+    ]
   }
-}
+}

with-webbrowser-redirect/app/package.json

@@ -3,8 +3,9 @@
   "private": true,
   "main": "node_modules/expo/AppEntry.js",
   "dependencies": {
-    "expo": "^32.0.0",
-    "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.2.tar.gz"
+    "expo": "^35.0.0",
+    "expo-web-browser": "~7.0.0",
+    "react": "16.8.3",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz"
   }
 }