Version

v4.9.1

Reproduction link

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

Steps to reproduce

to reproduce: take a working nuxt website, with auth-module installed and working, and just run: yarn add vuex-persist.
see many weird issues with login, logout, and getting the info from #auth.user.

What is expected ?

expected is that vuex-persist will be installed and still the login thing will stay alive.

What is actually happening?

installing vuex-persist breaks the login mechanism and it does not work as expected any more.

Hi all

This is quite possibly something I'm doing wrong so hopefully this is an easy fix, but I cannot get refresh tokens to work when authenticating with Auth0. Here's my config:

auth: {
   redirect: {
      callback: '/auth/signed-in',
   },
   strategies: {
      local: false,
      auth0: {
         domain: 'my_domain.auth0.com',
         client_id: 'my_client_id',
         audience: 'https://my_domain.auth0.com/api/v2/',
         scope: ['openid', 'profile', 'email', 'offline_access'],
      }
   }
}

The authentication works, I can log in etc, but I am never sent a refresh token, and as such the user always gets logged out once their access token expires. Is this expected? I had a look through the code and it seems like refresh tokens are supported, but the issue is that Auth0 is not returning an access token. I checked the API in Auth0 and it does have "offline access" enabled.

Also, if this is the wrong place to log this, my apologies and please point me in the right direction.

Cheers!

I have defined the following local strategy in my nuxt.config.js file:

 auth: {
    redirect: {
      login: '/',
      logout: '/',
      callback: false,
      home: 'explore',
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/auth/local',
            method: 'post',
            propertyName: 'jwt'
          },
          logout: false,
          user: {
            url: '/users/me',
            method: 'get',
            propertyName: 'false',
          },
        },
      },
    },
    autoFetchUser: false,
    fullPathRedirect: true,
  },

And the login method like so:

this.$auth.loginWith('local', {
            data: {
              identifier: this.email.input,
              password: this.password.input,
            },
          })

And looking at the login endpoint, you can see that I expect to receive an object with a property called jwt, which should populate the the auth_token in local storage. But for some reason, the response from the login endpoint comes like so:

Shouldn't the response be only the JWT token, according to what's in the docs?? Or am I missing something?

Version

v5.0.0

Reproduction link

https://jsfiddle.net/

Steps to reproduce

Just let token expire and refresh page without doing any axios requests before leaving page.

What is expected ?

user to be still logged in after page refresh

What is actually happening?

user is getting logged out even though refresh token is still valid

What problem does this feature solve?

This feature allows to configure the auth module at runtime. This facilitates creating applications with the "Build Once, Deploy Many" principle (by applying guideline III of the 12-factor app methodology, storing configuration in the environment). Put simply: This feature enables deployment of the same build in multiple environments (production, staging, different customers), each having a different authentication configuration (different endpoints, providers, schemes, …).

What does the proposed changes look like?

Change the module's plugin.js template and replace the hardcoded strategy configuration settings.
One possible way to approach this is to implement the dynamic configuration solution that will be available in the upcoming 2.13 release of Nuxt (cfr. https://github.com/nuxt/nuxt.js/issues/5100). Another would be to provide some kind of hook into the module initialisation. The runtime configuration of the auth module should also work when using (asynchronous configuration)[https://nuxtjs.org/guide/configuration/#asynchronous-configuration].

I'm trying laravel/sanctum provider but I get this error message :

POST http://backend.test/login 419 (unknown status)

And CSRF token mismatch.

What's wrong in my configuration below ?

1. Laravel configuration

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

File app/Http/Kernel.php:

use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;

'api' => [
    EnsureFrontendRequestsAreStateful::class,
    'throttle:60,1',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

File config/cors.php:

'supports_credentials' => true

File .env:

SANCTUM_STATEFUL_DOMAINS="localhost:50729" # My Nuxt SPA: npm run dev -- --port 50729
SESSION_DOMAIN=.backend.test

2. Nuxt configuration

File nuxt.config.js:

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/auth-next'
],
auth: {
  strategies: {
    laravelSanctum: {
      provider: 'laravel/sanctum',
      url: 'http://backend.test'
    }
  }
},

File pages/index.vue:

<template>
  <div>
    <button @click="signIn()">Sign in</button>
    <pre>{{ $auth.user }}</pre>
  </div>
</template>

<script>
export default {
  methods: {
    signIn() {
      this.$auth.loginWith('laravelSanctum', {
        data: {
          email: '[email protected]',
          password: '***'
        }
      })
    }
  }
}
</script>

{message: "CSRF token mismatch.", exception: "Symfony\Component\HttpKernel\Exception\HttpException",…}
exception: "Symfony\Component\HttpKernel\Exception\HttpException"
file: "/Users/me/backend/vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/Handler.php"
line: 226
message: "CSRF token mismatch."
trace: [{,…},…]

Version

v4.9.1

Reproduction link

https://github.com/nuxt-community/auth-module/issues/58#issuecomment-635763044

Steps to reproduce

Start a project with @nuxtjs/auth version 4.9.0 or 4.9.1 (got to simulate in both). Make sure the endpoints configured in auth.strategies.local.endpoints.login and auth.strategies.local.endpoints.user are a little bit slow (1s to respond or more).

What is expected ?

User is logged in and redirected to the root.

What is actually happening?

Screen shows the network activity bar (fetching the JWT token and user), and then nothing more rather than clearing the login and password fields happen (user is stuck at the login screen), If user navigates afterwards to the root, the root route opens normally.

Additional comments?

This happens since version 4.7.0. Got to use some workarounds, but a new implementation made me stumble upon this problem once again.

How to install the development version of Nuxt Auth module ?

$ npm view @nuxtjs/auth dist-tags
{ latest: '4.9.1' }
$ npm install @nuxtjs/[email protected]
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @nuxtjs/[email protected]
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/me/.npm/_logs/2020-05-28T23_02_05_605Z-debug.log

I usually use feathers-veux to work with a third-party API on the server
but I was faced with the task of authentication via social networks, for which I tried to use the auth-module
and I see an error:
duplicate namespace auth/ for the namespaced module auth

tell me is there an option to set the custom module name?

Using laravel/passport auth, in callback route following error occurs,

Request URL: http://localhost:8080/_auth/oauth/laravel.passport/authorize
Request Method: POST
Status Code: 500 NuxtServerError

{
"error": {
"message": "connect ECONNREFUSED 127.0.0.1:443",
"name": "NuxtServerError",
"frames": [
{
"file": "net.js",
"method": "TCPConnectWrap.afterConnect [as oncomplete]",
"line": 1141,
"column": 16,
"context": {},
"lang": "js"
}
]
},
"hasInternal": false
}

nuxt.config.js :
auth: {
redirect : {
callback : '/auth/callback',
login: '/login',
home: '/'
},
strategies: {
'laravel.passport': {
provider: 'laravel/passport',
url: 'https://laravel.localhost',
clientid: '3', clientsecret: 'aSUw5ZwwG45QsAm5WT2BvwIumeyTV9J9vw81ArjR',
endpoints: {
userInfo:'https://laravel.localhost/api/user'
}
}
}
},

On callback page (auth/callback.vue) :
manually calling axios.post('https://laravel.localhost/oauth/token', {
clientid:'3', clientsecret: 'xxx',
granttype: 'authorizationcode',
redirecturi : 'http://localhost:8080/auth/callback', code : apicode }) is working …

Anyone have sample code for laravel/passport authentication using granttype : authorizationcode ?

Version

v4.9.1

Reproduction link

https://codepen.io/joao-henrique-abreu/pen/xxwBrGZ

Steps to reproduce

[UPDATE]: I was able to "fix" this by disabling token (not sure this is ideal)

Prod (QA) setup: heroku app.

nuxt.config.js

Works on dev / doesn't work on prod:

auth: {
    scopeKey: 'type',
    strategies: {
      local: {
        endpoints: {
          login: { url: 'login', method: 'post', propertyName: 'token'},
          logout: { url: 'login', method: 'delete' },
          user: { url: 'validate', method: 'post', propertyName: 'user'}
        }
      },
    }
  },

Works on prod:

auth: {
    scopeKey: 'type',
    strategies: {
      local: {
        endpoints: {
          login: { url: 'login', method: 'post', propertyName: false },
          logout: { url: 'login', method: 'delete' },
          user: { url: 'validate', method: 'post', propertyName: false }
        }
      },
      tokenRequired: false,
      tokenType: false
    }
  },

The server gives the correct response on both cases (as i am able to login in dev).

Thanks to https://dev.to/mandeepm91/how-to-add-authentication-to-your-universal-nuxt-app-using-nuxt-auth-module-3ffm
I was able to make this work, but I suppose token should be supported.

What is expected ?

I would expect enabling token to work on prod. Works perfectly on dev environment.

What is actually happening?

At login page when $auth.loginWith('local') is called we get this error:

TypeError: Cannot use 'in' operator to search for 'token'

I briefly traced it and seems that it's trying to use in against a string (minified):

...
if (t in e)
...

where t is 'token' and e is the string of the whole html of the page.

I want to set home options(url to redirect after logging in) for each strategy.
So I did something like below but it didnt work.It always uses the home option in redirect's.So every time I log in, it redirects to "/" now.

Is there any way to set the home option for each strategy?

  auth: {
    redirect: {
     home: "/"    
    },
    strategies: {
      user: {
        // ... user's sheme
       home: "/user/home" 
      },
      adminUser: {
        // ... adminUser's scheme
        home: "./admin_user/home"
      }
    }

Version

v4.9.1

Reproduction link

https://codesandbox.io/s/local2-ciqks

Steps to reproduce

reproduction link:

1. login button 1. refresh page -> still logged in.
2. login button 2. refresh page -> not logged in anymore

technical:
1: set cookie: false,
2: Login with a new strategy using the local scheme. For instance
local2: {_scheme: 'local',...}
3: Reload Page.

What is expected ?

Token is read from localstorage, user is fetched, and visitor status is loggedin. Like when using strategy 'local'.

What is actually happening?

User is not fetched and Visitor is not loggedIn.

I'm attempting to integrate the 'Nuxt Auth Module' into my Nuxt App.

https://auth.nuxtjs.org/

I have configured my Proxy & Auth Modules and have setup the 'Local Strategy'.

https://auth.nuxtjs.org/schemes/local.html

My 'Login' endpoint works fine, and I set the 'propertyName' to 'access_token' as that is where the value for my token lives. I see 'Vuex' update my 'LoggedIn' status to true and I can also see the Token Response in the 'Network' tab of Chrome.

However I'm really struggling to understand how the 'User' endpoint works.

The example given:

auth: {
  strategies: {
    local: {
      endpoints: {
        login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
        logout: { url: '/api/auth/logout', method: 'post' },
        user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
      },
      tokenRequired: true,
      tokenType: 'bearer'
    }
  }
}

The above is pretty much identical to mine, how does the 'User' endpoint, know which user is logged in?

I am using a third-party system for my authentication as I'm integrating an application into the third-party system. Their 'User' endpoint for REST requires an 'ID' or 'UserName' to return details about a particular user.

My 'Login' response contains 'UserName' which I could use to call the subsequent User endpoint (If I knew how).

Does anyone know how the User endpoint works? Essentially I need to call something like this:

user: {
  url: '/users/${userId}',
  method: 'get',
  propertyName: 'data'
}

Thanks for helping me

Can be deleted…

What problem does this feature solve?

Getting state information while user request to login with oauth2.

While pass a state for oauth2 login, the value is passed to provider(google,facebook) and the provider is sending this value back to callback URL but oauth2 implementation is ignoring this state paramter.

It is possible to pass this parameter via the POST request

What problem does this feature solve?

After failed to authenticate via oauth2 - enable redirect to home page

What does the proposed changes look like?

On schemes -> oauth2.ts -> _handleCallback

after getting response with this.$auth.request, if token is not exists (line 297) consider to redirect to home page/error page.

What problem does this feature solve?

I'm having difficulty using refresh token to integrate with my Django REST Framework backend. After reading the source code (https://github.com/nuxt-community/auth-module/blob/dev/src/schemes/refresh.ts) and pull requests, it does mention about 'refresh' scheme. However, I could not find anything about that in the official documentation.

What does the proposed changes look like?

Updated doc with local refresh scheme.