The AWS Cognito User Interface utilizes a hash in order to incorporate parameters during its invocation of the callback page

Question

The AWS Cognito User Interface utilizes a hash in order to incorporate parameters during its invocation of the callback page

I'm encountering an issue with the AWS Cognito provided UI interface.

When attempting to use the provided UI, I make a call to the endpoint using the populated URL:

The issue arises after authentication when Cognito utilizes a # to return the required parameters. The returned result appears as follows:

http://localhost:3000/callback/#id_token=eyJragIsm2PqVpw&access_token=eyJraWQiOiJ&expires_in=3600&token_type=Bearer

I am struggling to extract and read the id_token and access_token on my callback page (which is a vue app).

Is there a way to configure Cognito to use the traditional question mark (?) for passing query strings, or how can I retrieve the passed parameters following the hash (#).

Your guidance on this matter would be greatly appreciated.

vue.js vuejs2 vue-router amazon-cognito aws-userpools

Answer 1

Answer №1

If you are utilizing the Vue.js router, handling the hash part can be easily accomplished. Simply insert this code snippet into your component. reference: https://router.vuejs.org/api/#the-route-object

let awsData = {}
if (this.$route.hash !== "") {
    let elementsString = decodeURIComponent(
        this.$route.hash.substr(1, this.$route.hash.length)
    );
    let params = elementsString.split("&");
    for (let param of params) {
        let values = param.split("=");
        awsData[values[0]] = values[1];
    }
}

// perform necessary tasks with awsData

Answer 2

If you are utilizing the Vue.js router, handling the hash part can be easily accomplished. Simply insert this code snippet into your component. reference: https://router.vuejs.org/api/#the-route-object

let awsData = {}
if (this.$route.hash !== "") {
    let elementsString = decodeURIComponent(
        this.$route.hash.substr(1, this.$route.hash.length)
    );
    let params = elementsString.split("&");
    for (let param of params) {
        let values = param.split("=");
        awsData[values[0]] = values[1];
    }
}

// perform necessary tasks with awsData

The AWS Cognito User Interface utilizes a hash in order to incorporate parameters during its invocation of the callback page

Answer №1

Similar questions

Vue.js parent component not receiving data emitted by child component

Delivering VueJS Builds via Express.js by leveraging history mode

Is your list rendering in Vue.js with AJAX ready to go?

Encountered an issue while attempting to decode the downloaded font. Parsing error from OTS in Vue

Integrating social login using vue-authenticate with passport in a Node.js environment

Avoid transitioning to a different page using Vue-router

CSS mismatch detected between production and development modes

After refreshing the page, vuex is encountering null values when using firebase.auth().onAuthStateChanged

Symbol positioned above the v-switch vuetify button

Issues with object changes not reflecting in Vue.js 2.0 component rendering

Unable to call Ionic component function using ref in Vue3

What methods are there to verify computed properties in VueJS?

Why does Vue continuously insert undefined values when adding non-consecutive indexes to an array?

Changing an array with VueJS

Is there a way to retrieve JSON data using Vue and Axios?

What is the correct way to handle Vue props that include a dash in their name?

Two items possess an identical worth

Incorporating AWS-Cognito into Angular 2

How can you extract path information from an SVG file and utilize it as a marker on Google Maps?

What could be causing the slow build time for npm run serve on a Vue.js project?