goodpixels
commented
2 years ago Okay, I was able to figure it out by reading Strapi docs: https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#what-you-have-to-do-in-your-frontend
Basically I ended up creating a new custom strategy, based on local scheme and an interim page (/pages/callback) and from there I make a request to Strapi backend to retrieve the user, like so:
pages/callback.vue
<template>
<h2>Please wait, logging you in...</h2>
</template>
<script>
export default {
created() {
this.signIn();
},
methods: {
async signIn() {
try {
await this.$auth.loginWith("strapi_facebook", {
params: {
access_token: this.$route.query.access_token, // I have to pass this to Strapi as a query string, otherwise I will get 401
},
});
} catch (error) {
console.log(error);
}
},
},
};
</script>nuxt.config.js
strapi_facebook: {
scheme: "local",
token: {
property: "jwt",
},
user: {
property: false,
},
endpoints: {
login: {
url: "auth/facebook/callback",
method: "get",
},
user: {
url: "users/me?populate[0]=photo&populate[1]=address",
method: "get",
},
logout: false,
},
},
I need help understanding how to use this plugin with Strapi and Facebook Login.
Strapi comes with a user permissions plugin, which comes with Facebook as one of the providers. Here's the login flow for using this provider: https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#login
I can easily authenticate via Facebook using the Strapi provider without using $nuxt.auth, by doing the following:
1) Configure Facebook Strapi provider (client ID, app secret, redirect URL) 2) Go to Strapi's dedicated API URL for connecting to Facebook: http://localhost:1337/api/connect/facebook 3) This will redirect to Facebook, where I can login and after a successful login, Facebook will redirect back to Strapi and Strapi will redirect back to the URL of my choice, appending the access_token query parameter, for example: http://localhost:3000/facebook_login_success?access_token=JWT 4) At this stage, I can use the JWT in my front-end nuxt.js app to retrieve the corresponding Strapi user by doing a GET request to Strapi backend: http://localhost:1337/api/auth/facebook/callback?access_token=JWT
The problem
It seems that Strapi and $nuxt.auth are basically meant to do the same thing - both are used to obtain the JWT from Facebook. But come to think about it, since Strapi has already authenticated the user, I should not be using $nuxt.auth Facebook provider, but local strategy instead (?), as really the user comes from Strapi, not Facebook at this point in time. BUT I already have a local strategy configured in $nuxt.auth, that I use to register / login Strapi users manually with a username and password.
The question
How can I use $nuxt.auth to login users via Strapi username / email logins and Facebook connect as well?
Here's my
nuxt.config.js(this works fine for users with username / password, but not for those logging in with Facebook via Strapi provider):I am sorry if this is not making a lot of sense, English is not my first language.
Here is my setup:
Thank you for all the help.