From e4d5cfc8c8a4978933484f0ec08fc560baca69f2 Mon Sep 17 00:00:00 2001
From: Manuel Iglesias <manuelig@amazon.com>
Date: Wed, 6 Feb 2019 00:32:12 -0800
Subject: [PATCH 1/8] Add section for Cognito Hosted UI on React Native

---
 js/authentication.md | 62 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 8 deletions(-)

diff --git a/js/authentication.md b/js/authentication.md
index 00d462b5f69..e095d24f5ee 100644
--- a/js/authentication.md
+++ b/js/authentication.md
@@ -1055,9 +1055,9 @@ There is also `withGoogle`, `withFacebook`, `withAmazon` components, in case you
 
 ### Using Amazon Cognito Hosted UI
 
-Amazon Cognito provides a customizable user experience via the hosted UI. The hosted UI supports OAuth 2.0 and Federated Identities with Facebook, Amazon, Google, and SAML providers. To learn more about Amazon Cognito Hosted UI, please visit [Amazon Cognito Developer Guide](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-configuring-app-integration.html).
+Amazon Cognito provides a customizable user experience via the hosted UI. The hosted UI supports OAuth 2.0 and Federated Identities with Facebook, Amazon, Google, OIDC and SAML providers. To learn more about Amazon Cognito Hosted UI, please visit [Amazon Cognito Developer Guide](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-configuring-app-integration.html).
 
-> ***The Hosted UI support is only available for React / Web***
+> ***The Hosted UI support is only available for React / React Native / Web***
 
 #### Setup your Cognito App Client
 
@@ -1098,6 +1098,9 @@ To setup App Client:
 For example, in *Callback URL(s)*, you can put one url for local development, one for the production. If your app is running in `http://localhost:3000/` in local and `https://www.example.com/` in production, you can put `http://localhost:3000/,https://www.example.com/` under *Callback URL(s)*. Same as the *Signout URL(s)*.
 {: .callout .callout--info}
 
+For React Native applications, you can put one url for local development, one for production. Your urls could look, for example, like this: `exp://127.0.0.1:19000/--/` (generated using [Expo's `Linking` class](https://docs.expo.io/versions/latest/sdk/linking/#linkingmakeurlpath-queryparams)) or this: `myapp://` (See [React Native Linking Docs](https://facebook.github.io/react-native/docs/linking) for more information.).
+{: .callout .callout--info}
+
 - Under the *OAuth 2.0* section, Choose OAuth Flow and OAuth scopes. [To learn more about flows and scopes.](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-idp-settings.html)
 - Select an OAuth Flow. 
 
@@ -1124,7 +1127,7 @@ Note: `openid` is required for `phone`, `email` or `profile`. Also `openid` is r
 
 To configure your application for hosted UI, you need to use *oauth* options:
 
-> ***The Hosted UI support is only available for React / Web***
+> ***The Hosted UI support is only available for React / React Native / Web***
 
 ```javascript
 import Amplify from 'aws-amplify';
@@ -1137,10 +1140,10 @@ const oauth = {
     scope : ['phone', 'email', 'profile', 'openid','aws.cognito.signin.user.admin'], 
 
     // Callback URL
-    redirectSignIn : 'http://www.example.com/signin/', 
+    redirectSignIn : 'http://www.example.com/signin/', // or Linking.makeUrl('/') (expo) or Linking.getInitialURL() (react native)
 
     // Sign out URL
-    redirectSignOut : 'http://www.example.com/signout/',
+    redirectSignOut : 'http://www.example.com/signout/', // or Linking.makeUrl('/') (expo) or Linking.getInitialURL() (react native)
 
     // 'code' for Authorization code grant, 
     // 'token' for Implicit grant
@@ -1170,7 +1173,7 @@ Note: An ID token is only returned if openid scope is requested. The access toke
 
 To invoke the browser to display the hosted UI, you need to construct the URL in your app;
 
-> ***The Hosted UI support is only available for React / Web***
+> ***The Hosted UI support is only available for React / React Native / Web***
 
 ```javascript
 const config = Auth.configure();
@@ -1201,7 +1204,7 @@ window.location.assign(url_to_facebook);
 
 With React, you can use `withOAuth` HOC to launch the hosted UI experience. Just wrap your app's main component with our HOC:
 
-> ***The Hosted UI support is only available for React / Web***
+> ***The Hosted UI support is only available for React/ React Native / Web***
 
 ```javascript
 import { withOAuth } from 'aws-amplify-react';
@@ -1222,7 +1225,7 @@ export default withOAuth(MyApp);
 
 #### Make it work in your App
 
-Here is a code sample of how to integrate it in the React App:
+Here is a code sample of how to integrate it in the React App: (Web)
 ```js
 // App.js
 import React, { Component } from 'react';
@@ -1366,6 +1369,49 @@ class CustomButton extends React.Component {
 export default CustomButton;
 ```
 
+#### Launching the Hosted UI in React Native 
+
+With React Native, you can use `withOAuth` HOC to launch the hosted UI experience. Just wrap your app's main component with our HOC:
+
+> ***The Hosted UI support is only available for React/ React Native / Web***
+
+```javascript
+import { withOAuth } from 'aws-amplify-react-native';
+
+class App extends React.Component {
+  render() {
+    const {
+      oAuthUser: user,
+      oAuthError: error,
+      hostedUISignIn,
+      facebookSignIn,
+      googleSignIn,
+      amazonSignIn,
+      customProviderSignIn,
+      signOut,
+    } = this.props;
+
+    return (
+      <SafeAreaView style={styles.safeArea}>
+        {user && <Button title="Sign Out" onPress={signOut} icon='logout' />}
+        <ScrollView contentContainerStyle={styles.scrollViewContainer}>
+          <Text>{JSON.stringify({ user, error, }, null, 2)}</Text>
+          {!user && <React.Fragment>
+            <Button title="Cognito" onPress={hostedUISignIn} />
+            <Button title="Facebook" onPress={facebookSignIn} />
+            <Button title="Google" onPress={googleSignIn}  />
+            <Button title="Amazon" onPress={amazonSignIn} />
+            <Button title="Yahoo" onPress={() => customProviderSignIn('Yahoo')} /> {/* e.g. for OIDC providers */}
+          </React.Fragment>}
+        </ScrollView>
+      </SafeAreaView>
+    );
+  }
+}
+
+export default withOAuth(App);
+``` 
+
 #### Handling Authentication Events
 
 When using the hosted UI, you can handle authentication events by creating event listeners with the [Hub module]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/js/hub#listening-authentication-events).

From 872cd40a7372e6da724088565e7aacb360849f1e Mon Sep 17 00:00:00 2001
From: Manuel Iglesias <manuelig@amazon.com>
Date: Wed, 6 Feb 2019 08:51:23 -0800
Subject: [PATCH 2/8] Change urls -> URLs

---
 js/authentication.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/authentication.md b/js/authentication.md
index e095d24f5ee..6e178c71b73 100644
--- a/js/authentication.md
+++ b/js/authentication.md
@@ -1098,7 +1098,7 @@ To setup App Client:
 For example, in *Callback URL(s)*, you can put one url for local development, one for the production. If your app is running in `http://localhost:3000/` in local and `https://www.example.com/` in production, you can put `http://localhost:3000/,https://www.example.com/` under *Callback URL(s)*. Same as the *Signout URL(s)*.
 {: .callout .callout--info}
 
-For React Native applications, you can put one url for local development, one for production. Your urls could look, for example, like this: `exp://127.0.0.1:19000/--/` (generated using [Expo's `Linking` class](https://docs.expo.io/versions/latest/sdk/linking/#linkingmakeurlpath-queryparams)) or this: `myapp://` (See [React Native Linking Docs](https://facebook.github.io/react-native/docs/linking) for more information.).
+For React Native applications, you can put one url for local development, one for production. Your URLs could look, for example, like this: `exp://127.0.0.1:19000/--/` (generated using [Expo's `Linking` class](https://docs.expo.io/versions/latest/sdk/linking/#linkingmakeurlpath-queryparams)) or this: `myapp://` (See [React Native Linking Docs](https://facebook.github.io/react-native/docs/linking) for more information.).
 {: .callout .callout--info}
 
 - Under the *OAuth 2.0* section, Choose OAuth Flow and OAuth scopes. [To learn more about flows and scopes.](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-idp-settings.html)

From 6432c53a2bb520d84cd0c2e263fc3dd2ef6c1143 Mon Sep 17 00:00:00 2001
From: Manuel Iglesias <manuelig@amazon.com>
Date: Mon, 4 Mar 2019 17:19:00 -0800
Subject: [PATCH 3/8] Add instructions to generate custom scheme

---
 js/authentication.md | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/js/authentication.md b/js/authentication.md
index 6e178c71b73..84fd30b3249 100644
--- a/js/authentication.md
+++ b/js/authentication.md
@@ -1098,7 +1098,24 @@ To setup App Client:
 For example, in *Callback URL(s)*, you can put one url for local development, one for the production. If your app is running in `http://localhost:3000/` in local and `https://www.example.com/` in production, you can put `http://localhost:3000/,https://www.example.com/` under *Callback URL(s)*. Same as the *Signout URL(s)*.
 {: .callout .callout--info}
 
-For React Native applications, you can put one url for local development, one for production. Your URLs could look, for example, like this: `exp://127.0.0.1:19000/--/` (generated using [Expo's `Linking` class](https://docs.expo.io/versions/latest/sdk/linking/#linkingmakeurlpath-queryparams)) or this: `myapp://` (See [React Native Linking Docs](https://facebook.github.io/react-native/docs/linking) for more information.).
+<div>
+For React Native applications, you can put one url for local development, one for production.
+
+You need to define a custom URL scheme for your application before testing locally or publishing to the app store. This is different for Expo or vanilla React Native. Follow the steps at the [React Native Linking docs](https://facebook.github.io/react-native/docs/linking) or [Expo Linking docs](https://docs.expo.io/versions/latest/workflow/linking/) for more information. This [medium post](https://medium.com/react-native-training/deep-linking-your-react-native-app-d87c39a1ad5e) can be helpful too.
+
+After completing those steps, assuming you are using "myapp" as the name of your URL Scheme (or whatever friendly name you have choosen), you will use this URL in the Cognito Hosted UI domain URL.
+
+Your URLs could look like any of these:
+
+- `myapp://`
+- `exp://127.0.0.1:19000/--/` (Local development if your app is running [in the expo client](https://docs.expo.io/versions/latest/workflow/linking/#linking-to-your-app).
+One way to get your app URL when using expo, is doing this:
+```js
+import { Linking } from 'expo';
+
+console.log('url', Linking.makeUrl('/'));
+```
+</div>
 {: .callout .callout--info}
 
 - Under the *OAuth 2.0* section, Choose OAuth Flow and OAuth scopes. [To learn more about flows and scopes.](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-idp-settings.html)
@@ -1140,10 +1157,10 @@ const oauth = {
     scope : ['phone', 'email', 'profile', 'openid','aws.cognito.signin.user.admin'], 
 
     // Callback URL
-    redirectSignIn : 'http://www.example.com/signin/', // or Linking.makeUrl('/') (expo) or Linking.getInitialURL() (react native)
+    redirectSignIn : 'http://www.example.com/signin/', // or 'exp://127.0.0.1:19000/--/', 'myapp://main/'
 
     // Sign out URL
-    redirectSignOut : 'http://www.example.com/signout/', // or Linking.makeUrl('/') (expo) or Linking.getInitialURL() (react native)
+    redirectSignOut : 'http://www.example.com/signout/', // or 'exp://127.0.0.1:19000/--/', 'myapp://main/'
 
     // 'code' for Authorization code grant, 
     // 'token' for Implicit grant

From 8d9e9fc6940a092d4f0e6f8aa9e307b75253d365 Mon Sep 17 00:00:00 2001
From: Manuel Iglesias <manuelig@amazon.com>
Date: Mon, 4 Mar 2019 17:24:43 -0800
Subject: [PATCH 4/8] Fix spelling

---
 .spelling            | 1 +
 js/authentication.md | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.spelling b/.spelling
index 75a5ac262f3..843d2b047dc 100644
--- a/.spelling
+++ b/.spelling
@@ -285,6 +285,7 @@ withFederated
 Auth.federatedSignIn
 aws.cognito.signin.user.admin
 ChallengeName
+myapp
 
 #js/cognito-hosted-ui-federated-identity.md
 oauth2
diff --git a/js/authentication.md b/js/authentication.md
index 84fd30b3249..d6a909b0e4e 100644
--- a/js/authentication.md
+++ b/js/authentication.md
@@ -1103,7 +1103,7 @@ For React Native applications, you can put one url for local development, one fo
 
 You need to define a custom URL scheme for your application before testing locally or publishing to the app store. This is different for Expo or vanilla React Native. Follow the steps at the [React Native Linking docs](https://facebook.github.io/react-native/docs/linking) or [Expo Linking docs](https://docs.expo.io/versions/latest/workflow/linking/) for more information. This [medium post](https://medium.com/react-native-training/deep-linking-your-react-native-app-d87c39a1ad5e) can be helpful too.
 
-After completing those steps, assuming you are using "myapp" as the name of your URL Scheme (or whatever friendly name you have choosen), you will use this URL in the Cognito Hosted UI domain URL.
+After completing those steps, assuming you are using "myapp" as the name of your URL Scheme (or whatever friendly name you have chosen), you will use this URL in the Cognito Hosted UI domain URL.
 
 Your URLs could look like any of these:
 

From 24b9eb2f7a018a969cb3c4293c6e7a4ebda89ff3 Mon Sep 17 00:00:00 2001
From: Manuel Iglesias <manuelig@amazon.com>
Date: Mon, 4 Mar 2019 17:59:37 -0800
Subject: [PATCH 5/8] Document HOC props

---
 .spelling            |  1 +
 js/authentication.md | 59 +++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/.spelling b/.spelling
index 843d2b047dc..482771c2612 100644
--- a/.spelling
+++ b/.spelling
@@ -286,6 +286,7 @@ Auth.federatedSignIn
 aws.cognito.signin.user.admin
 ChallengeName
 myapp
+LoginWithAmazon
 
 #js/cognito-hosted-ui-federated-identity.md
 oauth2
diff --git a/js/authentication.md b/js/authentication.md
index d6a909b0e4e..d7490bbb9f5 100644
--- a/js/authentication.md
+++ b/js/authentication.md
@@ -1110,11 +1110,13 @@ Your URLs could look like any of these:
 - `myapp://`
 - `exp://127.0.0.1:19000/--/` (Local development if your app is running [in the expo client](https://docs.expo.io/versions/latest/workflow/linking/#linking-to-your-app).
 One way to get your app URL when using expo, is doing this:
+
 ```js
 import { Linking } from 'expo';
 
 console.log('url', Linking.makeUrl('/'));
 ```
+
 </div>
 {: .callout .callout--info}
 
@@ -1388,12 +1390,43 @@ export default CustomButton;
 
 #### Launching the Hosted UI in React Native 
 
-With React Native, you can use `withOAuth` HOC to launch the hosted UI experience. Just wrap your app's main component with our HOC:
-
 > ***The Hosted UI support is only available for React/ React Native / Web***
 
+With React Native, you can use `withOAuth` HOC to launch the hosted UI experience. Just wrap your app's main component with our HOC. Doing so, will pass the following `props` available to your component:
+
+- `oAuthUser`: If the sign was successful, this object will have the user from the user pool.
+- `oAuthError`: In case of an error, the string with the error as given by the Cognito Hosted UI.
+
+- `hostedUISignIn`: A callback function to trigger the hosted UI sign in flow, this will show the Cognito Hosted UI.
+
+- `signOut`: A callback function to trigger the hosted UI sign out flow.
+
+The following `props` are used for building a custom UI with buttons if you do not want to show the Cognito UI, however it will still create a User Pool entry once the OAuth flow has completed.
+{: .callout .callout--info}
+
+- `facebookSignIn`: A callback function to trigger the hosted UI sign in flow for Facebook, this will show the Facebook login page.
+- `googleSignIn`: A callback function to trigger the hosted UI sign in flow for Google, this will show the Google login page.
+- `amazonSignIn`: A callback function to trigger the hosted UI sign in flow for LoginWithAmazon, this will show the LoginWithAmazon login page.
+- `customProviderSignIn`: A callback function to trigger the hosted UI sign in flow for an OIDC provider, this will show the OIDC provider login page. This function expects a string with the **provider name** specified when [adding the OIDC  IdP to your User Pool](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-oidc-idp.html#cognito-user-pools-oidc-idp-step-2).
+
+The following code snippet shows an example of its possible usage:
+
 ```javascript
-import { withOAuth } from 'aws-amplify-react-native';
+import { StyleSheet, Text, ScrollView, SafeAreaView, StatusBar, Button } from 'react-native';
+import { default as Amplify } from "aws-amplify";
+import { withOAuth } from "aws-amplify-react-native";
+import { default as awsConfig } from "./aws-exports";
+
+Amplify.configure(awsConfig);
+
+Amplify.configure({
+    Auth: {
+        oauth: {
+            // OAuth config...
+        }
+    },
+});
+
 
 class App extends React.Component {
   render() {
@@ -1414,11 +1447,16 @@ class App extends React.Component {
         <ScrollView contentContainerStyle={styles.scrollViewContainer}>
           <Text>{JSON.stringify({ user, error, }, null, 2)}</Text>
           {!user && <React.Fragment>
+            {/* Go to the Cognito Hosted UI */}
             <Button title="Cognito" onPress={hostedUISignIn} />
+
+            {/* Go directly to a configured identity provider */}
             <Button title="Facebook" onPress={facebookSignIn} />
             <Button title="Google" onPress={googleSignIn}  />
             <Button title="Amazon" onPress={amazonSignIn} />
-            <Button title="Yahoo" onPress={() => customProviderSignIn('Yahoo')} /> {/* e.g. for OIDC providers */}
+
+            {/* e.g. for OIDC providers */}
+            <Button title="Yahoo" onPress={() => customProviderSignIn('Yahoo')} />
           </React.Fragment>}
         </ScrollView>
       </SafeAreaView>
@@ -1426,6 +1464,19 @@ class App extends React.Component {
   }
 }
 
+const styles = StyleSheet.create({
+  safeArea: {
+    flexGrow: 1,
+    paddingTop: StatusBar.currentHeight,
+    backgroundColor: '#FFFFFF',
+  },
+  scrollViewContainer: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+});
+
 export default withOAuth(App);
 ``` 
 

From 2b1e8b3b96e059170f132e9e71224be8427ad013 Mon Sep 17 00:00:00 2001
From: Manuel Iglesias <manuelig@amazon.com>
Date: Mon, 4 Mar 2019 18:05:32 -0800
Subject: [PATCH 6/8] Add expo instructions for urlOpener

---
 js/authentication.md | 54 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/js/authentication.md b/js/authentication.md
index d7490bbb9f5..9cb7a008949 100644
--- a/js/authentication.md
+++ b/js/authentication.md
@@ -1480,6 +1480,60 @@ const styles = StyleSheet.create({
 export default withOAuth(App);
 ``` 
 
+#### A note for expo users
+
+It is possible to use expo's `WebBrowser.openAuthSessionAsync` function to launch the hosted UI pages. To do this, you can provide a `urlOpener` function as below when configuring OAuth in Apmlify:
+
+```javascript
+import Amplify from 'aws-amplify';
+
+const oauth = {
+    // Domain name
+    domain : 'your-domain-prefix.auth.us-east-1.amazoncognito.com', 
+
+    // Authorized scopes
+    scope : ['phone', 'email', 'profile', 'openid','aws.cognito.signin.user.admin'], 
+
+    // Callback URL
+    redirectSignIn : 'http://www.example.com/signin/', // or 'exp://127.0.0.1:19000/--/', 'myapp://main/'
+
+    // Sign out URL
+    redirectSignOut : 'http://www.example.com/signout/', // or 'exp://127.0.0.1:19000/--/', 'myapp://main/'
+
+    // 'code' for Authorization code grant, 
+    // 'token' for Implicit grant
+    responseType: 'code',
+
+    // optional, for Cognito hosted ui specified options
+    options: {
+        // Indicates if the data collection is enabled to support Cognito advanced security features. By default, this flag is set to true.
+        AdvancedSecurityDataCollectionFlag : true
+    },
+
+    // On expo, use WebBrowser.openAuthSessionAsync to open the Hosted UI pages.
+    urlOpener: async (url, redirectUrl) => {
+        const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(url, redirectUrl);
+
+        if (type === 'success') {
+          await WebBrowser.dismissBrowser();
+
+          if (Platform.OS === 'ios') {
+            return Linking.openURL(newUrl);
+          }
+        }
+    }
+}
+
+Amplify.configure({
+    Auth: {
+        // other configurations...
+        // ....
+        oauth: oauth
+    },
+    // ...
+});
+```
+
 #### Handling Authentication Events
 
 When using the hosted UI, you can handle authentication events by creating event listeners with the [Hub module]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/js/hub#listening-authentication-events).

From 84fa0a2c1fbea51785087b6eefc81053948d990b Mon Sep 17 00:00:00 2001
From: Manuel Iglesias <manuelig@amazon.com>
Date: Mon, 4 Mar 2019 18:07:51 -0800
Subject: [PATCH 7/8] Fix typo

---
 js/authentication.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/authentication.md b/js/authentication.md
index 9cb7a008949..1881f6aab62 100644
--- a/js/authentication.md
+++ b/js/authentication.md
@@ -1482,7 +1482,7 @@ export default withOAuth(App);
 
 #### A note for expo users
 
-It is possible to use expo's `WebBrowser.openAuthSessionAsync` function to launch the hosted UI pages. To do this, you can provide a `urlOpener` function as below when configuring OAuth in Apmlify:
+It is possible to use expo's `WebBrowser.openAuthSessionAsync` function to launch the hosted UI pages. To do this, you can provide a `urlOpener` function as below when configuring OAuth in Amplify:
 
 ```javascript
 import Amplify from 'aws-amplify';

From 619e1dd1b2780eaeeb3a85c0884db892f3e384e0 Mon Sep 17 00:00:00 2001
From: Manuel Iglesias <manuelig@amazon.com>
Date: Mon, 4 Mar 2019 18:21:41 -0800
Subject: [PATCH 8/8] Use func ref for urlOpener

---
 js/authentication.md | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/js/authentication.md b/js/authentication.md
index 1881f6aab62..fc72738d6ea 100644
--- a/js/authentication.md
+++ b/js/authentication.md
@@ -1101,15 +1101,15 @@ For example, in *Callback URL(s)*, you can put one url for local development, on
 <div>
 For React Native applications, you can put one url for local development, one for production.
 
-You need to define a custom URL scheme for your application before testing locally or publishing to the app store. This is different for Expo or vanilla React Native. Follow the steps at the [React Native Linking docs](https://facebook.github.io/react-native/docs/linking) or [Expo Linking docs](https://docs.expo.io/versions/latest/workflow/linking/) for more information. This [medium post](https://medium.com/react-native-training/deep-linking-your-react-native-app-d87c39a1ad5e) can be helpful too.
+You need to define a custom URL scheme for your application before testing locally or publishing to the app store. This is different for Expo or vanilla React Native. Follow the steps at the [React Native Linking docs](https://facebook.github.io/react-native/docs/linking) or [Expo Linking docs](https://docs.expo.io/versions/latest/workflow/linking/) for more information.
 
 After completing those steps, assuming you are using "myapp" as the name of your URL Scheme (or whatever friendly name you have chosen), you will use this URL in the Cognito Hosted UI domain URL.
 
 Your URLs could look like any of these:
 
 - `myapp://`
-- `exp://127.0.0.1:19000/--/` (Local development if your app is running [in the expo client](https://docs.expo.io/versions/latest/workflow/linking/#linking-to-your-app).
-One way to get your app URL when using expo, is doing this:
+- `exp://127.0.0.1:19000/--/` (Local development if your app is running [in the Expo client](https://docs.expo.io/versions/latest/workflow/linking/#linking-to-your-app)).
+One way to get your app URL when using Expo, is doing this:
 
 ```js
 import { Linking } from 'expo';
@@ -1480,13 +1480,26 @@ const styles = StyleSheet.create({
 export default withOAuth(App);
 ``` 
 
-#### A note for expo users
+#### A note for Expo users
 
-It is possible to use expo's `WebBrowser.openAuthSessionAsync` function to launch the hosted UI pages. To do this, you can provide a `urlOpener` function as below when configuring OAuth in Amplify:
+It is possible to use Expo's `WebBrowser.openAuthSessionAsync` function to launch the hosted UI pages. To do this, you can provide a `urlOpener` function as below when configuring OAuth in Amplify:
 
 ```javascript
 import Amplify from 'aws-amplify';
 
+const urlOpener = async (url, redirectUrl) => {
+    // On Expo, use WebBrowser.openAuthSessionAsync to open the Hosted UI pages.
+    const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(url, redirectUrl);
+
+    if (type === 'success') {
+        await WebBrowser.dismissBrowser();
+
+        if (Platform.OS === 'ios') {
+        return Linking.openURL(newUrl);
+        }
+    }
+};
+
 const oauth = {
     // Domain name
     domain : 'your-domain-prefix.auth.us-east-1.amazoncognito.com', 
@@ -1510,18 +1523,7 @@ const oauth = {
         AdvancedSecurityDataCollectionFlag : true
     },
 
-    // On expo, use WebBrowser.openAuthSessionAsync to open the Hosted UI pages.
-    urlOpener: async (url, redirectUrl) => {
-        const { type, url: newUrl } = await WebBrowser.openAuthSessionAsync(url, redirectUrl);
-
-        if (type === 'success') {
-          await WebBrowser.dismissBrowser();
-
-          if (Platform.OS === 'ios') {
-            return Linking.openURL(newUrl);
-          }
-        }
-    }
+    urlOpener: urlOpener
 }
 
 Amplify.configure({