Adds firebaseui.auth.AuthUI.getInstance(appId) to get the corresponding AuthUI instance as specified by the provided appId.

Adds a destroy method to destroy an AuthUI instance.
Fixes Nascar buttons getting grayed when user tabs through them.
Hides cancel button when only Email provider is used and accountchooser.com is disabled.

PiperOrigin-RevId: 162376230
Change-Id: Ie7cc3c0f86fef05bf5322af342cc1abc2e6037d1

Author: Googler

README.md

@@ -800,6 +800,26 @@ middle of performing a sign-in flow. You should generally avoid re-rendering the
 widget in the middle of an action, but if you do, to avoid the warning, you
 should use the `reset()` method before re-rendering the widget.
 
+### Tips for initializing a new UI instance with the same Auth instance
+
+When trying to initialize a new UI widget with the same Auth instance, you will
+get an `app/duplicate-app` error. In general, you should keep a reference to
+the AuthUI instance and instead call `reset()` and then `start(...)` again to
+re-render the widget.
+
+If you don't keep a reference to that AuthUI instance, you can get the reference
+by calling `firebaseui.auth.AuthUI.getInstance(appId)` where `appId` is the same
+as the optional one used to initialize the AuthUI instance. If none was provided
+just call `firebaseui.auth.AuthUI.getInstance()`.
+
+This is the recommended way but you also have the option to delete the AuthUI
+instance by calling `ui.delete()` which returns a promise that resolves on
+successful deletion. You can then initialize a new UI instance with the same
+Auth instance without getting the `app/duplicate-app` error. At any time, you
+can only have one AuthUI instance with the same `appId` or the same Auth
+instance.
+
+
 ### FirebaseUI is broken in IE11 when deployed on a local server accessed through `localhost` (but works when deployed on a remote server)
 
 Several developers reported issues with IE11 when testing the widget integration on a server deployed locally, accessing the application through a `localhost` address. However, it doesn't impact applications deployed on a server (as you can verify in the [demo app](https://fir-ui-demo-84a6c.firebaseapp.com/)).

changelog.txt

@@ -0,0 +1,4 @@
+feature - Adds firebaseui.auth.AuthUI.getInstance(appId) to get the corresponding AuthUI instance as specified by the provided appId.
+feature - Adds a destroy method to destroy an AuthUI instance.
+fixed - Fixes Nascar buttons getting grayed when user tabs through them.
+fixed - Hides cancel button when only Email provider is used and accountchooser.com is disabled.

javascript/testing/appclient.js

@@ -22,6 +22,7 @@ goog.setTestOnly();
 
 var Disposable = goog.require('goog.Disposable');
 var FakeAuthClient = goog.require('firebaseui.auth.testing.FakeAuthClient');
+var GoogPromise = goog.require('goog.Promise');
 
 
 
@@ -48,4 +49,13 @@ FakeAppClient.prototype.auth = function() {
   return this.auth_;
 };
 
+
+/**
+ * Dummy app delete method.
+ * @return {!GoogPromise} The promise that resolves upon deletion.
+ */
+FakeAppClient.prototype.delete = function() {
+  return GoogPromise.resolve();
+};
+
 exports = FakeAppClient;

javascript/ui/page/signin.js

@@ -31,7 +31,7 @@ goog.require('goog.dom.selection');
  * UI component for the user to enter their email.
  * @param {function()} onEmailEnter Callback to invoke when enter key (or its
  *     equivalent) is detected.
- * @param {function()} onCancelClick Callback to invoke when cancel button
+ * @param {?function()=} opt_onCancelClick Callback to invoke when cancel button
  *     is clicked.
  * @param {string=} opt_email The email to prefill.
  * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
@@ -40,28 +40,27 @@ goog.require('goog.dom.selection');
  */
 firebaseui.auth.ui.page.SignIn = function(
     onEmailEnter,
-    onCancelClick,
+    opt_onCancelClick,
     opt_email,
     opt_domHelper) {
   firebaseui.auth.ui.page.SignIn.base(
       this,
       'constructor',
       firebaseui.auth.soy2.page.signIn,
-      {email: opt_email},
+      {email: opt_email, displayCancelButton: !!opt_onCancelClick},
       opt_domHelper,
       'signIn');
   this.onEmailEnter_ = onEmailEnter;
-  this.onCancelClick_ = onCancelClick;
+  this.onCancelClick_ = opt_onCancelClick;
 };
 goog.inherits(firebaseui.auth.ui.page.SignIn, firebaseui.auth.ui.page.Base);
 
 
 /** @override */
 firebaseui.auth.ui.page.SignIn.prototype.enterDocument = function() {
   this.initEmailElement(this.onEmailEnter_);
-  var self = this;
   // Handle a click on the submit button or cancel button.
-  this.initFormElement(this.onEmailEnter_, this.onCancelClick_);
+  this.initFormElement(this.onEmailEnter_, this.onCancelClick_ || undefined);
   this.setupFocus_();
   firebaseui.auth.ui.page.SignIn.base(this, 'enterDocument');
 };

javascript/ui/page/signin_test.js

@@ -112,6 +112,28 @@ function testSignIn_pageEvents() {
 }
 
 
+function testSignIn_noOnCancelClick() {
+  component.dispose();
+  // Initialize component with no onCancelClick callback.
+  component = new firebaseui.auth.ui.page.SignIn(
+      goog.bind(
+          firebaseui.auth.ui.element.EmailTestHelper.prototype.onEnter,
+          emailTestHelper));
+  component.render(root);
+  emailTestHelper.setComponent(component);
+  // No cancel button
+  assertNull(component.getSecondaryLinkElement());
+  // Submit button should be available.
+  assertNotNull(component.getSubmitElement());
+  // Confirm pressing enter in email field will submit form.
+  emailTestHelper.resetState();
+  assertFalse(emailTestHelper.enterPressed_);
+  goog.testing.events.fireKeySequence(
+      component.getEmailElement(), goog.events.KeyCodes.ENTER);
+  assertTrue(emailTestHelper.enterPressed_);
+}
+
+
 function testSignIn_getPageId() {
   assertEquals('signIn', component.getPageId());
 }

javascript/widgets/authui.js

@@ -70,6 +70,20 @@ goog.require('goog.events.EventType');
  * @constructor
  */
 firebaseui.auth.AuthUI = function(auth, opt_appId) {
+  /** @private {boolean} Whether the current instance is deleted. */
+  this.deleted_ = false;
+  // Check if an instance with the same key exists. If so, throw an error,
+  // otherwise, save that instance.
+  // Get the instance get.
+  var key = firebaseui.auth.AuthUI.getInstanceKey_(opt_appId);
+  if (firebaseui.auth.AuthUI.instances_[key]) {
+    // An instance exists for this key. Throw an error.
+    throw new Error(
+        'An AuthUI instance already exists for the key "' + key + '"');
+  } else {
+    // New instance, save reference to it.
+    firebaseui.auth.AuthUI.instances_[key] = this;
+  }
   /** @private {!firebase.auth.Auth} The Firebase Auth instance. */
   this.auth_ = auth;
   var tempApp = firebase.initializeApp({
@@ -112,6 +126,48 @@ firebaseui.auth.AuthUI = function(auth, opt_appId) {
 };
 
 
+/** Resets all internal globals. Used for testing only. */
+firebaseui.auth.AuthUI.resetAllInternals = function() {
+  firebaseui.auth.AuthUI.instances_ = {};
+  firebaseui.auth.AuthUI.widgetElement_ = null;
+};
+
+
+/**
+ * @private {!Object.<!string, !firebaseui.auth.AuthUI>} Map containing the
+ *     firebaseui.auth.AuthUI instances keyed by their app IDs.
+ */
+firebaseui.auth.AuthUI.instances_ = {};
+
+
+/**
+ * Returns the instance key corresponding the appId provided.
+ * @param {?string=} opt_appId The optional app ID whose instance is to be
+ *     provided.
+ * @return {string} The key corresponding to the provided app ID.
+ * @private
+ */
+firebaseui.auth.AuthUI.getInstanceKey_ = function(opt_appId) {
+  return opt_appId || firebaseui.auth.AuthUI.DEFAULT_INSTANCE_KEY_;
+};
+
+
+/**
+ * Returns the AuthUI instance corresponding to the appId provided.
+ * @param {?string=} opt_appId The optional app ID whose instance is to be
+ *     provided.
+ * @return {?firebaseui.auth.AuthUI} The AuthUI instance corresponding to the
+ *     app ID provided.
+ */
+firebaseui.auth.AuthUI.getInstance = function(opt_appId) {
+  var key = firebaseui.auth.AuthUI.getInstanceKey_(opt_appId);
+  if (firebaseui.auth.AuthUI.instances_[key]) {
+    return firebaseui.auth.AuthUI.instances_[key];
+  }
+  return null;
+};
+
+
 /**
  * The suffix of the temp Auth instance app name.
  * @const {string}
@@ -120,6 +176,14 @@ firebaseui.auth.AuthUI = function(auth, opt_appId) {
 firebaseui.auth.AuthUI.TEMP_APP_NAME_SUFFIX_ = '-firebaseui-temp';
 
 
+/**
+ * The default instance key when no app ID is provided.
+ * @const {string}
+ * @private
+ */
+firebaseui.auth.AuthUI.DEFAULT_INSTANCE_KEY_ = '[DEFAULT]';
+
+
 /**
  * If sign-in succeeded, returns the signed in user. If sign-in was
  * unsuccessful, fails with an error. If no redirect operation was called,
@@ -129,6 +193,8 @@ firebaseui.auth.AuthUI.TEMP_APP_NAME_SUFFIX_ = '-firebaseui-temp';
  *     from the redirect-based sign-in flow.
  */
 firebaseui.auth.AuthUI.prototype.getRedirectResult = function() {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   if (!this.getRedirectResult_) {
     this.getRedirectResult_ = goog.Promise.resolve(
         this.getAuth().getRedirectResult());
@@ -142,6 +208,8 @@ firebaseui.auth.AuthUI.prototype.getRedirectResult = function() {
  *     component.
  */
 firebaseui.auth.AuthUI.prototype.setCurrentComponent = function(component) {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   this.currentComponent_ = component;
 };
 
@@ -175,6 +243,8 @@ firebaseui.auth.AuthUI.getAuthUi = function() {
  *     developer provided Auth instance.
  */
 firebaseui.auth.AuthUI.prototype.getAuth = function() {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   return this.tempAuth_;
 };
 
@@ -184,13 +254,17 @@ firebaseui.auth.AuthUI.prototype.getAuth = function() {
  *     instance.
  */
 firebaseui.auth.AuthUI.prototype.getExternalAuth = function() {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   return this.auth_;
 };
 
 /**
  * @return {string|undefined} The app id if provided.
  */
 firebaseui.auth.AuthUI.prototype.getAppId = function() {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   return this.appId_;
 };
 
@@ -204,6 +278,8 @@ firebaseui.auth.AuthUI.prototype.getAppId = function() {
  * @return {boolean} Whether the app has pending operations to be performed.
  */
 firebaseui.auth.AuthUI.prototype.isPending = function() {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   return firebaseui.auth.storage.hasPendingEmailCredential(this.getAppId());
 };
 
@@ -217,6 +293,8 @@ firebaseui.auth.AuthUI.prototype.isPending = function() {
  * @param {Object} config The configuration for sign-in button.
  */
 firebaseui.auth.AuthUI.prototype.start = function(element, config) {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   var self = this;
 
   // There is a problem when config in second call modifies accountchooser.com
@@ -289,6 +367,8 @@ firebaseui.auth.AuthUI.prototype.initElement_ = function(element) {
  * @param {?goog.Promise|?firebase.Promise|?function()} p The pending promise.
  */
 firebaseui.auth.AuthUI.prototype.registerPending = function(p) {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   var self = this;
   if (p) {
     this.pending_.push(p);
@@ -310,12 +390,16 @@ firebaseui.auth.AuthUI.prototype.registerPending = function(p) {
  *     getter.
  */
 firebaseui.auth.AuthUI.prototype.getAuthUiGetter = function() {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   return firebaseui.auth.AuthUI.getAuthUi;
 };
 
 
 /** Reset rendered widget and removes it from display. */
 firebaseui.auth.AuthUI.prototype.reset = function() {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   // Remove the "lang" attribute that we set in start().
   if (this.widgetElement_) {
     this.widgetElement_.removeAttribute('lang');
@@ -404,6 +488,8 @@ firebaseui.auth.AuthUI.prototype.initPageChangeListener_ = function(element) {
  * @param {*} value The value of the configuration.
  */
 firebaseui.auth.AuthUI.prototype.updateConfig = function(name, value) {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   this.config_.update(name, value);
 };
 
@@ -413,6 +499,8 @@ firebaseui.auth.AuthUI.prototype.updateConfig = function(name, value) {
  * @param {Object} config The application configuration.
  */
 firebaseui.auth.AuthUI.prototype.setConfig = function(config) {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   this.config_.setConfig(config);
 };
 
@@ -421,6 +509,8 @@ firebaseui.auth.AuthUI.prototype.setConfig = function(config) {
  * @return {firebaseui.auth.widget.Config} The application configuration.
  */
 firebaseui.auth.AuthUI.prototype.getConfig = function() {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   return this.config_;
 };
 
@@ -429,5 +519,41 @@ firebaseui.auth.AuthUI.prototype.getConfig = function() {
  * Triggers the sign-in flow.
  */
 firebaseui.auth.AuthUI.prototype.signIn = function() {
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
   firebaseui.auth.widget.handler.startSignIn(this);
 };
+
+
+/**
+ * Checks if the instance is destroyed. If so, throws an error.
+ * @private
+ */
+firebaseui.auth.AuthUI.prototype.checkIfDestroyed_ = function() {
+  if (this.deleted_) {
+    throw new Error('AuthUI instance is deleted!');
+  }
+};
+
+
+/**
+ * Destroys the AuthUI instance.
+ * @return {!firebase.Promise} The promise that resolves when the instance
+ *     is successfully deleted.
+ */
+firebaseui.auth.AuthUI.prototype.delete = function() {
+  var self = this;
+  // Check if instance is already destroyed.
+  this.checkIfDestroyed_();
+  // Delete the temporary app instance.
+  return this.tempAuth_.app.delete().then(function() {
+    // Get instance key.
+    var key = firebaseui.auth.AuthUI.getInstanceKey_(self.getAppId());
+    // Delete any saved AuthUI instance.
+    delete firebaseui.auth.AuthUI.instances_[key];
+    // Reset current instance.
+    self.reset();
+    // Mark as deleted.
+    self.deleted_ = true;
+  });
+};