vue3-facebook-login

A facebook login component which hides the complexity of facebook javascript SDK to initialize and connect with facebook and get access token.

Installation

npm install vue3-facebook-login

Usage

vue3-facebook-login hides the complexity of facebook javascript SDK hence it is comparitively very easy to use.

ES6

For Local Registration

import FacebookLogin from "vue3-facebook-login";

export default {
    ...
    components : {
        FacebookLogin,
        ...
    },
    ...
}

For Global Registration

Update main.js

import { createApp } from "vue";
import App from "./App.vue";
...
import FacebookLogin from "vue3-facebook-login";

createApp(App).component("facebook-login", FacebookLogin)
...

After importing the component, you can use it in your templates as:

<facebook-login
    :appId="appId"
    @loggedIn="handleLogin"
    @loginFailed="handleLoginFailed"
>
</facebook-login>
...
</template>
<script>
...
{
    ...
    methods : {
        handleLogin(response) {
            console.log("User Successfully Logged In" , response)
        },
        handleLoginFailed() {
            console.log("User Cancelled or Abort the Login")
        }
    }
...
}
...

where appId is the appId recieved after creating App to use Facebook Authentication from Facebook

Props

Property	Required	Type	Default	Decription
appId	true	String	-	appId recieved from Facebook after creating App.
type	false	String	normal	defines the type of button (minimal, normal, or custom)
theme	false	String	light	defines the theme for the button(light or dark)
text	false	String	Login with Facebook	text for the login button when used custom type
classes	false	String	null	classes needs to be applied to custom login button
styles	false	String	null	styles needs to be applied to custom login button

Events

Event	Invoking Time	Type	Decription
loggedIn	When user successfully logged in with facebook	function	pass a function which should contain all the operations to be performed after successful facebook login
loginFailed	When user cancelled/abort login with facebook	function	pass a function which should contain all the operations to be performed after cancel/abort facebook login

Warning

If after following all the instructions carefully Facebook Login is still not working and saying App not set up This app is still in development mode, and you don't have access to it. Switch to a registered test user or ask an app admin for permissions. then there may be 2 reasons behind it.

1. You may have used wrong appId.
2. Facebook Policy : The method FB.login can no longer be called from http pages

So I would Suggest just go ahead and move the app to a https environment and it will be finely working.

Creator

Mohammad Dilshad Alam created and maintains this component.