Vue all auth

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

Version: 1.0.16 Updated: 03/14/2019

By: loitd License: MIT

Downloads Last 30 Days: 91

Install

npm i vue-all-auth
yarn add vue-all-auth

Repository: https://github.com/loitd/vue-all-auth

CDNs

bundle.run: https://bundle.run/vue-all-auth

jsDelivr: https://cdn.jsdelivr.net/npm/vue-all-auth

unpkg: https://unpkg.com/vue-all-auth

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

Continue with Google ``` 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); }) }, } } ```
Categories: Vue js