What problem does this feature solve?

Currently the auth module can't make use of a company proxy server, resulting in timeout with external identity provider(e.g. keycloak).

What does the proposed changes look like?

I would like to extend the auth module with a custom proxy config for axios, thus being able to access external identity providers via the company proxy.
I already started with the base structure. Maybe you can give me a hint how to continue…:

export default function({ $auth }) {
  if (!$auth.loggedIn) {
    return
  }

  require('dotenv').config()

  if (process.env('COMPANY_HTTP_PROXY')) {
    const axios = require('axios')
    const HttpsProxyAgent = require('https-proxy-agent')
    const agent = new HttpsProxyAgent(process.env('COMPANY_HTTP_PROXY'))

    const customAxiosConfig = {
      url: currentAxiosUrl,    // this should be a dynamic value, depending on the url the auth module is trying to reach via axios
      httpsAgent: agent
    }
    axios.request(customAxiosConfig).then((...)) // the custom axios config for usage with the auth module should be set here

  }
}

How can I accomplish that ?
Please help.

Hi, I need to use the auth module with a company proxy server. The identity provider (Keycloak) is located externally, thus it is mandatory that the auth module uses the company proxy for communication with keycloak. My nuxt app (universal) is located in a docker container which is configured properly for using the company proxy. The container can access external sources, but the nuxt app, especially the auth module doesn't use it, thus login always times out. How can I tell the auth module to use the system proxy settings ?

Version

v4.9.0

Reproduction link

#

Steps to reproduce

Open the browser console, enter:

$nuxt.$store.state.auth.user = { some fake value }; (optional)

$nuxt.$store.state.auth.loggedIn = true;

What is expected ?

The value of $store.state.auth.user, $store.state.auth.loggedIn, etc.. should not be mutated by console.

What is actually happening?

The login state is changed to true! And I can now access any "secret" page.

Additional comments?

I'm not sure its a bug of the auth module or nuxt itself. As nuxt exposes $nuxt instance to the console, its very danger that user can access vuex values and mutate it directly through the console.

If its a bug of nuxt, please let me know if it is necessary to open a new issue on the nuxt repo.

Facebook is deprecating the V2.12 of its auth on the 1st of May 2020. The latest version is V6.0. We need to bump the version.

I have been combing through the documentation looking for a way to make the authentication last only per session.

The access tokens only last for 60mins and will practically be invalid the next time the user returns. I wanted to use sessionStorage but I couldn't find anything on it in the doc.

I want every auth credential to be cleared when the user ends the session (closes the browser/tab). and localStorage doesn't seem to do that.

I am now trying to use the cookie option with this config:

auth: {
    localStorage: false,
    cookie: {
      maxAge: 3600 // 1hr
    },
    resetOnError: true,
    rewriteRedirects: true,
    strategies: {
      local: {
        endpoints: {
          login: {
            url: 'auth/login',
            method: 'post',
            propertyName: 'data.token'
          },
          user: {
            url: 'auth/user',
            method: 'get',
            propertyName: 'data'
          },
          logout: false
        }
      }
    }

I'm not certain of how to extract the token now to set in axios interceptor for requests.

Hi all, I'm having some trouble tuning an SPA application to use the Auth module.
After the provider redirects back to the callback, there is another redirection to the route the user was in before logging in. The problem is that in SPA mode, this causes a screen refresh, instead of a route push. This becomes a series of "screen blinks" that are not user friendly at all.

Is there any way to avoid this redirection?

To reproduce this behavior you can run the demo app in SPA mode and run the following steps:

• Navigate to "Secure" page
• Auth-module redirects to "/login"
• Click on a provider (Auth0 for example)
• Auth-module redirects to Auth0 page (expected)
• Authenticate with Auth0
• Auth0 redirects to "/callback" (expected)
• Auth-module redirects to "/secure" (with a screen refresh instead of a push! NOT EXPECTED)

Am I getting this wrong?

Thanks for the help

Version

v4.9.0

Reproduction link

https://github.com/nuxt-community/auth-module/blob/dev/lib/schemes/oauth2.js#L223

Steps to reproduce

1. Setup demo example to work with Cognito or other auth provider with strict refresh token requests
2. Run demo code, login, and go to oauth2RefreshTest page
3. Open developer tools and go to the network tab
4. Click on the Refresh tokens button
5. Observe the failed token request and that the Authorization header is set with the access token

What is expected ?

Authorization header should be cleared.

What is actually happening?

The clearToken() call immediately before requestWith() does, in fact, clear the Authorization header. However, requestWith() always adds the token again.

I can't find an example server-side authorization code.

// url: '/api/auth/login'
export default async function(req, res, next)
{
// req.body.email req.body.password
// query to db
// what do I need to return and do to implement authorization
}

Hello, I am looking for a functionality for refreshing Laravel Passport-provided tokens. I tried several things using the dev branch of this repo. My auth currently looks like this:

redirect: {
    login: '/login',
    logout: '/',
    user: false,
    home: '/'
  },
  strategies: {
    'laravel.passport': {
      _scheme: 'refresh',
      token: {
        property: 'access_token',
        maxAge: 60 * 30
      },
      refreshToken: {
        property: 'refresh_token',
        maxAge: 60 * 60 * 24 * 30
      },
      endpoints: {
        refresh: {
          url: '/oauth/token',
          method: 'post',
          propertyName: 'refresh_token'
        },
        login: {
          url: '/oauth/token',
          method: 'post',
          propertyName: 'access_token'
        },
        logout: false,
        user: {
          url: '/me',
          method: 'get',
          propertyName: 'data'
        }
      },
      autoRefresh: {
        enable: true
      },
      autoLogout: true
    }
  }

It is successfully sending a 'refresh' request at 75% of the expiration duration, but I get the following response back:

error: "invalid_request"
error_description: "The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed."
hint: "Check the `client_id` parameter"
message: "The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed."

According to the Laravel Passport Docs it requires the client id and secret.

From what I gathered it is possible to send the clientId back, but only when it's included on the original token request. Since Laravel Passport doesn't send a clientId, I can't include it to the refresh request. I also tried adding it to the refresh endpoint object as request-data but it gets ignored. For the client secret it's the same problem.

Is this functionality maybe scheduled for v5? Please let me know if you have any information and/or solutions.

I am trying to do a normal login page using nuxt and nuxt/auth module. What is hapening, is that when i click the submit button a riderect to the index page is hapening. this is my html code:

  <template>
      <div class="container">
          <b-card header="Sign In"  header-bg-variant="secondary" header-text-variant="white" style="width: 20rem;" >
 <b-form @submit="onSubmit">
  <b-form-group
    id="input-group-1"
    label="Username:"
    label-for="input-1"
  >
   <b-form-input
    id="input-1"
    v-model="form.userName"
    type="email"
    required
    placeholder=""
  ></b-form-input>
   </b-form-group>

   <b-form-group id="input-group-2" label="Password:" label-for="input-2">
     <b-form-input
       id="input-2"
       type="password"
       required
       v-model="form.password"
       placeholder=""
     ></b-form-input>
   </b-form-group>

   <b-form-group id="input-group-3" label="Reference:" label-for="input-3">
    <b-form-input
    id="input-3"
    v-model="form.reference"
    required
    placeholder=""
       ></b-form-input>
        </b-form-group>
      <b-button type="submit" variant="primary">Submit</b-button>
       </b-form>
   </b-card>
    </div>
  </template>

and this is my JS submit function:

  async onSubmit(evt) {
         evt.preventDefault();
          var self = this;
          var data = {
           email: self.form.userName,
          password: self.form.password,
         role: "publisher"
         };

try{
  await this.$auth.loginWith("local", {
    data: data
  })
}catch (e) {
  console.log(e);
  self.emailCheck = true;
}

if (this.$auth.loggedIn) {
  axios.defaults.headers.common["authorization"] = self.$auth.getToken(
    "local"
  )
  axios.get(self.baseUrl + "devices/config/" + self.form.reference)
    .then(async function (response) {

      self.$router.push({
        name: "mediaPlayer"
      });

    })
    .catch(function (error) {
      console.log(error);
      self.refCheck = true;
     });
      }
    }

i tried to put the prevent event in the html like this @submit.stop.prevent="onSubmit" but nothing also. what i want is to go to the mediapalyer page if the login is done or just do the console of the err if it is not.

Version

v4.9.0

Reproduction link

https://github.com/axel-verse/nuxt-auth-bug

Steps to reproduce

1) Setup Auth module as it described in https://github.com/nuxt-community/auth-module/pull/361
2) Try to use $auth.loginWith at any page

What is expected ?

Successfull login

What is actually happening?

TypeError: Cannot read property 'mounted' of undefined
at Auth.mounted (auth.js?facc:112)
at Auth.setStrategy (auth.js?facc:108)
at Auth.loginWith (auth.js?facc:123)
at VueComponent.doLogin (index.vue?6ced:21)
at click (index.vue?d50a:53)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

Additional comments?

Any help is appreciated

Version

v4.9.0

Reproduction link

https://google.com

Steps to reproduce

I was excited to try the new core feature for response data on loginWith method and so I added it to handle messages, etc…
My initial auth configuration for local users was:

      local: {
          [...]
          user: { url: '/me', method: 'GET', propertyName: false }
        },
        [...]
      },

I find out that for get response data from loginWith I must write something in the propertyName and so I added 'user'. It works.
Unfortunately the user is not saved anymore in the store. I can see the call to my API to fetch the user but the Vue store is empty.
I tried to force it by using fetchUser but it doesn't work too.

Any clue?

What is expected ?

To set the user in the store after login.

What is actually happening?

The user is not set in the store.

Hi! How can i add error handling for when the oauth code endpoint callback fails? (when trading the code for the access token). This could happen when you log in to an account that does not have access to this app for example. Ive tried adding axios error handlers etc but it doesnt seem to work

Version

v4.9.0

Reproduction link

https://github.com/nuxt-community/auth-module/blob/dev/lib/schemes/oauth2.js#L194

Steps to reproduce

1. Configure example code to work with oauth2 provider.
2. Login using oauth2 provider
3. Look in browser cookies and notice that both the access token and refresh token are the same and have the same expiration

What is expected ?

The refresh token and expiration should be stored.

What is actually happening?

The access token is stored in both the token and refresh token. Same with expiration.

It looks like when the backend doesn't confirm user auth (user is false and loggedIn is false) for the SSR backend, the frontend part does the same request again. Looks like the problem is in this line:

https://github.com/nuxt-community/auth-module/blob/b9d05554cc3f11fd5bee06775fe158024f755f39/lib/core/auth.js#L216

I'm trying to avoid second request from frontend, as I already know used is not logged in from backend, is there an option to do so? And how is this intended to be used?

I got an answer: https://github.com/nuxt-community/auth-module/issues/561

Hello,

I would like to understand how autoFetchUser "false" option behavior:

I understand that if I set it to "false" it does not send a user request once you successfully login (my login requests return user id). However, after logging in this.$auth.loggedIn returns false (means that user is not logged in), until I refresh the webpage and user endpoint is requested again. So what I see that with this option turned off for the user to be logged in I need to refresh webpage to request user.

Is this wroking as intended or I have incorrect setup?

Login Form

<template>
  <form>
    <input v-model="login.username" placeholder="enter username" />
    <input v-model="login.password" placeholder="enter password" />
    <div>
      <button @click="userLogin" type="button">Submit</button>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      login: { username: '', password: '' }
    }
  },
  methods: {
    async userLogin() {
      try {
        await this.$auth.loginWith('local', {
          data: this.login
        })
        console.log(this.$auth.loggedIn) 
        // Here it returns false even though my endpoint returns user id, for example: {user: 3}

        this.$router.push('/')
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

nuxt.config.js

auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: 'api/auth/login',
            method: 'post',
            propertyName: 'user'
          },
          user: { url: 'api/auth/user', method: 'get', propertyName: 'user' }
        },
        tokenRequired: false,
        tokenType: false,
        autoFetchUser: false
      }
    },
    redirect: { home: '/' }
  },

  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {
    proxy: true
  },
  proxy: { '/api/': 'http://localhost:4000/' },

Regards,
Rokas

Hello,

I am fairly new to Nuxt JS and its module Auth. I want to be sure if my application is secure. Currently this is how it works:

my nuxt.congif.js file:

auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: 'api/auth/login',
            method: 'post',
            propertyName: 'user'
          },
          user: { url: 'auth/user', method: 'get', propertyName: 'user' }
        },
        tokenRequired: false,
        tokenType: false,
        autoFetchUser: false
      }
    }
  },

  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {
    proxy: true
  },
  proxy: { '/api/': 'http://localhost:4000/' },

So the user logins in nuxt application and then I send username and password to the back-end. My back-end is Express JS + Passport JS. I have local Passport strategy which checks if user exists in the database. If the user exists I serialise it and it's id is included in the session. I then send the user id back to nuxt:

passport.js

module.exports = function(passport) {
    passport.use(
        'login',
        new LocalStrategy(
            { usernameField: 'username', passwordField: 'password' },
            async (username, password, done) => {
                console.log(username, password)
                try {
                    // Check if user exists
                    // Return ambigous error so that user could not know what was precisely wrong
                    const user = await db.one(
                        'SELECT * FROM users WHERE email = $1',
                        [username]
                    )

                    if (user.length === 0) {
                        return done(null, false, {
                            message: 'Incorrect email or password',
                        })
                    }

                    // Check that user has confirmed his email
                    if (!user.confirmed) {
                        return done(null, false, {
                            message: 'Please verify your email',
                        })
                    }

                    // Check if passwords match
                    // Return ambigous error so that user could not know what was precisely wrong
                    const validPassword = await bcrypt.compare(
                        password,
                        user.password
                    )
                    if (!validPassword) {
                        return done(null, false, {
                            message: 'Incorrect email or password',
                        })
                    }

                    // If no errors are returned return user
                    return done(null, user)
                } catch (error) {
                    console.log(error)
                    return done(null, false, {
                        message: 'Incorrect email or password',
                    })
                    // Need to create error handler for missing user
                }
            }
        )
    )

    passport.serializeUser(function(user, done) {
        console.log('serializing the user')
        done(null, user.id)
    })

    passport.deserializeUser(async (id, done) => {
        console.log('deserializing the user id: ', id)

        try {
            const user = await db.one('SELECT * FROM users WHERE id = $1', [id])
            // console.log(user);
            done(null, user)
        } catch (err) {
            console.log(err)
            done(err, null)
        }
    })
}

auth.js route:

    app.use('/auth', router)
    router.post('/login', async (req, res, next) => {
        passport.authenticate('login', (err, user, info) => {
            req.login(user, err => {
                if (err) {
                    return next(err)
                }
                res.json({ user: req.user.id })
            })
        })(req, res, next)
    })

Here my knowledge gets weak and I would like some guidance. The responded user id is then held in $auth instance. However, how safe is this instance? Can somebody access it besides my nuxt server?

Please feel free to tell if some more information would be required.

Regards,
Rokas