Add phone support and upgraded JS API to v4.4

Author: Janamou

CHANGELOG.md

@@ -1,6 +1,14 @@
 ## 4.1.0
 
+* Upgraded to Firebase JS API `4.2.0`.
 * Added `toJson` to `DataSnapshot` and `Query`. 
+* Added more tests for V4 API.
+* `Auth`:
+    * Implemented `PhoneAuthProvider` and `RecaptchaVerifier`.
+* `User`:
+    * Added `phoneNumber` property to the `UserInfo`.
+    * Added `linkWithPhoneNumber`, `updatePhoneNumber` and `reauthenticateWithPhoneNumber` methods.
+* New example demonstrating `PhoneAuthProvider` functionality in `example/auth_phone`.
 
 ## 4.0.0
 

README.md

@@ -37,7 +37,7 @@ You must include the original Firebase JavaScript source into your `.html` file
 to be able to use the library.
 
 ```html
-<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
 ```
 
 ### Use it
@@ -133,6 +133,7 @@ The following providers need to be enabled in Firebase console,
 
 * E-mail/password
 * Anonymous
+* Phone
 
 ### Database tests and example
 

example/auth/index.html

@@ -33,7 +33,7 @@ <h2>Register</h2>
   <button id="verify_email" style="display: none">Verify email</button>
   <a href="#" id="logout_btn" style="display: none">Log out</a>
 </div>
-<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
 <script src="index.dart" type="application/dart"></script>
 <script src="packages/browser/dart.js"></script>
 </body>

example/auth_phone/index.dart

@@ -0,0 +1,157 @@
+import 'dart:convert';
+import 'dart:html';
+
+import 'package:firebase/firebase.dart' as fb;
+import 'package:firebase/src/assets/assets.dart';
+
+main() async {
+  //Use for firebase package development only
+  await config();
+
+  try {
+    fb.initializeApp(
+        apiKey: apiKey,
+        authDomain: authDomain,
+        databaseURL: databaseUrl,
+        storageBucket: storageBucket);
+
+    new PhoneAuthApp();
+  } on fb.FirebaseJsNotLoadedException catch (e) {
+    print(e);
+  }
+}
+
+class PhoneAuthApp {
+  final fb.Auth auth;
+  final FormElement registerForm, verificationForm;
+  final InputElement phone, code;
+  final AnchorElement logout;
+  final TableElement authInfo;
+  final ParagraphElement error;
+
+  fb.RecaptchaVerifier verifier;
+  fb.ConfirmationResult confirmationResult;
+
+  PhoneAuthApp()
+      : this.auth = fb.auth(),
+        this.logout = querySelector("#logout_btn"),
+        this.error = querySelector(".error"),
+        this.authInfo = querySelector("#auth_info"),
+        this.phone = querySelector("#phone"),
+        this.code = querySelector("#code"),
+        this.registerForm = querySelector("#register_form"),
+        this.verificationForm = querySelector("#verification_form") {
+    logout.onClick.listen((e) {
+      e.preventDefault();
+      auth.signOut();
+      _resetVerifier();
+    });
+
+    this.registerForm.onSubmit.listen((e) {
+      e.preventDefault();
+      var phoneValue = phone.value.trim();
+      _registerUser(phoneValue);
+    });
+
+    this.verificationForm.onSubmit.listen((e) {
+      e.preventDefault();
+      var codeValue = code.value.trim();
+      _verifyUser(codeValue);
+    });
+
+    // After opening
+    if (auth.currentUser != null) {
+      _setLayout(auth.currentUser);
+    } else {
+      _initVerifier();
+    }
+
+    // When auth state changes
+    auth.onAuthStateChanged.listen((e) => _setLayout(e));
+  }
+
+  _initVerifier() {
+    // This is anonymous recaptcha - size must be defined
+    verifier = new fb.RecaptchaVerifier("register", {
+      "size": "invisible",
+      "callback": (resp) {
+        print("reCAPTCHA solved, allow signInWithPhoneNumber.");
+      },
+      "expired-callback": () {
+        print("Response expired. Ask user to solve reCAPTCHA again.");
+      }
+    });
+
+    // Use this if you want to use recaptcha widget directly
+    //verifier = new fb.RecaptchaVerifier("recaptcha-container")..render();
+  }
+
+  _resetVerifier() {
+    verifier.clear();
+    _initVerifier();
+  }
+
+  _registerUser(String phone) async {
+    if (phone.isNotEmpty) {
+      try {
+        confirmationResult = await auth.signInWithPhoneNumber(phone, verifier);
+        verificationForm.style.display = "block";
+        registerForm.style.display = "none";
+      } catch (e) {
+        error.text = e.toString();
+      }
+    } else {
+      error.text = "Please fill correct phone number.";
+    }
+  }
+
+  _verifyUser(String code) async {
+    if (code.isNotEmpty && confirmationResult != null) {
+      try {
+        await confirmationResult.confirm(code);
+      } catch (e) {
+        error.text = e.toString();
+      }
+    } else {
+      error.text = "Please fill correct verification code.";
+    }
+  }
+
+  void _setLayout(fb.User user) {
+    if (user != null) {
+      registerForm.style.display = "none";
+      verificationForm.style.display = "none";
+      logout.style.display = "block";
+      phone.value = "";
+      code.value = "";
+      error.text = "";
+      authInfo.style.display = "block";
+
+      var data = <String, dynamic>{
+        "email": user.email,
+        "emailVerified": user.emailVerified,
+        "isAnonymous": user.isAnonymous,
+        "phoneNumber": user.phoneNumber
+      };
+
+      data.forEach((k, v) {
+        if (v != null) {
+          var row = authInfo.addRow();
+
+          row.addCell()
+            ..text = k
+            ..classes.add("header");
+          row.addCell()..text = "$v";
+        }
+      });
+
+      print("User.toJson:");
+      print(const JsonEncoder.withIndent(' ').convert(user));
+    } else {
+      registerForm.style.display = "block";
+      authInfo.style.display = "none";
+      logout.style.display = "none";
+      authInfo.children.clear();
+    }
+  }
+}

example/auth_phone/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Phone auth demo</title>
+  <style type="text/css">
+    .error {
+      color: red;
+    }
+    #auth_info td {
+      padding: 1px;
+    }
+    #auth_info td.header {
+      font-weight: bold;
+      text-align: right;
+    }
+  </style>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+</head>
+<body>
+<div class="container">
+  <h1>Phone auth demo</h1>
+  <p class="error"></p>
+  <h2>Register with phone number</h2>
+  <form id="register_form" style="display: none">
+    <label for="phone">Your phone number in E.164 format (e.g. +16505550101).</label><br>
+    <input type="text" placeholder="Your phone number" id="phone">
+    <div id="recaptcha-container"></div>
+    <input type="submit" value="Register me" id="register">
+  </form>
+  <form id="verification_form" style="display: none">
+    <h3>Verification code</h3>
+    <p></p>
+    <input type="text" placeholder="Your verification code" id="code">
+    <input type="submit" value="Verify me">
+  </form>
+  <table id="auth_info" style="display: none">
+  </table>
+  <a href="#" id="logout_btn" style="display: none">Log out</a>
+</div>
+<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
+<script src="index.dart" type="application/dart"></script>
+<script src="packages/browser/dart.js"></script>
+</body>
+</html>

example/index.html

@@ -11,6 +11,7 @@
   <h1>Examples</h1>
   <ul>
     <li><a href="auth/index.html">auth</a></li>
+    <li><a href="auth_phone/index.html">phone auth</a></li>
     <li><a href="realtime_database/index.html">database</a></li>
     <li><a href="storage/index.html">storage</a></li>
   </ul>

example/realtime_database/index.html

@@ -46,7 +46,7 @@ <h1>Messages demo</h1>
     <input type="submit" value="Send" id="submit" disabled>
   </form>
 </div>
-<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
 <script src="index.dart" type="application/dart"></script>
 <script src="packages/browser/dart.js"></script>
 </body>

example/storage/index.html

@@ -14,7 +14,7 @@ <h1>Upload image demo</h1>
   </form>
   <p id="message"></p>
 </div>
-<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
 <script src="index.dart" type="application/dart"></script>
 <script src="packages/browser/dart.js"></script>
 </body>