CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsvercel
simon blanco
simon blanco

Reputation: 148

URIError in NuxtJS production when hosting on vercel

I am developing an application with ssr in nuxt. The problem I have is when I run "npm start" after doing the build and generate. The application starts working normally but when I try to log in it doesn't work although in development mode it works perfectly. The api is built with express and I am using tokens and nuxt auth as authentication method. The server endpoints declared in the auth strategy never get executed, use console.log () on the login endpoint handler to check. Anyone have any idea how I can solve this problem? Thanks for your time!

Login component script:

<script>
import { mapGetters } from 'vuex'
import index from './index.vue'

export default {
  components: {
    index,
  },
  data() {
    return {
      email: '',
      password: '',
    }
  },
  computed: {
    ...mapGetters(['isAuthenticated']),
  },
  methods: {
    close() {
      this.$router.push('/')
    },
    login() {
      const button = document.querySelector('.center-form button')
      button.disabled = true
      button.innerHTML = '...'

      const data = { password: this.password, email: this.email }
      this.$auth
        .loginWith('local', { data })
        .then((x) => {
          this.$auth.strategy.token.set(x.data.token)
          this.$router.push('publicar-inmueble')
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>

Nuxt auth strategy:

auth: {
  strategies: {
    local: {
      token: {
        property: 'token'
      },
      user: {
        property: 'user'
      },
      endpoints: {
        login: { url: '/server/api/usuarios/login', method: 'post', propertyName: 'data' },
        user: { url: '/server/api/usuarios/mi-perfil', method: 'get', propertyName: 'data' },
        logout: { url: '/server/api/usuarios/logout', method: 'delete' }
      }
    }
  }
},

Store:

export const getters = {
  isAuthenticated(state) {
    return state.auth.loggedIn
  },

  loggedInUser(state) {
    return state.auth.user
  }
}

Upvotes: 1

Views: 973

Answers (1)

kissu
kissu

Reputation: 46612

Go to your app's settings on vercel, the URL should look like this:
https://vercel.com/<your-username>/<your-project>/settings/environment-variables

There, drop in your env variable (my screenshot is a value example!) and trigger a build of your app. Should work fine then.

enter image description here

Upvotes: 1

Related Questions