Relaunch with Meteor - Google Login with Angular2-Meteor

Introduction

I decided to switch the framework from Oracle Jet to a combination of Angular2 and Meteor. The reason is I just prefer using Typescript and besides that Meteor has some nice functionalities like, offline support or Websockets, that work out of the box.

The first thing I am about to do is reimplement the Google Login button

Create app in Google 

Check out this blog to find out how to create a Google App. The two important things you need are the secret and the clientId.

Create a angular2-meteor app

Read this tutorial, if you want to find out more about how to create your first app.

https://angular-meteor.com/tutorials/socially/angular2/bootstrap

For creating your first app, you can clone this template using git

git clone https://github.com/bsliran/angular2-meteor-base socially

Install needed packages for Google Login

Switch to the root folder of your meteor app and enter the following commands
$ meteor npm install
$ meteor add service-configuration
$ meteor add accounts-google
$ meteor add accounts-ui
$ meteor npm install --save angular2-meteor-accounts-ui
$ meteor npm install --save angular2-blaze-template

Add the two modules to your app

Open the file client/imports/app/app.module.ts and make the following adjustment
@NgModule({
  ...
  // Modules
  imports: [
      ...
AccountsModule,
    Angular2BlazeTemplateModule,
...
  ],
  ...
})

Add the Google secret and clientId to your app

Create the file server/service-config.js and add the following lines of code
Meteor.startup(() => {
    ServiceConfiguration.configurations.remove({
        service: "google"
    });
    ServiceConfiguration.configurations.insert({
        service: "google",
        clientId: '....apps.googleusercontent.com',
        loginStyle: "popup",
        secret: '...'
    });
});

Add the Google login to your frontend

Open an existing HTML file and add the following line of code anywhere you want to
<blaze-template name="loginButtons"></blaze-template>

Typical scenarios needed while coding

Check if user is logged in
Typescript
@InjectUser('user')
export class AppComponent {
  user: Meteor.User;
  constructor() {
    if (Meteor.userId() != null) {
      alert('user logged in ;)');
    }
  }
}

HTML<h1 *ngIf="user">Hello Angular2-Meteor!</h1>

Interesting blog on how to protect URL paths
https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html#videos

Conclusion

My first experience with Meteor is, that Meteor is a framework, which is quite easy to handle compared to other frameworks.