Auth-module · Nuxt Community

redijedi posted a new question

auth-module •

Path based security?

How can I secure only a path and every page beneath it? I want to be secure by default (via the middleware) to prevent accidentally leaking a secure page, but I only want that to apply to one directory and everything beneath it. Is this possible?

karimcambridge posted a new bug report

auth-module •

User object keeps getting set to {} while loggedIn is true?

Version

v4.5.1

Reproduction link

http://localhost/

Steps to reproduce

see code

What is expected ?

User should be populated with the db entity.

What is actually happening?

User is being set to {}

Additional comments?

nuxt.config.js

auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/server/api/auth/login', method: 'post', propertyName: 'access_token' },
          logout: { url: '/server/api/auth/logout', method: 'post' },
          user: { url: '/server/api/auth/user', method: 'get', propertyName: false }
        },
        tokenRequired: true,
        tokenType: 'Bearer'
      }
    },
    redirect: {
      login: '/',
      logout: '/'
    }
  },

api

app.post('/auth/login', async (req, res, next) => {
    const { login, password } = req.body;
    console.log({ login, password });
    await db.User.findByLogin(login, password)
        .then(user => {
            if (!user) {
                console.log(`${login} entered wrong credentials on login. ${user}`);
            } else {
                console.log(`User ${login} logged in successfully. ${user}`);
            }
            return res.send(user);
        })
        .catch(err => {
            console.log(`[ERROR; SQL]: Authentication: ${err}`)
            return res.send(err)
        });
})

app.post('/auth/register', (req, res, next) => {
    const { username, email, password } = req.body;
    console.log({ username, email, password });
    db.User.create({
            username: username,
            email: email,
            password: password
        })
        .then(user => {
            console.log('New user created successfully')
            res.send(user);
        })
        .catch(err => {
            console.log(`[ERROR; SQL]: Registration: ${err}`)
            return res.status(400).send(err)
        })
})

store/index.js

export default {
    state: () => ({

    })
}

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

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

register forum

methods: {
    async registerForm() {
      try {
        console.log({ username: this.username, email: this.email, password: this.password });
        await this.$axios.$post(`server/api/auth/register`, {
            username: this.username,
            email: this.email,
            password: this.password
          }).then(async response => {
            await this.$auth.loginWith('local', {
              data: {
                login: this.username,
                password: this.password
              }
            });
            console.log('Registered!');
            console.log(this.$auth.token)
            console.log(this.$auth.loggedIn)
            this.$router.push('/')
          }).catch(err => {
            console.log('Registration failed: ' + err.response.data.error.message)
            this.$toast.warning('Registration failed, please try again', {icon: "error"});
          })
      } catch (e) {
        console.log('Error registering');
        this.$toast.error('Registration error, please try again', {icon: "error"});
      }
    }
  }

After registering, these values get set:

this.$auth.token = undefined
this.$auth.user = {}
$auth.state.loggedIn = true
$auth.loggedIn = true.

Any ideas why this is happening?

karimcambridge posted a new question

auth-module •

User object keeps getting set to {} while loggedIn is true?

nuxt.config.js

auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/server/api/auth/login', method: 'post', propertyName: 'access_token' },
          logout: { url: '/server/api/auth/logout', method: 'post' },
          user: { url: '/server/api/auth/user', method: 'get', propertyName: false }
        },
        tokenRequired: true,
        tokenType: 'Bearer'
      }
    },
    redirect: {
      login: '/',
      logout: '/'
    }
  },```

api

js
app.post('/auth/login', async (req, res, next) => {
const { login, password } = req.body;
console.log({ login, password });
await db.User.findByLogin(login, password)
.then(user => {
if (!user) {
console.log(${login} entered wrong credentials on login. ${user});
} else {
console.log(User ${login} logged in successfully. ${user});
}
return res.send(user);
})
.catch(err => {
console.log([ERROR; SQL]: Authentication: ${err})
return res.send(err)
});
})

app.post('/auth/register', (req, res, next) => {
const { username, email, password } = req.body;
console.log({ username, email, password });
db.User.create({
username: username,
email: email,
password: password
})
.then(user => {
console.log('New user created successfully')
res.send(user);
})
.catch(err => {
console.log([ERROR; SQL]: Registration: ${err})
return res.status(400).send(err)
})
})```

store/index.js

export default {
    state: () => ({

    })
}

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

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

register forum
js methods: { async registerForm() { try { console.log({ username: this.username, email: this.email, password: this.password }); await this.$axios.$post(`server/api/auth/register`, { username: this.username, email: this.email, password: this.password }).then(async response => { await this.$auth.loginWith('local', { data: { login: this.username, password: this.password } }); console.log('Registered!'); console.log(this.$auth.token) console.log(this.$auth.loggedIn) this.$router.push('/') }).catch(err => { console.log('Registration failed: ' + err.response.data.error.message) this.$toast.warning('Registration failed, please try again', {icon: "error"}); }) } catch (e) { console.log('Error registering'); this.$toast.error('Registration error, please try again', {icon: "error"}); } } }

After registering, these values get set:

this.$auth.token = undefined
this.$auth.user = {}
$auth.state.loggedIn = true
$auth.loggedIn = true.

Any ideas why this is happening?

karimcambridge posted a new question

auth-module •

.user keeps getting set to {}

nuxt.config.js

auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/server/api/auth/login', method: 'post', propertyName: 'access_token' },
          logout: { url: '/server/api/auth/logout', method: 'post' },
          user: { url: '/server/api/auth/user', method: 'get', propertyName: false }
        },
        tokenRequired: true,
        tokenType: 'Bearer'
      }
    },
    redirect: {
      login: '/',
      logout: '/'
    }
  },```

api

js
app.post('/auth/login', async (req, res, next) => {
const { login, password } = req.body;
console.log({ login, password });
await db.User.findByLogin(login, password)
.then(user => {
if (!user) {
console.log(${login} entered wrong credentials on login. ${user});
} else {
console.log(User ${login} logged in successfully. ${user});
}
return res.send(user);
})
.catch(err => {
console.log([ERROR; SQL]: Authentication: ${err})
return res.send(err)
});
})

app.post('/auth/register', (req, res, next) => {
const { username, email, password } = req.body;
console.log({ username, email, password });
db.User.create({
username: username,
email: email,
password: password
})
.then(user => {
console.log('New user created successfully')
res.send(user);
})
.catch(err => {
console.log([ERROR; SQL]: Registration: ${err})
return res.status(400).send(err)
})
})```

store/index.js

export default {
    state: () => ({

    })
}

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

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

register forum
js methods: { async registerForm() { try { console.log({ username: this.username, email: this.email, password: this.password }); await this.$axios.$post(`server/api/auth/register`, { username: this.username, email: this.email, password: this.password }).then(async response => { await this.$auth.loginWith('local', { data: { login: this.username, password: this.password } }); console.log('Registered!'); console.log(this.$auth.token) console.log(this.$auth.loggedIn) this.$router.push('/') }).catch(err => { console.log('Registration failed: ' + err.response.data.error.message) this.$toast.warning('Registration failed, please try again', {icon: "error"}); }) } catch (e) { console.log('Error registering'); this.$toast.error('Registration error, please try again', {icon: "error"}); } } }

After registering, these values get set:

this.$auth.token = undefined
this.$auth.user = {}
$auth.state.loggedIn = true
$auth.loggedIn = true.

Any ideas why this is happening?

cdwmhcc posted a new question

auth-module •

Is this a BUG? I recorded a video

https://www.youtube.com/watch?v=cGi6Y8d8Zes&t=12s

Is this a BUG? Or is there a problem with my settings?

cdwmhcc posted a new question

auth-module •

Is this a BUG?

https://www.youtube.com/watch?v=cGi6Y8d8Zes&t=12s

Is this a BUG? Or is there a problem with my settings?

sambrezo posted a new question

auth-module •

Sending refresh_token as cookie to restore session (in Universal mode)

I have to update the accesstoken quite frequently (3600s), so I am using the refreshtoken on the client to renew my session. This is working fine using interceptors in axios. The refresh_token is stored in store/localStorage and cookies.

When the user reloads the page I want to restore the session as well. How should we go about that? I suppose for the moment that this is done on the server during SSR. Is it good practice to send the refresh_token as a cookie and let the server handle the renewal? I am hesistant, but then `$auth.setRefreshToken' is using universal storage by default.

On the flipside, when we do NOT delegate authentication to the server, we need to make the client authenticate post-render which introduces its own set of problems (redirection).

ColtonProvias posted a new bug report

auth-module •

Redirect not generated when protected page accessed directly

Version

v4.5.3

Reproduction link

https://github.com/ColtonProvias/auth-issue

Steps to reproduce

Clone the linked repo locally.
Run yarn install
Run yarn run dev
Go to http://localhost:3000 and try clicking both links on the front page.
Or try going to http://localhost:3000/protected directly.

What is expected ?

Accessing /protected should automatically redirect to /login, and the page should say that you were redirected from /protected. This should work either directly or through both links.

What is actually happening?

When accessing the page directly or via the non nuxt-link link, no redirect is provided to the login page. They should also generate the same result as accessing it via nuxt-link.

lojea posted a new question

auth-module •

how to save user data to database when i use loginwith(social) before loggedin

amdp posted a new question

auth-module •

[Question] How do I update the vuex $auth.user properties?

Hi, I need to let every user to update their images, and automatically remove the previous image. If I do it, the $auth.user.image does not change even with fetchUser() so I even have a problem because the image the user has isn't there anymore.
How can I dynamically update all the user data?

useredit() {
      try {this.imageUpload()} catch(err){console.log(err + ' image not uploaded.')}
      axios.put(
        '/db/user', {
          id: this.id,
          name: this.formName,
          surname: this.formSurname,
          email: this.formEmail,
          password: this.formPassword,
          image: this.formImageFilename.name,
        })
        .then(res => {
          axios.delete('/db/userimage', {data: {delimage: this.$auth.user.image}} ) //this will create a problem
          this.$auth.$storage.setState(this.$auth.$state.user.image, this.formImageFilename.name) // this ugly trial to change the image in the vuex does not work
          console.log(this.$auth.user.image) // this proves it didn't work
        })
        .catch(err => {
          console.log(err)
        })
    },

piktur posted a new feature request

auth-module •

Allow dynamic cookie path

What problem does this feature solve?

In applications employing multiple authentication strategies it should be possible to isolate cookie attributes to a path unique to each strategy.

Given two login pages /admin/login and /customer/login

When I login as admin in one tab

document.cookie 
auth.strategy=admin

and login as customer in another tab

document.cookie 
auth.strategy=customer

then return to admin tab and refresh

document.cookie 
auth.strategy=customer

then token verification fails because the strategy was overridden when we logged in as customer.

What does the proposed changes look like?

This would cease to be a problem if it were possible to configure the cookie path per strategy or simply allow the developer to provide a function to options.cookie.options.path as in the following example.

// nuxt.config.js
auth: {
  cookie: {
    options: {
      path: () => /path/.test(window.location.pathname) ? '/path-a' : '/path-b'
    }
  }
}

// auth/storage.js
setCookie (key, value, options = {}) {
  // ...

  if (_options.path instanceof Function) {
    _options.path = _options.path()
  }

  // ...
}

lukaszflorczak posted a new question

auth-module •

Problems with id_token

I found a few more issues about id_token and each is unanswered:

and probably this one too:

https://github.com/nuxt-community/auth-module/pull/298

I am surprised that none of the authors responds to this. If I understand the case correctly, then downloading the id_token should not only work without problems but should be given in the documentation as an example of the proper implementation of the authorization.

From Google doc:

Important: Do not use the Google IDs returned by getId() or the user's profile information to communicate the currently signed in user to your backend server. Instead, send ID tokens, which can be securely validated on the server.

Without that the auth-module looks insecure and not usable for Google authorization (and probably for all based on OAuth2) because we can't connect the auth data with user data in our backend.

ysaakpr posted a new feature request

auth-module •

Supprting PKCE based login

What problem does this feature solve?

The current implementation of auth module uses the implicit flow to get the access token, as per the current best practices in oauth2 PKCE based auth is a better approach that implicit, because of various reasons, but the most important would be the ability to get refresh token, and hence can allow long-lived session.

Why don't we support the PKCE? Any thoughts?

What does the proposed changes look like?

Haven't looked into yet, but if there are any feedback and suggestion I would like to contribute.

sowinski posted a new question

auth-module •

How to use with Django-Rest-Framework TokenAuthentication

Hi,

is it possible to use TokenAuthentication from Django-Rest-Framework?

Just found examples for JWT.

Thank you

mhafizhasan posted a new bug report

auth-module •

auth middleware redirect without host prefix when directly access using url

Version

v4.5.3

Reproduction link

https://auth.nuxtjs.org/

Steps to reproduce

I have a guarded page dashboard. when i manually access guarded page using browser url http://localhost:3000/dashboard , auth middleware not properly redirect to login page.

What is expected ?

unauthorised access to auth middleware guarded should be redirected to http://localhost:3000/auth/login

What is actually happening?

currently auth middleware redirect to /auth/login instead of properly full url http://localhost:3000/auth/login

Additional comments?

my other dependencies

"dependencies": {
    "@nuxtjs/auth": "^4.5.3",
    "@nuxtjs/axios": "^5.4.1",
    "@nuxtjs/pwa": "^2.6.0",
    "cross-env": "^5.2.0",
    "nuxt": "^2.4.0",
    "vuetify": "^1.5.5",
    "vuetify-loader": "^1.2.1"
  },

my auth strategies

auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: 'auth/login', method: 'post', propertyName: 'token'
          },
          user: {
            url: 'me', method: 'get', propertyName: 'data'
          },
          logout: {
            url: 'auth/logout', method: 'get'
          }
        }
      }
    },
    redirect: {
      home: '/dashboard',
      login: 'auth/login',
      logout: '/'
    }
  },

hwmb posted a new question

auth-module •

Using axios without auth headers

Is it possible to make an axios request without using auth module headers/token?

main2018 posted a new question

auth-module •

Route to refresh auth after login， Will redirect to login

environment: ubuntu node-v10.13.0 nuxt-2.4.5 @nuxtjs/auth-4.5.3

When I logged in, I came to the page that needed authorization. such as "/about", When I refreshed the page, I redirected to "/login",
But the result I printed was： loggedIn: true.

It seems that this problem only happens in linux. When I do the same thing under windows, it doesn't happen anymore. Everything is OK.

main2018 posted a new question

auth-module •

Route to refresh auth after login， Will redirect to login

environment: ubuntu node-v10.13.0 nuxt-2.4.5 @nuxtjs/auth-4.5.3

When I logged in, I came to the page that needed authorization. such as "/about", When I refreshed the page, I redirected to "/login",
But the result I printed was： loggedIn: true.

It seems that this problem only happens in linux. When I do the same thing under windows, it doesn't happen anymore. Everything is OK.

sereda93 posted a new question

auth-module •

Bug with Vue DevTools 5.0.1

I got a bug after updating the vue devtools when loading a state
http://prntscr.com/n33rjh

begueradj posted a new bug report

auth-module •

Request headers: unable to override content type ?

Version

v4.5.3

Reproduction link

https://auth.nuxtjs.org/

Steps to reproduce

DO the settings as show in the documentation and use a REST API.

What is expected ?

I want to override the header content type to post files

What is actually happening?

I can not post files because the default header content type is JSON ('content-type': 'application/json;charset=UTF-8',)

What I tried

I tried to override the axios (as shown here) headers by editing nuxt.config.js to add the multipart content type,
On my client function call, I run this.$axios.setHeader('content-type', 'multipart/form-data')

In both attempts, on the server side I still see my POST request having both the JSON and multipart content type .

Billal Begueradj

Activities

Version

Reproduction link

Steps to reproduce

What is expected ?

What is actually happening?

Additional comments?

Is this a BUG? Or is there a problem with my settings?

Is this a BUG? Or is there a problem with my settings?

Version

Reproduction link

Steps to reproduce

What is expected ?

What is actually happening?

What problem does this feature solve?

What does the proposed changes look like?

What problem does this feature solve?

What does the proposed changes look like?

Version

Reproduction link

Steps to reproduce

What is expected ?

What is actually happening?

Additional comments?

Version

Reproduction link

Steps to reproduce

What is expected ?

What is actually happening?

What I tried