Extracting Google user account properties in Meteor

In Chapter 9 of the Meteor Tutorial you can learn about how to add user accounts and login/out functionality to your sample todo app. Towards the end the tutorial suggests to the adventurous to add the accounts-facebook package, to enable Facebook login. I did, verified that I get a Facebook login button, and promptly removed the package (not a Facebook fan here!). Instead, I added the Google accounts package:

> meteor add accounts-google

added oauth at version 1.1.2added google at version 1.1.2added oauth2 at version 1.1.1added accounts-google at version 1.0.2added accounts-oauth at version 1.1.2accounts-google: Login service for Google accounts

When you do, you get a nice Google button in the Sign in menu, but it's all red and says "Configure Google Login". In other words, a little setup is needed before you can log in with a Google account. Fortunately, if you click the red button, you get detailed and fairly straightforward instructions for how to do so. In short order, you should have it all working.

Customizing the {{username}}

The tutorial has us identify each task by the username of the account that created the task with the {{username}} template tag. This works fine as long as we use simple username/password authentication, but as soon as we replace or augment it with Google accounts, the template tag is replaced with an empty string.

Since this template tag is in the scope of the task template, which is called in the context of an iteration of the results of a Tasks.find(...), the value of {{username}} comes from the expression Meteor.user().username in:

If you logged in with a Google account, you will see it listed. Note how in the whole json structure of this user object there is no username key. That's why.

However, there are several interesting fields that could be used instead, or for other purposes: name (the full name), email, given_name, family_name, gender, and picture. Let's use given_name as the name to show next to each task. Because of the way the json object for the Google account is nested, this is how we can refer to it: