g-signin | AngularJS Directive for Google Plus Sign-in Button



Stars : 10

Forks : 10

Created by Jerad Bitner

bower install angular-directive.g-signin

Demo Download GitHub

Angular Google Plus Sign-in Button Directive


A good starting place for a Google Plus sign-in button. Specify your client id and you're done. Well, almost. You'll also want to set up a listener for event:google-plus-signin-success so you can do something once your users are authenticated.


  1. Include google-plus-signin.js.
  2. Add directive.g+signin as a dependency to your app.
  3. Add <google-plus-signin clientid="your-client-id"> to your app.
  4. Create a listener on your $scope for event:google-plus-signin-success to detect when your users are authenticated.
  5. Optional: Listen for event:google-plus-signin-failure to handle authentication errors and sign outs.


1: Language (supported languages):

  <google-plus-signin clientid="620125449078" language="sv"></google-plus-signin>

2: Auto Render - defaults to true. If false, will not render a context-aware button generated by the gapi.signin2.render() method

  <google-plus-signin clientid="620125449078" autorender="false"></google-plus-signin>

3: Custom Target ID - When autorender is set to false, this will tell the directive what element ID to attach the sign-in click listener to.

  <google-plus-signin clientid="620125449078" autorender="false" customtargetid="my-custom-element">
      <div id="my-custom-element"><button>Sign In With Google</button></div>


Installable via bower:

bower install angular-directive.g-signin


See the homepage for an example.

<div ng-app="directive.g+signin">
  <google-plus-signin clientid="620125449078"></google-plus-signin>
  <p>^ This is a Google Plus sign-in button</p>

Handling Signin Callback from Google Plus

You can listen for event:google-plus-signin-success and event:google-plus-signin-failure and handle them appropriately.

  $scope.$on('event:google-plus-signin-success', function (event,authResult) {
    // Send login to server or save into cookie
  $scope.$on('event:google-plus-signin-failure', function (event,authResult) {
    // Auth failure or signout detected



♡ CopyHeart 2013 by Jerad Bitner | Copying is an act of love. Please copy.


Javascript plugin


Leave a Reply