Let's take a look at a simple sample of a login. Using the
google-signinelement you could wait for the
google-signin-successevent to trigger and then retrieve/display information about the authenticated user and toggle the UI accordingly. Of course then you also have to handle the reverse case if a user signs out by listening for the
google-signinelement also offers an
isAuthorizedproperty that you can bind to and observe. Toggling the UI based on this property is as simple as adding
hidden$="[[isAuthorized]]"to elements you want to show/hide. No extra JS necessary for this, as opposed to before where you had to set
isAuthorizedin the event handlers.
To retrieve user information once authorization has been granted you could add an observer to
isAuthorized, but I think the much nicer solution is to make
usera computed property that depends on
isAuthorized. Whenever the value of
isAuthorizedchanges this will re-evaluate the function and set the
Let's take this sample a bit further. In many cases you will have to retrieve some more information from your server or elsewhere about the authenticated user. So you would need to trigger some request once the user is signed in and handle the response once it is available. In this sample I'm using my
discovery-api-elementsto fetch information about the user from Google+, but you can do something similar using
iron-ajaxor any other data-fetching element.
Instead of triggering the request manually, what you can do is binding the
autoproperty (at least for discovery-api-elements or iron-ajax) to the
isAuthorizedand with it
autobecomes true the request will be triggered automatically and you just have to handle the response.
But this won't remove the data in case the user signs out. To achieve this we make the data that is displayed (
activities) a computed property that depends on both the
responsefrom the data-fetching element and the
Here's what happens now, when a user signs in:
- This sets the
autoproperty on the data element which triggers the request.
- Once the request completes
- This change triggers recomputing
- Once there are items in the
activitiesarray, they will be displayed by the
- This triggers recomputing
activitieswhich will be set to an empty list.