vue.jsnuxt.jsnuxt-authcloudflare-pages

Nuxt auth user always null


I Just switched from development mode to production for my nuxt app.

It uses @nuxtjs/auth-next and in the development version everything use to work fine like a charm.

Today i just deployed the website to cloudflare pages, Since then the this.$auth.user property is always null, Even when i am logged in twice thrice, The auth user is always null and it will force me to re-login.

What can i do?

login.vue

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'Login',
  mounted() {
    this.$auth.loginWith('discord')
  },
  head: {
    title: "Login | Abred"
  },
})
</script>

the callback is set to / and the home page doesn't handle anything related to oauth yet.

Probably not a cloudflare issue, because the same behaviour is with vercel.

Nuxt Config:

export default {
  head: {
    title: 'Abred',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Abred the only bot you shall need for managing temporary voice channels!' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [
      { rel: 'icon', type: 'image/png', href: '/assets/transparent-logo.png' },
      {
        rel: "stylesheet",
        href: 'https://fonts.googleapis.com/icon?family=Material+Icons'
      }],
  },
  css: [
    "./styles/globals.scss"
  ],
  plugins: [],
  components: true,
  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/tailwindcss',
  ],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
    '@nuxtjs/toast',
    '@nuxtjs/dotenv',
  ],
  auth: {
    strategies: {
      discord: {
        clientId: process.env.CLIENT_ID,
        clientSecret: process.env.CLIENT_SECRET,
      }
    },
    redirect: {
      callback: '/',
    }
  },
  axios: {
    baseURL: 'https://api.abred.bar',
  },
  build: {},
}

Live demo: Login: https://abred.bar/login Page to visit after login: https://abred.bar/manage

Please help me.

Just noticed

In dev mode the cookies of tokens are present but in production they aren't there

enter image description here


Solution

  • You deploy your app via Static Site Generation (target: static).

    As far as I am aware, you need a server running for oAuth2 via nuxt-auth@next (especially due to using a client secret). This is also the likeliest reason why it works in dev mode but not when deployed.