Add Authentication JWT with Firebase

* App.js

    - Connected authReducer to the store

* navigation/ShopNavigator.js

    - Imported createSwitchNavigator from react-navigation
    - Imported new AuthScreen

* package.json

    - Installed expo-linear-gradient to add a gradient background

* screens/shop/OrdersScreen.js

    - Fixed typo
    - Added a msg if there is no orders

* screens/user/UserProductsScreen.js

    - Added a msg if there is no products for the user

* store/actions/orders.js

    - Updated fetchOrders to fetch using the firebase userId
    - Updated addOrder to get the token and userId from the store (redux)
        - Then using the userId and token to post a new order

* store/actions/products.js

    - Updated deleteProduct to use token
    - Updated fetchProducts to use userId to fetch for the user products
    - Updated createProduct to use userId and Token
    - Updated updateProduct to use userId and Token

* store/reducers/products.js

    - Updated the productsReducer to reflect the actions updates

* screens/user/AuthScreen.js

    - Added a new screen to use as the first screen of the app where users can login or sign up.
    - after login, the user is redirect to the "Shop" screen (our second stack)

* store/actions/auth.js
* store/reducers/auth.js

    - Added a new redux to store the user information (userId and token)

4_Shop_App/App.js

@@ -8,12 +8,14 @@ import ReduxThunk from 'redux-thunk';
 import productsReducer from './store/reducers/products';
 import cartReducer from './store/reducers/cart';
 import ordersReducer from './store/reducers/orders';
+import authReducer from './store/reducers/auth';
 import ShopNavigator from './navigation/ShopNavigator';
 
 const rootReducer = combineReducers({
     products: productsReducer,
     cart: cartReducer,
     orders: ordersReducer,
+    auth: authReducer,
 });
 
 const store = createStore(rootReducer, applyMiddleware(ReduxThunk));

4_Shop_App/babel.config.js

@@ -1,6 +1,6 @@
-module.exports = function(api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-  };
+module.exports = function (api) {
+    api.cache(true);
+    return {
+        presets: ['babel-preset-expo', 'module:react-native-dotenv'],
+    };
 };

4_Shop_App/navigation/ShopNavigator.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createStackNavigator } from 'react-navigation-stack';
-import { createAppContainer } from 'react-navigation';
+import { createAppContainer, createSwitchNavigator } from 'react-navigation';
 import { createDrawerNavigator } from 'react-navigation-drawer';
 import { Platform } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
@@ -13,6 +13,7 @@ import CartScreen from '../screens/shop/CartScreen';
 import OrdersScreen from '../screens/shop/OrdersScreen';
 import UserProductsScreen from '../screens/user/UserProductsScreen';
 import EditProductScreen from '../screens/user/EditProductScreen';
+import AuthScreen from '../screens/user/AuthScreen';
 
 const defaultNavOptions = {
     headerStyle: {
@@ -84,6 +85,15 @@ const AdminNavigator = createStackNavigator(
     },
 );
 
+const AuthNavigator = createStackNavigator(
+    {
+        Auth: AuthScreen,
+    },
+    {
+        defaultNavigationOptions: defaultNavOptions,
+    },
+);
+
 const ShopNavigator = createDrawerNavigator(
     {
         Products: ProductsNavigator,
@@ -97,4 +107,9 @@ const ShopNavigator = createDrawerNavigator(
     },
 );
 
-export default createAppContainer(ShopNavigator);
+const MainNavigator = createSwitchNavigator({
+    Auth: AuthNavigator,
+    Shop: ShopNavigator,
+});
+
+export default createAppContainer(MainNavigator);

4_Shop_App/package.json

@@ -10,12 +10,15 @@
   "dependencies": {
     "@expo/vector-icons": "^10.2.0",
     "@react-native-community/masked-view": "0.1.6",
+    "env-cmd": "^10.1.0",
     "expo": "~37.0.3",
     "expo-font": "~8.1.0",
+    "expo-linear-gradient": "^8.1.0",
     "moment": "^2.26.0",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
+    "react-native-dotenv": "^0.2.0",
     "react-native-gesture-handler": "~1.6.0",
     "react-native-reanimated": "~1.7.0",
     "react-native-safe-area-context": "0.7.3",

4_Shop_App/screens/shop/OrdersScreen.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { View, Text, FlatList, Platform, StyleSheet, ActivityIndicator } from 'react-native';
+import { View, Text, FlatList, Platform, StyleSheet, ActivityIndicator, Button } from 'react-native';
 import { useSelector, useDispatch } from 'react-redux';
 import { HeaderButtons, Item } from 'react-navigation-header-buttons';
 
@@ -38,7 +38,7 @@ function OrdersScreen(props) {
         return (
             <View style={styles.centered}>
                 <Text>An error ocurred!</Text>
-                <Button title="Try again" onPress={loadProducts} color={Colors.primary} />
+                <Button title="Try again" onPress={loadOrders} color={Colors.primary} />
             </View>
         );
     }
@@ -59,6 +59,14 @@ function OrdersScreen(props) {
         );
     }
 
+    if (orders.length === 0) {
+        return (
+            <View style={styles.errorContainer}>
+                <Text>No orders found, maybe start ordering some products?</Text>
+            </View>
+        );
+    }
+
     return (
         <FlatList
             onRefresh={loadOrders}
@@ -97,6 +105,11 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
     },
+    errorContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignContent: 'center',
+    },
 });
 
 export default OrdersScreen;