Here is my working nuxt.config.js
export default {
router: {
middleware: ['auth'],
},
modules: [
'@nuxtjs/auth-next'
],
auth: {
redirect: {
login: '/login',
home: '/',
logout: '/login',
callback: false, // not used here in our case
},
localStorage: false, // REALLY not secure, so nah
resetOnError: true, // kick the user if any error happens w/ the auth
strategies: {
local: {
scheme: 'refresh', // used for the refreshToken flow
token: {
property: 'access_token',
maxAge: 3600, // only useful if not detected on the login
},
refreshToken: {
property: 'refresh_token',
data: 'refresh_token',
maxAge: 60 * 60 * 24 * 30, // 1 month
},
clientId: process.env.IAM_CLIENT_ID, // our application's ID aka browser
user: {
property: 'employee',
autoFetch: false, // no need to fetch the user, will be done in gql
},
endpoints: {
login: { url: '/login', method: 'post' },
refresh: { url: '/oauth/refresh', method: 'post' },
user: false, // as told above, this one is not needed
logout: { url: '/logout', method: 'get' },
},
tokenRequired: true,
tokenType: 'JWT',
},
},
plugins: [
'~/plugins/nuxt-axios.js',
{ src: '~/plugins/nuxt-auth.js', mode: 'client' },
],
}
nuxt-auth.js
is a basic logger in case of an error
import $toast from '~/mixins/buefy-toast'
export default function ({ $auth }) {
$auth.onError((_name, error) => {
$toast.open({ message: error })
})
}
Another important part is my login flow (triggered on a form submit)
export default {
methods: {
async authMe() {
const succesfulLogin = await this.$auth.loginWith('local', {
data: {
email: this.email,
password: this.password,
},
})
if (succesfulLogin) {
await this.$auth.setUser({
email: this.email,
password: this.password,
})
}
}
// ...
}
}
We do basically not get the user on the API while authenticating, but rather submit the credentials and validate them, then setting the flag manually with the function $auth.setUser
. This is the only part that I handle to pass the loggedIn
flag to true, the remaining configuration is just project configuration.
We do also have some refreshToken
on our JWT but you can totally omit this one.
Axios config file is basically setting our app's needed headers.
The auth
middleware is the one coming w/ the @nuxt/auth
module itself, I did not wrote it myself. This is totally working (cookies + vuex state) when generated with target: 'static'
.
nuxt.config.js
withrouter: { middleware: ['auth'] }
and whitelist it per page withexport default { auth: false }
. On the main issue, do you have aloggedIn
set totrue
in your$auth
module ? This is the flag that got checked against the@nuxt/auth
module to determine if you're actually logged-in or not.auth
middleware ? The module is giving one itself, maybe there is a conflict here ? I'll post my config in an answer, if it can somehow help. Btw, Iyarn generate
'ed a project and it's totally fine on my side, as expected.