Neanderthals Programming Machines

    vue-all-auth

    1.0.16 • Public • Published

    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
    <!-- 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);
                })
            },
        }
    }
    

    Install

    npm i vue-all-auth

    DownloadsWeekly Downloads

    1

    Version

    1.0.16

    License

    MIT

    Unpacked Size

    425 kB

    Total Files

    29

    Last publish

    Collaborators

    • loitd