Add auth to the manual testing example (firebase#54)

spicemix · Nov 13, 2020 · b01f555 · b01f555
1 parent 51aa115
commit b01f555
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 41 deletions.
diff --git a/firebase.json b/firebase.json
@@ -1,5 +1,8 @@
 {
   "emulators": {
+    "auth": {
+      "port": 9099
+    },
     "functions": {
       "port": 5001
     },

diff --git a/manual-emulator-testing/README.md b/manual-emulator-testing/README.md
@@ -1,8 +1,9 @@
 # Manual testing using the Emulator Suite
 
 This directory contains a very basic web app that connects to the
-Cloud Firestore emulator. You can read and write data from the database
-without affecting production.
+Cloud Firestore and Firebase Authentication emulators. 
+
+You sign in and read and write data in a completely local environment.
 
 ## Setup
 
@@ -18,6 +19,6 @@ firebase --project=fakeproject emulators:start
 ```
 
 Next visit `http://localhost:5000` in your browser and you should see a 
-_very_ barebones chat app powered by the Cloud Firestore emulator. Try
-adding some messages and then click the link at the bottom of the UI to
-view the messages in the Emulator UI.
+_very_ barebones chat app powered by the Cloud Firestore and Firebase 
+Authentication emulators. Try adding some messages and then click the link
+at the bottom of the UI to view the messages in the Emulator UI.
diff --git a/manual-emulator-testing/firebase.json b/manual-emulator-testing/firebase.json
@@ -18,6 +18,9 @@
     ]
   },
   "emulators": {
+    "auth": {
+      "port": 9099
+    },
     "firestore": {
       "port": 8080
     },

diff --git a/manual-emulator-testing/firestore.rules b/manual-emulator-testing/firestore.rules
@@ -2,9 +2,9 @@ rules_version = '2';
 service cloud.firestore {
   match /databases/{database}/documents {
     match /messages/{message} {
-      // Note: these are extremely basic rules because this sample does not use Firebase Authentication,
-      //       but these rules are NOT appropriate for a production chat app.
-      allow read;
+      // Note: these are extremely basic rules but these rules are NOT secure enough
+      // for a production chat app.
+      allow read: if request.auth.token.email != null;
       allow write: if request.resource.data.keys().hasOnly(['text', 'time'])
     }
   }

diff --git a/manual-emulator-testing/public/index.html b/manual-emulator-testing/public/index.html
@@ -24,30 +24,40 @@
 
     <!-- Firebase SDKs -->
     <script src="https://www.gstatic.com/firebasejs/8.0.2/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.0.2/firebase-auth.js"></script>
     <script src="https://www.gstatic.com/firebasejs/8.0.2/firebase-firestore.js"></script>
   </head>
 
   <body>
     <div id="app">
-      <h4>Messages</h4>
-      <ul>
-        <li 
-          v-for="(msg, index) in messages"
-          v-bind:key="index">
-          {{ msg.text }}
-        </li>
-      </ul>
+      <div v-if="!signedIn">
+        <h4>Sign In</h4>
+        <form style="padding-top: 12px; padding-bottom: 12px;">
+          <input v-model="emailInput" type="email" placeholder="Email" autofocus></textarea>
+          <input v-model="passwordInput" type="password" placeholder="Password"></textarea>
+          <button v-on:click.prevent="signIn()">Sign In</button>
+          <button v-on:click.prevent="signUp()">Sign Up</button>
+        </form>
+      </div>
 
-      <br />
+      <div v-else>
+        <h4>Messages</h4>
+        <ul>
+          <li 
+            v-for="(msg, index) in messages"
+            v-bind:key="index">
+            {{ msg.text }}
+          </li>
+        </ul>
 
-      <form>
-        <input v-model="msgInput" type="text" placeholder="Add a message..." autofocus></textarea>
-        <button v-on:click.prevent="submit()">Submit</button>
-      </form>
+        <form style="padding-top: 12px; padding-bottom: 12px;">
+          <input v-model="msgInput" type="text" placeholder="Add a message..." autofocus></textarea>
+          <button v-on:click.prevent="submit()">Submit</button>
+        </form>
+      </div>
+
 
-      <br />
-
-      <a href="http://localhost:4000/firestore" style="font-size: 9pt;" target="_blank">View data in the Emulator UI</a>
+      <a href="http://localhost:4000/" style="font-size: 9pt;" target="_blank">View data in the Emulator UI</a>
     </div>
     <script src="/index.js"></script>
   </body>

diff --git a/manual-emulator-testing/public/index.js b/manual-emulator-testing/public/index.js
@@ -14,18 +14,20 @@
  * limitations under the License.
  */
 
-// Initialze Firestore pointing at our test project
-const db = firebase
-  .initializeApp({
-    projectId: "fakeproject",
-  })
-  .firestore();
+// Initialze Firebase pointing at our test project
+firebase.initializeApp({
+  projectId: "fakeproject",
+  apiKey: "fakeApiKey"
+});
+
+const db = firebase.firestore();
+const auth = firebase.auth();
+
+// Connect Firebase Auth to the local emulator
+auth.useEmulator("http://localhost:9099");
 
 // Connect the Firestore SDK to the local emulator
-db.settings({
-  host: "localhost:8080",
-  ssl: false,
-});
+db.useEmulator("localhost", 8080);
 
 // Use Vue.js to populate the UI with data
 //
@@ -34,8 +36,11 @@ db.settings({
 const app = new Vue({
   el: "#app",
   data: {
+    currentUser: null,
     messages: [],
     msgInput: "",
+    emailInput: "",
+    passwordInput: "",
   },
   methods: {
     submit: function () {
@@ -47,14 +52,51 @@ const app = new Vue({
 
       this.msgInput = "";
     },
+    signUp: async function() {
+      console.log("Attempting sign up as", this.emailInput);
+      try {
+        const user = await auth.createUserWithEmailAndPassword(this.emailInput, this.passwordInput);
+        this.setUser(user);
+      } catch (e) {
+        console.warn(e);
+      }
+    },
+    signIn: async function() {
+      console.log("Attempting sign in as", this.emailInput);
+      try {
+        const user = await auth.signInWithEmailAndPassword(this.emailInput, this.passwordInput);
+        this.setUser(user);
+      } catch (e) {
+        console.warn(e);
+      }
+    },
+    setUser: function (user) {
+      this.currentUser = user;
+      if (user != null) {
+        console.log("Signed in as ", user);
+
+        // Listen to the messages collection
+        db.collection("messages")
+          .orderBy("time", "asc")
+          .onSnapshot((snap) => {
+            console.log("Got data from firestore!");
+            this.messages = snap.docs.map((doc) => doc.data());
+          });
+      }
+    }
+  },
+  computed: {
+    signedIn: function () {
+      return this.currentUser !== null;
+    }
   },
   created: function () {
-    // Listen to the messages collection
-    db.collection("messages")
-      .orderBy("time", "asc")
-      .onSnapshot((snap) => {
-        console.log("Got data from firestore!");
-        this.messages = snap.docs.map((doc) => doc.data());
-      });
+    // Listen to auth state
+    this.setUser(auth.currentUser);
+    auth.onAuthStateChanged((user) => {
+      this.setUser(user);
+    });
+
+
   },
 });