Currently, I am implementing a Login with Facebook feature in my VueJS application using a Third Party Service (AWS Cognito).
The process involves clicking on a "Login with Facebook" button which triggers a redirect to the third party URL where a Sign Up prompt is displayed for Facebook authentication.
For example:
window.location.href = https://my-cognito-app-domain/oauth2/authorize?response_type=token&client_id=my_client_id&redirect_uri=my_redirect_url&identity_provider=Facebook
Users input their Facebook login credentials to authenticate, and upon successful validation, they are redirected back to the VueJS application with an access_token appended as a URL parameter.
For instance: #access_token=eyJraWQiOiIyRHViM0VrY2 ...
The goal is to extract the access_token within the VueJS application context to perform further logic such as JWT decoding. However, attempts to retrieve the token using window.location.search in App.vue during creation or mounting have been unsuccessful due to the page redirection.
See below for a sample code snippet:
<template>
<div id="app">
</div>
</template>
<script type="text/javascript>
// @ is an alias to /src
import Navigation from '@/components/Navigation.vue'
import Footer from '@/components/Footer.vue'
export default {
name: 'home',
components: {
Navigation,
Footer
},
created(){
console.log("created")
var params = window.location.hash
console.log(params)
},
mounted(){
console.log("mounted")
var params = window.location.hash
console.log(params)
}
}
The objective is to capture the access_token immediately after the redirection to the VueJS application. Is it correct to assume that App.vue is always reloaded post-redirection? If not, is there a method to monitor when the page gets redirected?