Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@xtiannyeto/vue-auth-social

Package Overview
Dependencies
11
Maintainers
1
Versions
10
Issues
File Explorer

Advanced tools

@xtiannyeto/vue-auth-social

Use social authentication Facebook / Google with Vue 3 composition api

    0.1.9latest

Version published
Maintainers
1
Yearly downloads
1,690
increased by281.49%

Weekly downloads

Readme

Source

@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, ...}; }

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc