google-oauth-vue-directive

Straightforward Vue.js directive to get, in 4 steps, Google sigIn into your website.

Steps

1. Install it

  npm install --save google-oauth-vue-directive

2. Import the directive into your Vue component.

<template>
  {...}
</template>
<script>
  import googleOauth from 'google-oauth-vue-directive'

  export default {
    ...,
    directives: {
      googleOauth
    },
    ...
  }
</script>

3. Create method onGoogleAuthSuccess and onGoogleAuthError.

  <template>
    {...}
  </template>
  <script>
    import googleOauth from 'google-oauth-vue-directive'

    export default {
      ...,
      directives: {
        googleOauth
      },
      methods: {
        onGoogleAuthSuccess (googleAuth) {
          const isSigned = googleAuth.isSignedIn.get()
          // you can do stuff here with googleAuth object. Read google docs
        }
        onGoogleAuthError (err) {
          console.log(':oauth-error:', error)
          // you can do stuff here with the received error.
        }
      }
      ...
    }
  </script>

4. Use the directive v-google-oauth="clientId" in your HTML tag.

 <template>
   ...
   <button  v-google-oauth="clientId"  class="button">SigIn with Google</button>
   ...
 </template>
 <script>
   import googleOauth from 'google-oauth-vue-directive'

   export default {
     ...,
     directives: {
       googleOauth
     },
     data () {
       return  {
         clientId: 'YOUR_CLIENT_ID.apps.googleusercontent.com'
       }
     },
     ...
   }
 </script>

License

MIT © Edward S. Ramos