move firebase credentials to a separate file

firebase-init.js

@@ -0,0 +1,12 @@
+// Get these values for your project from the https://console.firebase.google.com/
+// You can get most of this file at
+// Project Settings -> General -> Your Apps -> [Add app] -> [Add Firebase to your Web app]
+// The `messagingVapidKey` needs to be added separately.
+const FIREBASE_INIT = {
+  // Project Settings -> Cloud Messaging, "Sender ID".
+  messagingSenderId: "114126160546",
+  // Project Settings -> Cloud Messaging -> Web configuration -> Web Push certificates.
+  // This value IS NOT included in the generated js config you can download from
+  // the firebase console. It needs to be added separately.
+  messagingVapidKey: "BOgQVPOMzIMXUpsYGpbVkZoEBc0ifKY_f2kSU5DNDGYI6i6CoKqqxDd7w7PJ3FaGRBgVGJffldETumOx831jl58"
+};

index-dev.html

@@ -33,8 +33,8 @@
     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
     <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <!-- Firebase push notifications. -->
-    <script crossorigin src="https://unpkg.com/firebase@5.5.0/firebase-app.js"></script>
+    <script crossorigin src="https://unpkg.com/firebase@5.5.1/firebase-app.js"></script>
-    <script crossorigin src="https://unpkg.com/firebase@5.5.0/firebase-messaging.js"></script>
+    <script crossorigin src="https://unpkg.com/firebase@5.5.1/firebase-messaging.js"></script>
   </head>
 
   <body>
@@ -47,6 +47,7 @@
     <script src="src/drafty.js"></script>
     <script src="src/tinode.js"></script>
     <!-- the application -->
+    <script src="/firebase-init.js"></script>
     <script type="text/babel" src="src/webapp.jsx"></script>
     <script type="text/babel">
       ReactDOM.render(

index.html

@@ -26,6 +26,7 @@
   </head>
   <body>
     <div id="mountPoint"></div>
+    <script src="/firebase-init.js"></script>
     <script src="umd/index.prod.js"></script>
   </body>
 </html>

package.json

@@ -41,6 +41,7 @@
     "index.min.js",
     "manifest.json",
     "service-worker.js",
+    "firebase-init.js",
     "web-desktop-2.png",
     "web-mob-chat-1.png",
     "web-mob-contacts-1.png",

service-worker.js

@@ -1,16 +1,9 @@
 // Must be located at the root.
-'use strict';
+importScripts("https://unpkg.com/firebase@5.5.1/firebase-app.js");
+importScripts("https://unpkg.com/firebase@5.5.1/firebase-messaging.js");
+importScripts("/firebase-init.js")
 
-importScripts("https://unpkg.com/firebase@5.5.0/firebase-app.js");
+firebase.initializeApp(FIREBASE_INIT);
-importScripts("https://unpkg.com/firebase@5.5.0/firebase-messaging.js");
-
-const FIREBASE_PUBLIC_API_KEY = "AIzaSyD6X4ULR-RUsobvs1zZ2bHdJuPz39q2tbQ";
-const FIREBASE_SENDER_ID = "114126160546";
-
-firebase.initializeApp({
-  apiKey: FIREBASE_PUBLIC_API_KEY,
-  messagingSenderId: FIREBASE_SENDER_ID
-});
 
 firebase.messaging().setBackgroundMessageHandler(function(payload) {
   let title = payload.notification.title || "New message";
@@ -19,6 +12,6 @@ firebase.messaging().setBackgroundMessageHandler(function(payload) {
     icon: '/img/logo96.png'
   };
   console.log("background message", payload);
-  
+
   return self.registration.showNotification(title, options);
 });

src/webapp.jsx

@@ -32,12 +32,6 @@ const POP_SOUND = new Audio('audio/msg.mp3');
 // API key. Use https://github.com/tinode/chat/tree/master/keygen to generate your own
 const API_KEY = "AQEAAAABAAD_rAp4DJh05a1HAwFT3A6K";
 
-// Firebase is used for desktop alerts (push notifications).
-// If you deploy your own server, you must change these FIREBASE_... values to your own.
-const FIREBASE_VAPID_KEY = "BOgQVPOMzIMXUpsYGpbVkZoEBc0ifKY_f2kSU5DNDGYI6i6CoKqqxDd7w7PJ3FaGRBgVGJffldETumOx831jl58";
-const FIREBASE_PUBLIC_API_KEY = "AIzaSyD6X4ULR-RUsobvs1zZ2bHdJuPz39q2tbQ";
-const FIREBASE_SENDER_ID = "114126160546";
-
 // Minimum time between two keypress notifications, milliseconds.
 const KEYPRESS_DELAY = 3*1000;
 // Delay before sending a {note} for reciving a message, milliseconds.
@@ -4360,7 +4354,8 @@ class TinodeWeb extends React.Component {
       messageSounds: !settings.messageSoundsOff,
       desktopAlerts: settings.desktopAlerts,
       desktopAlertsEnabled: (isSecureConnection() || isLocalHost()) &&
-        (typeof firebase != 'undefined') && (typeof navigator != 'undefined'),
+        (typeof firebase != 'undefined') && (typeof navigator != 'undefined') &&
+        (typeof FIREBASE_INIT != 'undefined'),
       firebaseToken: localStorage.getObject("firebase-token"),
 
       errorText: '',
@@ -4416,11 +4411,8 @@ class TinodeWeb extends React.Component {
     // Initialize desktop alerts.
     if (this.state.desktopAlertsEnabled) {
       try {
-        this.fbPush = firebase.initializeApp({
+        this.fbPush = firebase.initializeApp(FIREBASE_INIT, APP_NAME).messaging();
-          apiKey: FIREBASE_PUBLIC_API_KEY,
+        this.fbPush.usePublicVapidKey(FIREBASE_INIT.messagingVapidKey);
-          messagingSenderId: FIREBASE_SENDER_ID,
-        }, APP_NAME).messaging();
-        this.fbPush.usePublicVapidKey(FIREBASE_VAPID_KEY);
         navigator.serviceWorker.register('/service-worker.js').then((reg) => {
           this.fbPush.useServiceWorker(reg);
           this.initDesktopAlerts();
@@ -4988,6 +4980,7 @@ class TinodeWeb extends React.Component {
     if (enabled) {
       if (!this.state.firebaseToken) {
         this.fbPush.requestPermission().then(() => {
+          console.log("got permission, requesting token");
           this.requestPushToken(true);
         }).catch((err) => {
           this.handleError(err.message, "err");
@@ -5000,12 +4993,12 @@ class TinodeWeb extends React.Component {
         localStorage.updateObject("settings", {desktopAlerts: true});
       }
     } else if (this.state.firebaseToken) {
-      this.fbPush.deleteToken(this.state.firebaseToken).then(() => {
+      this.fbPush.deleteToken(this.state.firebaseToken).catch((err) => {
+        console.log("Unable to delete token.", err);
+      }).finally(() => {
         localStorage.updateObject("settings", {desktopAlerts: false});
         localStorage.removeItem("firebase-token");
         this.setState({desktopAlerts: false, firebaseToken: null});
-      }).catch((err) => {
-        console.log("Unable to delete token.", err);
       });
     } else {
       this.setState({desktopAlerts: false, firebaseToken: null});
@@ -5014,7 +5007,9 @@ class TinodeWeb extends React.Component {
   }
 
   requestPushToken(sendToServer) {
+    console.log("requestPushToken", sendToServer);
     this.fbPush.getToken().then((refreshedToken) => {
+      console.log("got token", refreshedToken, this.state.firebaseToken);
       if (refreshedToken != this.state.firebaseToken) {
         this.tinode.setDeviceToken(refreshedToken, sendToServer);
         localStorage.setObject("firebase-token", refreshedToken);
@@ -5123,10 +5118,11 @@ class TinodeWeb extends React.Component {
 
   handleLogout() {
     localStorage.removeItem("auth-token");
-    this.setState(this.getBlankState());
     if (this.tinode) {
+      this.tinode.onDisconnect = undefined;
       this.tinode.disconnect();
     }
+    this.setState(this.getBlankState());
     this.tinode = TinodeWeb.tnSetup(this.state.serverAddress, this.state.transport);
     navigateTo("");
   }