Firefox Accounts Signup Form


Certain bedrock pages such as /firefox/accounts and /firefox/firstrun feature a Firefox Accounts signup form using an embedded iframe. To test the signup flow on a non-production environment requires some additional Firefox profile configuration.

Demo Server Testing

  1. Open about:profiles.
  2. Click the Create a New Profile button and enter the profile name FxA Test Demo.
  3. Find FxA Test Demo in the profile list and click Launch profile in new browser.
  4. Open about:config and add a new preference called identity.fxaccounts.autoconfig.uri with the value
  5. Open about:preferences#sync and click Sign in.
  6. Verify that the sign in page loads from (but don’t actually sign in).
  7. Restart the browser.
  8. Navigate to the web page containing the form and test signing up.

Clearing the iframe cache

To clear browser cache while testing multiple accounts, append /clear to the iframe’s source URL, e.g.

Embedding on a page

To embed the Firefox Accounts iframe on a page:

  1. Add the FxA JavaScript & Less files to the page’s bundles:
    • media/js/base/mozilla-fxa-iframe.js
    • media/css/base/mozilla-fxa-iframe.less
  2. Add the following attributes and values to any element on the page (the parent element of the <iframe> is a good option):

    id="fxa-iframe-config" data-host="{{ settings.FXA_IFRAME_SRC }}" data-mozillaonline-host="{{ settings.FXA_IFRAME_SRC_MOZILLAONLINE }}"

  3. Add the <iframe> to the page with the following attributes and values:

    <iframe id="fxa" scrolling="no" data-src="{{ settings.FXA_IFRAME_SRC }}?utm_campaign=fxa-embedded-form&amp;utm_content=fx-{{ version }}&amp;service=sync&amp;context=iframe&amp;style=chromeless&amp;haltAfterSignIn=true"></iframe>


    Note that each implementation of the <iframe> may require unique URL parameters in the data-src attribute for some or all of the following:

    • utm_medium
    • utm_source
    • entrypoint