Move app to root folder

with-twitter-auth/App.js

@@ -1,18 +1,19 @@
-import React, { useCallback, useState } from 'react';
-import { AuthSession } from 'expo';
+import React, { useCallback, useState } from "react";
+import * as AuthSession from "expo-auth-session";
 import {
   ActivityIndicator,
   Button,
   StyleSheet,
   Text,
   View,
-} from 'react-native';
+} from "react-native";
 
-const requestTokenURL = 'http://localhost:3000/request-token';
-const accessTokenURL = 'http://localhost:3000/access-token';
+const requestTokenURL = "http://localhost:3000/request-token";
+const accessTokenURL = "http://localhost:3000/access-token";
 
+const redirect = AuthSession.makeRedirectUri();
 // This is the callback or redirect URL you need to whitelist in your Twitter app
-console.log(`Callback URL: ${AuthSession.getRedirectUrl()}`);
+console.log(`Callback URL: ${redirect}`);
 
 export default function App() {
   const [username, setUsername] = useState();
@@ -30,22 +31,26 @@ export default function App() {
 
     try {
       // Step #1 - first we need to fetch a request token to start the browser-based authentication flow
-      const requestParams = toQueryString({ callback_url: AuthSession.getRedirectUrl() });
-      const requestTokens = await fetch(requestTokenURL + requestParams).then(res => res.json());
+      const requestParams = toQueryString({ callback_url: redirect });
+      const requestTokens = await fetch(
+        requestTokenURL + requestParams
+      ).then((res) => res.json());
 
-      console.log('Request tokens fetched!', requestTokens);
+      console.log("Request tokens fetched!", requestTokens);
 
       // Step #2 - after we received the request tokens, we can start the auth session flow using these tokens
       const authResponse = await AuthSession.startAsync({
-        authUrl: 'https://api.twitter.com/oauth/authenticate' + toQueryString(requestTokens),
+        authUrl:
+          "https://api.twitter.com/oauth/authenticate" +
+          toQueryString(requestTokens),
       });
 
-      console.log('Auth response received!', authResponse);
+      console.log("Auth response received!", authResponse);
 
       // Validate if the auth session response is successful
       // Note, we still receive a `authResponse.type = 'success'`, thats why we need to check on the params itself
       if (authResponse.params && authResponse.params.denied) {
-        return setError('AuthSession failed, user did not authorize the app');
+        return setError("AuthSession failed, user did not authorize the app");
       }
 
       // Step #3 - when the user (successfully) authorized the app, we will receive a verification code.
@@ -55,15 +60,17 @@ export default function App() {
         oauth_token_secret: requestTokens.oauth_token_secret,
         oauth_verifier: authResponse.params.oauth_verifier,
       });
-      const accessTokens = await fetch(accessTokenURL + accessParams).then(res => res.json());
+      const accessTokens = await fetch(
+        accessTokenURL + accessParams
+      ).then((res) => res.json());
 
-      console.log('Access tokens fetched!', accessTokens);
+      console.log("Access tokens fetched!", accessTokens);
 
       // Now let's store the username in our state to render it.
       // You might want to store the `oauth_token` and `oauth_token_secret` for future use.
       setUsername(accessTokens.screen_name);
     } catch (error) {
-      console.log('Something went wrong...', error);
+      console.log("Something went wrong...", error);
       setError(error.message);
     } finally {
       setLoading(false);
@@ -84,9 +91,7 @@ export default function App() {
         </View>
       )}
 
-      {error !== undefined && (
-        <Text style={styles.error}>Error: {error}</Text>
-      )}
+      {error !== undefined && <Text style={styles.error}>Error: {error}</Text>}
 
       {loading && (
         <View style={[StyleSheet.absoluteFill, styles.loading]}>
@@ -100,23 +105,23 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
   },
   loading: {
-    backgroundColor: 'rgba(0,0,0,0.4)',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "rgba(0,0,0,0.4)",
+    alignItems: "center",
+    justifyContent: "center",
   },
   title: {
     fontSize: 20,
-    textAlign: 'center',
+    textAlign: "center",
     marginTop: 40,
   },
   error: {
     fontSize: 16,
-    textAlign: 'center',
+    textAlign: "center",
     marginTop: 40,
   },
 });
@@ -125,7 +130,13 @@ const styles = StyleSheet.create({
  * Converts an object to a query string.
  */
 function toQueryString(params) {
-  return '?' + Object.entries(params)
-    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
-    .join('&');
+  return (
+    "?" +
+    Object.entries(params)
+      .map(
+        ([key, value]) =>
+          `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
+      )
+      .join("&")
+  );
 }

with-twitter-auth/README.md

@@ -26,7 +26,6 @@ The purpose of the backend is to store the Twitter API keys without leaking this
 
 #### Set up the app
 
-- Go to directory `app`
 - Install with `yarn` or `npm install`
 - Open `App.js` and replace `requestTokenURL` and `accessTokenURL` with your backend URLs
 - Run [`expo start`](https://docs.expo.io/versions/latest/workflow/expo-cli/), try it out

with-twitter-auth/backend/package.json

@@ -1,4 +1,7 @@
 {
+  "scripts": {
+    "start": "node index.js"
+  },
   "dependencies": {
     "express": "^4.17.1",
     "twitter-lite": "^0.9.4"

with-twitter-auth/package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "expo": "37.0.7",
+    "expo-auth-session": "^1.2.1",
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",