Polymer: auth component that takes a generic component - yielding

[mbana]

Imagine one wanted to have a generic component that does authentication on an element that is passed in, somehow. Generally, in other frameworks at least, this auth component would yield to the component being injected, so something like:

<comp-to-be-wrapped></comp-to-be-wrapped>
<auth comp-to-wrap=???></auth-comp>

The end goal is; components that get shipped on their own include this auth component that does all the auth, otherwise, when they're used in the context of the entire app, the shell does the auth.

I find the Polymer documentation kind of avoids answering the hard questions, like above. Is there an example of an _official_ Polymer app, as in from the team, that does auth?

I've just spent a lot of time debugging code related to sub-property notification in dom-repeat - the Polymer docs need to be updated to link to issues - this is not the first time which docs made be believe something was functional but wasn't.

[TimvdLippe]

I am planning to write a blog post about authentication and how we handle it, but the gist comes down to this:

You define a component that handles the authentication and can be used to "decorate" other components. To do so, you can use dom-if and <content>:

<my-auth-component user="[[user]]">
  <my-secret-page></my-secret-page>
</my-auth-component>

<dom-module id="my-auth-component">
  <template>
    <template is="dom-if" if="[[!_validUser]]">
      <not-valid-page></not-valid-page>
    </template>
    <template is="dom-if" if="[[_validUser]]">
      <content></content>
    </template>
  </template>
  <script>
  Polymer({
    is: 'my-auth-component',
    properties: {
      user: Object,
      _validUser: {
        type: Boolean,
        computed: '_checkValidUser(user)'
      }
    }
  })
  </script>
</dom-module>

Using this pattern, you can even wrap multiple components to check multiple conditions:

<my-auth-component user="[[user]]">
  <my-admin-auth-component admin="[[user.admin]]">
    <my-secret-page></my-secret-page>
  </my-admin-auth-component>
</my-auth-component>

[ebidel]

https://elements.polymer-project.org/elements/google-signin is one example of this. It uses the notion of a https://elements.polymer-project.org/elements/google-signin?active=google-signin-aware element that respects page-level auth settings for Google Sign-in. It can also be used to auth-enable a set of components.

[mbana]

Thank you all so much.

@TimvdLippe snippet is what I had in mind. I'll give that a go. I wonder why the loading spinners and such are not designed as such. I mean there is a going to be a lot of Polymer (user) code out there that just does if checks to calculate progress - I've done so myself and it becomes tedious - so that the progress can be removed . I think with @TimvdLippe approach this can all be made more generic. Hope that made sense, if not I can show snippets.