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.jsand atmain.jsadd this line:
import "./plugins/allauth";
- In
src/plugins/allauth.jsadd 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
<!-- Google login button -->
<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);
})
},
}
}
1 Aug 9, 2020
0 Apr 29, 2021
57 Nov 10, 2022
0 Oct 10, 2021
6 Jul 30, 2020
15 Feb 7, 2018
1 Sep 30, 2017
18 Dec 23, 2022
9 Jun 7, 2022
309 Dec 8, 2022
37 Nov 3, 2022
128 Dec 17, 2022
1 Jul 23, 2021
1.4k Nov 26, 2022
13 Sep 11, 2020
2.3k Dec 30, 2022
288 Oct 17, 2022
112 Dec 17, 2022