@xtiannyeto/vue-auth-social NPM

@xtiannyeto/vue-auth-social

Use social authentication Facebook / Google with Vue 3 composition api

Installation

Use the package manager yarn or npm to install vue-auth-social.

yarn add @xtiannyeto/vue-auth-social
npm install @xtiannyeto/vue-auth-social

in your main css or scss file

@import '~vue-auth-social/dist/vue-auth-social.css';

Using Auth Modal you need tailwind in your main css or scss file

@import '~tailwindcss/base';
@import '~tailwindcss/components';
@import '~tailwindcss/utilities';

Usage

Facebook Auth

 <FacebookAuth :appId="facebookAppId" @on-submit="facebook">
    Facebook <!-- Whatever you want event your own custom button-->
 </FacebookAuth>

import { defineComponent } from 'vue';
import { FacebookAuth } from '@xtiannyeto/vue-auth-social';

export default defineComponent({
  name: 'xxx',
  components: {
    ...
    FacebookAuth,
    ...
  },
  setup() {
    const facebookAppId = process.env.FACEBOOK_APP_ID; // your facebook application ID
    return { facebookAppId };
  },
  methods: {
    facebook(event: any) {
      console.log(event); // event response handler
    }
  }
});

Google Auth

 <GoogleAuth :clientId="googleClientId" @on-submit="google">
    Google <!-- Whatever you want, even your own custom button -->
 </GoogleAuth>

import { defineComponent } from 'vue';
import { GoogleAuth } from '@xtiannyeto/vue-auth-social';

export default defineComponent({
  name: 'xxx',
  components: {
    ...
    GoogleAuth,
    ...
  },
  setup() {
    const googleClientId = process.env.GOOGLE_CLIENT_ID; // your Google Client ID
    return { googleClientId };
  },
  methods: {
    google(event: any) {
      console.log(event); // event response handler
    }
  }
});

Use Auth Modal

 <Auth ref="authRef"
    :logo="YOUR_ICON_PATH"
    :color="MAIN_COLOR" <!-- tailwind color, indigo by default -->
    :facebookAppId="facebookAppId"
    :googleClientId="googleClientId"
    @on-google="google"
    @on-facebook="facebook">
     Login <!-- Whatever you want, even your own custom button -->
 </Auth>

import { defineComponent } from 'vue';
import { Auth } from '@xtiannyeto/vue-auth-social';

export default defineComponent({
  name: 'xxx',
  components: {
    Auth
  },
  setup() {
    const facebookAppId = process.env.FACEBOOK_APP_ID; // your application ID
    const googleClientId = process.env.GOOGLE_CLIENT_ID; // your Google Client ID
    return { googleClientId, facebookAppId };
  },
  methods: {
    facebook(event: any) {
      console.log(event);
    },
    google(event: any) {
      console.log(event);
    }
  }
});

Use Auth Modal with user / password (No authentication just form handler)

In previe

 <Auth ref="authRef"
    ....
    :color="MAIN_COLOR" 
    :userPassword="true" <!-- active user / Mp auth on modal and register -->
    .......
    .......
    @on-signin="signin" <!-- handle signIn -->
    @on-signup="signup"> <!-- handle signup -->
     Login
 </Auth>

.....
signIn(event: any) {
  console.log(event);
},
signUp(event: any) {
  console.log(event);
}
.....

Close Auth Modal

 <Auth ref="authRef"
     Login
 </Auth>
<button @click="closeAuth">Close</button>

setup() {
    const authRef: any = ref(null);
    function closeAuth() {
      authRef.value?.close();
    }
    return { authRef, closeAuth, ...};
  }