CODEWITHSUNDEEP
vue.jsauthenticationnuxt.jsauth0
Ilank
Ilank

Reputation: 87

How to configure @nuxtjs/auth with Auth0

I created a Nuxt application that uses Auth0 as the login provider. When you log in, you get redirected to the callback page and then the auth module takes over and saves the login information in the state. All works perfectly in Dev mode, but as soon as I generate code for production, the auth module no longer reacts to the callback and you are not logged in. Generating in target server or static has no effect. I'm set to mode=universal. I tried to enable SSR or specifically disable it, to no effect. I'm using

"nuxt": "^2.15.4"

"@nuxtjs/auth": "^4.9.1",

I've been fighting this thing for a week, and I've seen numerous threads that talk about this, but no one provided a solution. Is this really a problem that was not dealt with in Nuxt? That pretty much kills the usefulness of the platform if it can't handle auth in production... Does anyone have a way to solve this?

I'm willing to post my code, if it will help resolve this.

EDIT: here is my nuxt.config.js file:

export default {
    mode: 'universal',
    target: 'server',
    css: [],
    plugins: [
        { src: '~/plugins/vue-debounce.js' },
        { src: '~/plugins/modal-popup.js', ssr: false },
        { src: '~/plugins/editor.js', ssr: false },
    ],
    components: true,
    buildModules: ['@nuxtjs/eslint-module', '@nuxtjs/fontawesome'],
    fontawesome: {
        component: 'fa',
        suffix: true,
        icons: {
            solid: ['faCaretDown', 'faCaretRight', 'faCaretLeft'],
            regular: ['faFileAlt'],
        },
    },
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/auth',
    ],
    axios: {
        baseURL: 'http://localhost:9000/api/',
        headers: {
            common: {
                Accept: 'application/json',
            },
        },
    },
    auth: {
        strategies: {
            auth0: {
                domain: '<my domain>.eu.auth0.com',
                client_id: '<client id>',
                audience: 'https://<my domain>.eu.auth0.com/api/v2/',
            },
        },
        redirect: {
            callback: '/callback/',
            logoutRedirectUri: '/login'
        },
    },
    build: {
        transpile: [],
    },
}

Upvotes: 1

Views: 2665

Answers (2)

Ilank
Ilank

Reputation: 87

I found the problem. I had implemented a non-standard header in Axios, like so:

axios: {
    baseURL: 'http://localhost:9000/api/',
    headers: {
        common: {
            Accept: 'application/json',
            authentication: "<UUID code>"
        },
    },
}

I did it as a temporary way to secure the communication with the server, until I had Auth0 running, and I forgot to remove it.

As soon as I got rid of this header, it started working as expected. I'm not sure why this would cause the fact that it worked in developer mode and not in generated code, but removing the line made it work in both.

Upvotes: 1

kissu
kissu

Reputation: 46814

Here is a repo that I've created that explains in depth how to setup the most setup auth0 connection flow: https://github.com/kissu/so-nuxt-docs-theme-auth-auth0

Please pay attention to the README.md and then, check how it works with your auth setup. Here is my section

nuxt.config.js

auth: {
  redirect: {
    callback: "/",
    home: "/",
    login: "/login",
    logout: "/"
  },
  localStorage: false,
  strategies: {
    local: false,
    auth0: {
      domain: process.env.AUTH0_DOMAIN,
      clientId: process.env.AUTH0_CLIENT_ID,
      scope: ['openid', 'profile', 'offline_access'],
      accessType: 'offline',
      responseType: 'code',
      grantType: 'authorization_code',
      codeChallengeMethod: 'S256',
    }
  },
},

As for the target, if you're limiting the access to your app straight from the beginning, the best way to go is still

target: 'static',
ssr: false,

That way, it will not require any NodeJS server and will be SPA only. Indeed, there is no need to generate protected pages (by auth0) since the guy needs to be logged-in. And, it will not generate them because of the way @nuxt/auth works.

Upvotes: 2

Related Questions