Polymer 1.0: How to design a modern authentication

Question

Our Challenges:

It seems to me The Polymer 1.0 developer community faces the following challenges right now:

1. We have no user auth UX example to follow. This Stackoverflow question requests a user authentication UX example. And describes why it's needed. This Github issue also documents multiple user requests for such a user auth UX example. And there has also been lots of anecdotal chatter on the Polymer Slack Site about this issue as well.

2. Modals don't currently work inside <paper-drawer-panel>. This open bug issue report, this Stackoverflow question and its accepted answer collectively prove that a bug requires <paper-dialog modal> elements must go outside any <paper-drawer-panel> element in order for the modal to render properly (i.e., in front of the modal's backdrop, not behind it). This issue report and this Stackoverflow question also verify same.

3. But modals inside panels have become the defacto standard auth UX design. It seems to me a principle of modern web app design that user authentication buttons (e.g., login and signup) go inside the equivalent of whatever version or "analog" of <paper-drawer-panel> any given web app happens to use. (Also, these auth buttons usually appear in the upper right corner of every screen of the app until the user logs in. Then they are replaced with an icon or link indicating login status.)

Code Examples:

Refer to the code examples contained here (in the question and answer). That code would be the same for this question too.

Question:

How do we, the Polymer 1.0 development community, best meet these challenges and build the best user auth UX experience possible? Perhaps there is a mistake in my facts or assumptions stated above? Perhaps someone has a direct (or workaround) solution they can share? Perhaps someone from Google's Polymer team would like to chime in? Any and all ideas, suggestions, feedback and answers are welcome.

Answer 1

On this bug report rubenstolk provides a hack-fix as follows:

To implement @dhpollack's hack in a nice way, add this function to your custom element:

// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
  if (e.target.withBackdrop) {
    e.target.parentNode.insertBefore(e.target._backdrop, e.target);
  }
},

And add on-iron-overlay-opened="patchOverlay" to all your <paper-dialog>'s

I have tested it and verifies that it works. So for now, that solves challenge #2 in the question. Therefore, I suppose it is sufficient for now to wait until the bug is fixed.

Answer 2

I modified the PSK adding a login form, made out of a paper header panel, modifying routes for unauthenticated users and hiding the toolbar, by default. This is done with

document.getElementById('headerContainer').style.display='none';
document.getElementById('mainContainer').style.paddingTop=0;

The UI reappears with

document.getElementById('headerContainer').style.display='block';
document.getElementById('mainContainer').style.paddingTop=168px;

This is just the beginning of a solution. For a complete solution, I would like an iron auth element supporting generic host and usual OAuth sites.