Implementing facebook login with nodeJS - node.js

Question

I am implementing Facebook login in my Vue (nuxt) app with NodeJS backend.
I am able to receive my auth code, but am unable to get the access token using that. It keeps returning me the following error:
data: {
error: {
message: 'Missing redirect_uri parameter.',
type: 'OAuthException',
code: 191,
fbtrace_id: 'AEzwwqCBEvvkq9mDQPrvc-7'
}
}
This is the code I have:
My page containing the facebook login button:
facebookLoginUrl () {
const stringifiedParams = queryString.stringify({
client_id: process.env.facebook_app_id,
redirect_uri: process.env.base_url + this.$findPath('/authenticatie/facebook'),
scope: ['public_profile', 'email', 'user_birthday', 'user_location', 'user_hometown'].join(','), // comma seperated string
response_type: 'code',
auth_type: 'rerequest',
display: 'popup',
})
return `https://www.facebook.com/v4.0/dialog/oauth?${stringifiedParams}`
}
The page where my redirect_uri is going to only contains the following in the created hook:
created () {
let facebookAuthCode = this.$route.query.code
let redirectUri = process.env.base_url + this.$findPath('/authenticatie/facebook')
if (facebookAuthCode) {
this.$getFromBackend('/getFacebookAccessTokenFromCode', { authCode: facebookAuthCode, redirectUri })
}
}
and finally my backend code does this:
axios.get('https://graph.facebook.com/v4.0/oauth/access_token', {
client_id: process.env.facebook_app_id,
client_secret: process.env.facebook_app_secret,
redirect_uri: encodeURIComponent(redirectUri),
code: encodeURIComponent(authCode),
})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error.response)
})
And it throws me the error mentioned above.
I can see in the error.response.config object the following:
config: {
url: 'https://graph.facebook.com/v4.0/oauth/access_token',
method: 'get',
headers: {
Accept: 'application/json, text/plain, */*',
'User-Agent': 'axios/0.19.2'
},
transformRequest: [ [Function: transformRequest] ],
transformResponse: [ [Function: transformResponse] ],
timeout: 0,
adapter: [Function: httpAdapter],
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
validateStatus: [Function: validateStatus],
client_id: 'xxxxxxxxxxxxxx',
client_secret: 'xxxxxxxxxxxxxxxxxx',
redirect_uri: 'http://localhost:3000/nl-be/authenticatie/facebook',
code: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
data: undefined
},
So the redirect_uri is set, whats going on?
UPDATE: I changed the axios code according to #CBroe answer:
axios.get('https://graph.facebook.com/v4.0/oauth/access_token', qs.stringify({
client_id: process.env.facebook_app_id,
client_secret: process.env.facebook_app_secret,
redirect_uri: encodeURIComponent(redirectUri),
code: encodeURIComponent(authCode),
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error.response)
})
But i am getting the exact same error.