Angular Directive.g Signin

📐 AngularJS Directive for Google Plus Sign-in Button
Alternatives To Angular Directive.g Signin
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Google Login1,7998651958 months ago94January 04, 2021201mitJavaScript
A React Google Login Component
Make Gis Great Again780
3 years ago32mitJavaScript
This web extension adds back "View Image" button to Google Image Search results.
React Native Google Cast612767 months ago53July 06, 202257mitJava
React Native wrapper for the Google Cast SDK
5 years ago4apache-2.0Java
6 years ago18mitObjective-C
A Floating Action Button just like Google inbox for iOS
Fab Toolbar297
8 years ago5mitJava
Implementing Google's new material design FAB toolbar
Vue Google Signin Button2463254 years ago4May 25, 201918JavaScript
🔐 A simple Vue plugin to include a Google sign-in button into your web app.
Google Pay Button21332 months ago41December 13, 20222apache-2.0TypeScript
Google Pay button - React, Angular, and custom element
Elixir Auth Google198122 days ago23January 25, 20235gpl-2.0Elixir
👤Minimalist Google OAuth Authentication for Elixir Apps. Tested, Documented & Maintained. Setup in 5 mins. 🚀
Instant Hangouts190
7 years ago7apache-2.0JavaScript
Easily add Google+ Hangouts to any web page.
Alternatives To Angular Directive.g Signin
Select To Compare

Alternative Project Comparisons

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.

Popular Button Projects
Popular Google Projects
Popular User Interface Components Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.