Merge pull request #33 from CreateThrive/refactor/fetch-users

Refactor for create, modify and delete users

Author: TOPOFGR

.env.example

@@ -8,3 +8,4 @@ REACT_APP_FIRE_BASE_APP_ID = ''
 REACT_APP_FIRE_BASE_MEASURMENT_ID = ''
 REACT_APP_CLOUD_FUNCTIONS_REST_API = '<FIREBASE_CLOUD_FUNCTIONS_URL>/requestsApp'
 REACT_APP_LOGIN_PAGE_URL = 'http://localhost:3000/login'
+REACT_APP_FIRE_BASE_STORAGE_API = 'https://firebasestorage.googleapis.com/v0/b/${REACT_APP_FIRE_BASE_STORAGE_BUCKET}'

.eslintignore

@@ -1,2 +1 @@
-build/*
-functions/*
+build/*

.firebaserc

@@ -1,6 +1,7 @@
 {
   "projects": {
     "production": "react-firebase-admin-eeac2",
-    "staging": "react-firebase-admin-eeac2"
+    "staging": "react-firebase-admin-eeac2",
+    "default": "react-firebase-admin-eeac2"
   }
 }

README.md

@@ -15,6 +15,7 @@ Boilerplate with React ⚛️ and Firebase 🔥designed to quickly spin up a ful
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
+
 - [What is this?](#what-is-this)
 - [Why should I use it?](#why-should-i-use-it)
 - [Features](#features)
@@ -57,6 +58,9 @@ Boilerplate with React ⚛️ and Firebase 🔥designed to quickly spin up a ful
   - [How to translate a Text with a variable](#how-to-translate-a-text-with-a-variable)
   - [How to internationalize a Date](#how-to-internationalize-a-date)
   - [How to add your language on DatePicker](#how-to-add-your-language-on-datepicker)
+- [File Upload](#file-upload)
+  - [Image Resize](#image-resize)
+  - [Storage Rules](#storage-rules)
 - [Contributors](#contributors)
 - [License](#license)
 
@@ -135,18 +139,14 @@ React Firebase Admin is our in-house admin dashboard boilerplate, used in many o
 ### Cloud functions
 
 - [Express](https://github.com/expressjs/express) (★ 47.5k) fast, unopinionated, minimalist web framework for node.
-- [Cors](https://github.com/expressjs/cors) (★ 4.4k) Node.js CORS middleware.
-- [Nodemailer](https://github.com/nodemailer/nodemailer) (★ 12.2k) send e-mails with Node.js.
 - [Firebase-admin](https://github.com/firebase/firebase-admin-node) (★ 790) Firebase Admin Node.js SDK.
 - [Firebase-functions](https://github.com/firebase/firebase-functions) (★ 658) Firebase SDK for Cloud Functions.
 - [@google-cloud/storage](https://github.com/googleapis/nodejs-storage) (★ 421) Node.js client for Google Cloud Storage.
 - [Firebase-function-tools](https://github.com/TarikHuber/react-most-wanted) (★ 780) a tool for naming and loading our Cloud Functions.
 - [Cookie-parser](https://github.com/expressjs/cookie-parser) (★ 1.4k) parse HTTP request cookies.
 - [Uuid](https://github.com/uuidjs/uuid) (★ 8.7k) generate RFC-compliant UUIDs in JavaScript.
-- [Busboy](https://github.com/mscdex/busboy) (★ 1.8k) a streaming parser for HTML form data for Node.js.
-- [Sharp](https://github.com/lovell/sharp) (★ 15.8k) high performance Node.js image processing.
-- [Glob](https://github.com/isaacs/node-glob) (★ 6.2k) glob functionality for Node.js.
 - [Fs-extra](https://github.com/jprichardson/node-fs-extra) (★ 6.6k) Node.js: extra methods for the fs object like copy(), remove(), mkdirs().
+- [Resize Image](https://github.com/firebase/extensions/tree/master/storage-resize-images) (★ 372) Firebase Extension to create resized versions of images uploaded to Cloud Storage.
 
 ## Prerequisites
 
@@ -174,7 +174,7 @@ Run the following commands in the root of the repository:
 - `npm install -g firebase-tools`
 - `firebase init`
 
-Select the firebase project you created in the previous step, when prompted select the services you want to setup and check **_Database_**, **_Functions_** and **_Hosting_**.
+Select the firebase project you created in the previous step, when prompted select the services you want to setup and check **_Database_**, **_Functions_**, **_Hosting_** and **_Storage_**.
 
 **_Database_**:
 
@@ -201,6 +201,9 @@ You'll get prompted to enter the path to you service account key file. To genera
 
 You'll need to enter the **_email_** and **_password_** for the admin account of the admin dashboard. With this in place, you've successfully created your admin account for the dashboard.
 
+**_Storage_**
+-For the file we should use for the Storage Rules select storage.rules.
+
 ### Setting up the React frontend
 
 Run the following commands in the root of the repository (Using Node v12.15.0 or higher ):
@@ -569,6 +572,53 @@ const date = Date.now();
 - Add another **registerLocale** with your language as the first parameter and the import from `date-fns` as second parameter.
 - Place your language with its date format on **dateFormat**.
 
+## File Upload
+
+For file upload, we used the [Firebase Client](https://firebase.google.com/docs/storage/web/upload-files?authuser=1#upload_files) together with **Firebase Storage** for our storage needs. We store the users profile image in a subfolder named `/users`.
+
+### Image Resize
+
+We use [Resize Image](https://github.com/firebase/extensions/tree/master/storage-resize-images) for resizing every image uploaded to the storage.
+Every image uploaded to the storage is resized to our size preference (`200px x 200px`).
+
+**Setting your image resize**
+
+If you want to install it from the cmd, you can execute:
+
+```javascript
+firebase ext:install storage-resize-images --project=projectId
+```
+
+Wih your own `projectId`
+
+<ol>
+<li>Go to your Firebase Proyect on <a href= "https://console.firebase.google.com/u/1/">Firebase Console</a> </li>
+<li>Select extensions from the sidebar</li>
+<li>Search for Resize Images extension</li>
+<li>Click install on the extension</li>
+<li>On extension configuration set sizes of resized images to 200x200 and the deletion of original file to true</li>
+<li>Click on install extension</li>
+</ol>
+
+In case you do not want to upload a resized version and upload the original file, you should avoid step **5**.
+
+### Storage Rules
+
+To make images reachable, we needed to set our storage rules to allow users to `write` on the storage made for the user logo, only if they are authenticated, but they can always `read`, this was set for saving the user´s logo path on the database.
+
+**Should look like this**
+
+```javascript
+service firebase.storage {
+  match /b/{bucket}/o {
+    match /users/{imageId} {
+      allow write: if request.auth!=null;
+      allow read: if true;
+    }
+  }
+}
+```
+
 ## Contributors
 
 We'd like to thank these awesome people who made this whole thing happen:

database.rules.json

@@ -2,11 +2,11 @@
   "rules": {
     "users": {
       "$user": {
-        ".write": "auth !== null && auth.token.email_verified === true && data.child('tenant').val() === auth.token.tenant && ((auth.token.isAdmin === true && data.child('isAdmin').val() === false) || auth.uid === $user)",
-        ".read": "auth !== null && auth.token.email_verified === true && data.child('tenant').val() === auth.token.tenant && ((auth.token.isAdmin === true && data.child('isAdmin').val() === false) || auth.uid === $user)"
+        ".write": "auth !== null && auth.token.email_verified === true && ((auth.token.isAdmin === true && data.child('isAdmin').val() === false) || auth.uid === $user)",
+        ".read": "auth !== null && auth.token.email_verified === true && ((auth.token.isAdmin === true && data.child('isAdmin').val() === false) || auth.uid === $user)"
       },
-      ".read": "auth !== null && auth.token.email_verified === true && auth.token.isAdmin === true && query.orderByChild === 'tenant' && query.equalTo === auth.token.tenant",
-      ".indexOn": ["tenant"]
+      ".write": "auth !== null && auth.token.email_verified === true && auth.token.isAdmin === true",
+      ".read": "auth !== null && auth.token.email_verified === true && auth.token.isAdmin === true"
     }
   }
 }

firebase.json

@@ -15,5 +15,8 @@
         "destination": "/index.html"
       }
     ]
+  },
+  "storage": {
+    "rules": "storage.rules"
   }
 }

functions/db/users/onDelete.function.js

@@ -0,0 +1,9 @@
+const functions = require('firebase-functions');
+const admin = require('firebase-admin');
+
+export default functions.database
+  .ref('users/{uid}')
+  .onDelete((snapshot, context) => {
+    const { uid } = context.params;
+    return admin.auth().deleteUser(uid);
+  });

functions/db/users/onUpdate.function.js

@@ -0,0 +1,20 @@
+const functions = require('firebase-functions');
+const admin = require('firebase-admin');
+
+export default functions.database
+  .ref('/users/{uid}')
+  .onUpdate((change, context) => {
+    const before = change.before.val();
+    const after = change.after.val();
+    const { isAdmin } = after;
+
+    if (before.isAdmin === isAdmin) {
+      return null;
+    }
+
+    const { uid } = context.params;
+
+    return admin.auth().setCustomUserClaims(uid, {
+      isAdmin
+    });
+  });