https://github.com/loitd/vue-all-auth
Vue.js All Auth
https://github.com/loitd/vue-all-auth
api auth authentication facebook github google login logout plugin signin signout vue vue-all-auth vue2 vuejs
Last synced: about 2 months ago
JSON representation
Vue.js All Auth
- Host: GitHub
- URL: https://github.com/loitd/vue-all-auth
- Owner: loitd
- License: mit
- Created: 2019-03-11T10:09:50.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-04T04:27:53.000Z (about 1 year ago)
- Last Synced: 2025-03-18T13:46:00.723Z (2 months ago)
- Topics: api, auth, authentication, facebook, github, google, login, logout, plugin, signin, signout, vue, vue-all-auth, vue2, vuejs
- Language: HTML
- Size: 904 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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](https://www.patreon.com/loitd)
[One time donation via Paypal](https://www.paypal.me/loitd)
## How it made
I wrote this plugin when completing authentication part of a larger project called [Vue-quick-template](https://github.com/loitd/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](https://github.com/loitd/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);
})
},
}
}
```