Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vue-all-auth

loitd28MIT1.0.17

Vue all social authentication plugin help you add social sign in, sign out easy

vue, authentication, authen, plugin, vue.js, google, facebook, github, twitter

readme

vue-all-auth

Vue.js All Social Authentication

Sponsors & Backers

Vue.js All Auth is a MIT-based open source project. If you'd like to support me please consider: Become a backer or sponsor on Patreon One time donation via Paypal

How it made

I wrote this plugin when completing authentication part of a larger project called Vue-quick-template since at this time (Mar-2019), I couldn't find any social authentication plugin for Vue.js suit my need.
I am glad that this plugin can help you in your projects.

Installation

yarn add -D vue-all-auth

If you have old version and want to update to new released version: Using the same command, yarn will automatically pull latest version for you.

Using

If you use Vue-quick-template then I already set it up for you. Just go to /src/plugins/allauth.js for initialization.
If you already have your Vue.js project setup:

  • Create a folder and file /src/plugins/allauth.js and at main.js add this line:
    import "./plugins/allauth";
  • In src/plugins/allauth.js add these lines:
    ` import VueAllAuth from "vue-all-auth"; Vue.use(VueAllAuth, { google: {
      // keys for google
  client_id: "YOUR_GG_APP_ID.apps.googleusercontent.com", 
  scope: "profile email",
    }, facebook: {
      // keys for fb
  appId: "YOUR_FB_APP_ID",
  cookie: true,
  xfbml: true,
  version: "v3.2",
    }, twitter: {
      // keys for twitter
    }, github: {
      // keys for github
    }

}); Vue.allAuth().google().init(); Vue.allAuth().facebook().init();

* Inside Vue.js component file:

Template part

<b-form-group> <b-button type="submit" variant="danger" @click="ggSignIn" style="min-width: 15rem;"> <font-awesome-icon :icon="['fab', 'google']" class="mr-1"/> Continue with Google </b-button> </b-form-group> ``` Javascript part: ``` import Vue from "vue"; export default { name: "SocialLoginForm", methods: { ggSignIn: function (event) { // Prevent default action event.preventDefault() // console.log("Begin google authentication!"); Vue.allAuth().google().init() // console.log("This is this before calling allAuth(): "); let that = this Vue.allAuth().google().signIn(function (googleUser) { // console.log("This is googleUser in SocialLoginForm: "+googleUser); Vue.allAuth().google().printInfo() //just to check what you received // console.log("This is this in SocialLoginForm: "); // console.log(this); //--> at this time, this is undefined, that will be a Vue instance that.$router.push("/") }, function (error) { console.log("Something went wrong!"); console.log(error); }) }, } } ```