nuxt.js - Nuxt Auth module GitHub

Question

I have setup the Nuxt auth module in the nuxt.config.js and created an application on GitHub. Logging works, however I'm trying a simple axios call and I'm not sure what I'm doing wrong:

<template>
    <div>
        <button v-on:click="signIn">click here</button>
    </div>
</template>

<script>
export default {
    methods: {
    signIn () {
        this.$auth.loginWith('github');
        this.$axios.get('https://api.github.com/users/mapbox')
            .then((response) => {
                console.log(response.type);
                console.log(response.id);
                console.log(response.name);
                console.log(response.blog);
                console.log(response.bio);
            });
        }
    }
}
</script>

The above gives a POST 404 error in the console

question from:https://stackoverflow.com/questions/65951653/nuxt-auth-module-github

Answer 1

loginWith() function is a promise. You have forgot the await or the .then() to handle the response:

async signIn () {
    await this.$auth.loginWith('github');
    this.$axios.get('https://api.github.com/users/mapbox').then(...)
}

or

signIn () {
    this.$auth.loginWith('github').then((data) => {
        this.$axios.get('https://api.github.com/users/mapbox').then(...)
}

In addition, you have to catch the errors from loginWith promise.