[firebase_core, firebase_auth] Update web integration docs (firebase#…

…1783) * [firebase_core] Update documentation for web setup. * [firebase_auth] Update documentation for web setup. Fixes firebase#1635 Fixes firebase#1746
jfindleylab · Jan 8, 2020 · fef47db · fef47db
1 parent 21d1710
commit fef47db
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 39 deletions.
diff --git a/packages/firebase_auth/firebase_auth/CHANGELOG.md b/packages/firebase_auth/firebase_auth/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.15.3+1
+
+* Add integration instructions for the `web` platform.
+
 ## 0.15.3
 
 * Add support for OAuth Authentication for iOS and Android to solve generic providers authentication.

diff --git a/packages/firebase_auth/firebase_auth/README.md b/packages/firebase_auth/firebase_auth/README.md
@@ -130,6 +130,14 @@ device you are using you must set the `URL Schemes` to the `REVERSE_CLIENT_ID` f
 
   - When testing you can add test phone numbers and verification codes to the Firebase console.
 
+### Web integration
+
+In addition to the `firebase_auth` dependency, you'll need to modify the `web/index.html` of your app following the Firebase setup instructions:
+
+* [Add Firebase to your JavaScript project](https://firebase.google.com/docs/web/setup#from-the-cdn).
+
+Read more in the [`firebase_auth_web` README](https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_auth/firebase_auth_web/README.md).
+
 ## Example
 
 See the [example application](https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_auth/firebase_auth/example) source

diff --git a/packages/firebase_auth/firebase_auth/pubspec.yaml b/packages/firebase_auth/firebase_auth/pubspec.yaml
@@ -3,7 +3,7 @@ description: Flutter plugin for Firebase Auth, enabling Android and iOS
   authentication using passwords, phone numbers and identity providers
   like Google, Facebook and Twitter.
 homepage: https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_auth/firebase_auth
-version: 0.15.3
+version: 0.15.3+1
 
 flutter:
   plugin:

diff --git a/packages/firebase_auth/firebase_auth_web/CHANGELOG.md b/packages/firebase_auth/firebase_auth_web/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.1.1+2
+
+* Update setup instructions in the README.
+
 ## 0.1.1+1
 
 * Add an android/ folder with no-op implementation to workaround https://github.com/flutter/flutter/issues/46898

diff --git a/packages/firebase_auth/firebase_auth_web/README.md b/packages/firebase_auth/firebase_auth_web/README.md
@@ -1,34 +1,26 @@
 # firebase_auth_web
 
-The web implementation of [`firebase_core`][1].
+The web implementation of [`firebase_auth`][1].
 
 ## Usage
 
 ### Import the package
 
-To use this plugin in your Flutter app on the web, simply add it as a
-dependency in your `pubspec.yaml` alongside the base `firebase_auth`
-plugin.
+This package is the endorsed implementation of `firebase_auth` for the web platform since version `0.15.2`, so it gets automatically added to your dependencies by depending on `firebase_core: ^0.15.2`.
 
-_(This is only temporary: in the future we hope to make this package
-an "endorsed" implementation of `firebase_auth`, so it will automatically
-be included in your app when you run your Flutter app on the web.)_
-
-Add this to your `pubspec.yaml`:
+No modifications to your `pubspec.yaml` should be required in a recent enough version of Flutter (`>=1.12.13+hotfix.4`):
 
 ```yaml
 ...
 dependencies:
   ...
-  firebase_auth: ^0.15.1
-  firebase_auth_web: ^0.1.0
+  firebase_auth: ^0.15.2
   ...
 ```
 
 ### Updating `index.html`
 
-Due to [this bug in dartdevc][2], you will need to manually add the Firebase
-JavaScript files to your `index.html` file.
+Due to [this bug in dartdevc][2], you will need to manually add the Firebase JavaScript file to your `index.html` file.
 
 In your app directory, edit `web/index.html` to add the line:
 
@@ -38,15 +30,53 @@ In your app directory, edit `web/index.html` to add the line:
     <body>
         <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
         <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-auth.js"></script>
+        <!-- Other firebase SDKs/config here -->
         <script src="main.dart.js"></script>
     </body>
 </html>
 ```
 
+### Initialize Firebase
+
+If your app is using the "default" Firebase app _(this means that you're not doing any `package:firebase_core` initialization yourself)_, you need to initialize it now, following the steps in the [Firebase Web Setup][3] docs.
+
+Specifically, you'll want to add the following lines to your `web/index.html` file:
+
+```html
+<body>
+  <!-- Previously loaded Firebase SDKs -->
+
+  <!-- ADD THIS BEFORE YOUR main.dart.js SCRIPT -->
+  <script>
+    // TODO: Replace the following with your app's Firebase project configuration.
+    // See: https://support.google.com/firebase/answer/7015592
+    var firebaseConfig = {
+      apiKey: "...",
+      authDomain: "[YOUR_PROJECT].firebaseapp.com",
+      databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
+      projectId: "[YOUR_PROJECT]",
+      storageBucket: "[YOUR_PROJECT].appspot.com",
+      messagingSenderId: "...",
+      appId: "1:...:web:...",
+      measurementId: "G-..."
+    };
+    // Initialize Firebase
+    firebase.initializeApp(firebaseConfig);
+  </script>
+  <!-- END OF FIREBASE INIT CODE -->
+
+  <script src="main.dart.js"></script>
+</body>
+```
+
 ### Using the plugin
 
-Once you have added the `firebase_auth_web` dependency to your pubspec,
-you can use `package:firebase_auth` as normal.
+Once you have modified your `web/index.html` file you should be able to use `package:firebase_auth` as normal.
+
+#### Examples
+
+* The `example` app in `package:firebase_auth` has an implementation of this instructions.
 
 [1]: ../firebase_auth
 [2]: https://github.com/dart-lang/sdk/issues/33979
+[3]: https://firebase.google.com/docs/web/setup#add-sdks-initialize
diff --git a/packages/firebase_auth/firebase_auth_web/pubspec.yaml b/packages/firebase_auth/firebase_auth_web/pubspec.yaml
@@ -1,7 +1,7 @@
 name: firebase_auth_web
 description: The web implementation of firebase_auth
 homepage: https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_auth/firebase_auth_web
-version: 0.1.1+1
+version: 0.1.1+2
 
 flutter:
   plugin:

diff --git a/packages/firebase_core/firebase_core/CHANGELOG.md b/packages/firebase_core/firebase_core/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.4.3+2
+
+* Add integration instructions for the `web` platform.
+
 ## 0.4.3+1
 
 * Move `Platform.isIOS` check behind a configurable import so that pub.dev registers

diff --git a/packages/firebase_core/firebase_core/README.md b/packages/firebase_core/firebase_core/README.md
@@ -10,6 +10,14 @@ For Flutter plugins for other Firebase products, see [README.md](https://github.
 
 To use this plugin, add `firebase_core` as a [dependency in your pubspec.yaml file](https://flutter.io/platform-plugins/).
 
+### Web integration
+
+In addition to the `firebase_core` dependency, you'll need to modify the `web/index.html` of your app following the Firebase setup instructions:
+
+* [Add Firebase to your JavaScript project](https://firebase.google.com/docs/web/setup#from-the-cdn).
+
+Read more in the [`firebase_core_web` README](https://github.com/FirebaseExtended/flutterfire/blob/master/packages/firebase_core/firebase_core_web/README.md).
+
 ## Getting Started
 
 See the `example` directory for a complete sample app using Firebase Core.

diff --git a/packages/firebase_core/firebase_core/example/web/index.html b/packages/firebase_core/firebase_core/example/web/index.html
@@ -6,6 +6,11 @@
 </head>
 <body>
   <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
+  <!--
+    This example initializes firebase programmatically in Dart,
+    instead of doing it here with JS.
+    See example/lib/main.dart (lines 13 to 26)
+  -->
   <script src="main.dart.js" type="application/javascript"></script>
 </body>
 </html>
diff --git a/packages/firebase_core/firebase_core/pubspec.yaml b/packages/firebase_core/firebase_core/pubspec.yaml
@@ -2,7 +2,7 @@ name: firebase_core
 description: Flutter plugin for Firebase Core, enabling connecting to multiple
   Firebase apps.
 homepage: https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_core/firebase_core
-version: 0.4.3+1
+version: 0.4.3+2
 
 flutter:
   plugin:

diff --git a/packages/firebase_core/firebase_core_web/CHANGELOG.md b/packages/firebase_core/firebase_core_web/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.1.1+2
+
+* Update setup instructions in the README.
+
 ## 0.1.1+1
 
 * Add an android/ folder with no-op implementation to workaround https://github.com/flutter/flutter/issues/46898

diff --git a/packages/firebase_core/firebase_core_web/README.md b/packages/firebase_core/firebase_core_web/README.md
@@ -6,29 +6,21 @@ The web implementation of [`firebase_core`][1].
 
 ### Import the package
 
-To use this plugin in your Flutter app on the web, simply add it as a
-dependency in your `pubspec.yaml` alongside the base `firebase_core`
-plugin.
+This package is the endorsed implementation of `firebase_core` for the web platform since version `0.4.3`, so it gets automatically added to your dependencies by depending on `firebase_core: ^0.4.3`.
 
-_(This is only temporary: in the future we hope to make this package
-an "endorsed" implementation of `firebase_core`, so it will automatically
-be included in your app when you run your Flutter app on the web.)_
-
-Add this to your `pubspec.yaml`:
+No modifications to your `pubspec.yaml` should be required in a recent enough version of Flutter (`>=1.12.13+hotfix.4`):
 
 ```yaml
 ...
 dependencies:
   ...
-  firebase_core: ^0.4.1
-  firebase_core_web: ^0.1.0
+  firebase_core: ^0.4.3
   ...
 ```
 
 ### Updating `index.html`
 
-Due to [this bug in dartdevc][2], you will need to manually add the Firebase
-JavaScript file to your `index.html` file.
+Due to [this bug in dartdevc][2], you will need to manually add the Firebase JavaScript file to your `index.html` file.
 
 In your app directory, edit `web/index.html` to add the line:
 
@@ -37,38 +29,48 @@ In your app directory, edit `web/index.html` to add the line:
     ...
     <body>
         <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
+        <!-- Other firebase SDKs/config here -->
         <script src="main.dart.js"></script>
     </body>
 </html>
 ```
 
 ### Initialize Firebase
 
-If you want to initialize the default app, follow the steps in the
-[Firebase Web Setup][3] docs. Specifically, you'll want to add the
-following lines to your `web/index.html` file:
+If your app is using the "default" Firebase app, you need to initialize it now, following the steps in the [Firebase Web Setup][3] docs.
+
+Specifically, you'll want to add the following lines to your `web/index.html` file:
 
 ```html
 <body>
   <!-- Previously loaded Firebase SDKs -->
 
+  <!-- ADD THIS BEFORE YOUR main.dart.js SCRIPT -->
   <script>
-    // TODO: Replace the following with your app's Firebase project configuration
+    // TODO: Replace the following with your app's Firebase project configuration.
+    // See: https://support.google.com/firebase/answer/7015592
     var firebaseConfig = {
-      // ...
+      apiKey: "...",
+      authDomain: "[YOUR_PROJECT].firebaseapp.com",
+      databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
+      projectId: "[YOUR_PROJECT]",
+      storageBucket: "[YOUR_PROJECT].appspot.com",
+      messagingSenderId: "...",
+      appId: "1:...:web:...",
+      measurementId: "G-..."
     };
-
     // Initialize Firebase
     firebase.initializeApp(firebaseConfig);
   </script>
+  <!-- END OF FIREBASE INIT CODE -->
+
   <script src="main.dart.js"></script>
 </body> 
 ```
 
 ### Using the plugin
 
-Once you have added the `firebase_core_web` dependency to your pubspec,
-you can use `package:firebase_core` as normal.
+Once you have modified your `web/index.html` file you should be able to use `package:firebase_core` as normal.
 
 [1]: ../firebase_core/firebase_core
 [2]: https://github.com/dart-lang/sdk/issues/33979

diff --git a/packages/firebase_core/firebase_core_web/pubspec.yaml b/packages/firebase_core/firebase_core_web/pubspec.yaml
@@ -1,7 +1,7 @@
 name: firebase_core_web
 description: The web implementation of firebase_core
 homepage: https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_core/firebase_core_web
-version: 0.1.1+1
+version: 0.1.1+2
 
 flutter:
   plugin: