Here is the source for a self contained Facebook login component in Vue. I'm trying to use this with AWS Amplify. I successfully get the Facebook login screen to appear and I am able to get an identity id in AWS cognito. However, things aren't quite working.
<template>
<div>
<Button
class="FacebookButton"
v-text="buttonText"
@click="handleClick"
:disabled="isLoading"
/>
</div>
</template>
<script>
import Auth from "@aws-amplify/auth";
import { AmplifyEventBus } from "aws-amplify-vue";
export default {
name: "FacebookButton",
components: {
},
data() {
return {
buttonText: "Login to Facebook",
isLoading: true
};
},
computed: {},
async mounted() {
this.loadFacebookSDK();
await this.waitForInit();
this.isLoading = false;
},
beforeCreate() {},
methods: {
waitForInit() {
return new Promise(res => {
const hasFbLoaded = () => {
if (window.FB) {
res();
} else {
setTimeout(hasFbLoaded, 300);
}
};
hasFbLoaded();
});
},
statusChangeCallback(response) {
if (response.status === "connected") {
this.handleResponse(response.authResponse);
} else {
this.handleError(response);
}
},
checkLoginState() {
window.FB.getLoginStatus(this.statusChangeCallback);
},
handleClick() {
window.FB.login(this.checkLoginState, { scope: "public_profile,email" });
},
handleError(error) {
alert(error);
},
async handleResponse(data) {
const { email, accessToken: token, expiresIn } = data;
const expires_at = expiresIn * 1000 + new Date().getTime();
const user = { email };
this.isLoading = true;
try {
//const response = await Auth.federatedSignIn(
await Auth.federatedSignIn("facebook", { token, expires_at }, user);
this.isLoading = false;
AmplifyEventBus.$emit("authState", "signedIn");
//this.props.onLogin(response);
} catch (e) {
this.isLoading = false;
this.handleError(e);
}
},
loadFacebookSDK() {
window.fbAsyncInit = function() {
window.FB.init({
appId: "yourappidhere",
xfbml: true,
version: "v3.2"
});
window.FB.AppEvents.logPageView();
};
(function(d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "facebook-jssdk");
}
}
};
</script>
<style scoped>
</style>
This code is a port from a React example here: https://serverless-stack.com/chapters/facebook-login-with-cognito-using-aws-amplify.html
I'm trying to make this Facebook login work with the existing Amplify authenticator state management system by emitting the change to authState as follows:
AmplifyEventBus.$emit("authState", "signedIn");
This causes the Authenticator widget to 'disappear', but it doesn't let me get into my app. I'm not quite sure where to go next.
It seems that you are trying to sign in with Facebook using AWS Amplify and are encountering some issues.
One thing to check is whether you have correctly configured the Facebook login in your AWS Amplify project. Make sure that you have followed the instructions in the AWS Amplify documentation for adding Facebook as a federated identity provider, including setting up the Facebook app and adding the necessary permissions and callback URLs in the Facebook Developer console.
It is also important to ensure that you are passing the correct values to the federatedSignIn method. The first argument should be the name of the identity provider (in this case, "facebook"), the second argument should be an object containing the token and expires_at values obtained from the Facebook login response, and the third argument should be the user object containing the email of the logged in user.
If you are still having trouble after checking these things, it may be helpful to check the browser console for any error messages or to enable debugging in the AWS Amplify library. You can also try logging the values passed to the federatedSignIn method and the response from the method to help identify any issues.