Version

v4.8.4

Reproduction link

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

Steps to reproduce

1. Follow this guide for cookie-based flow: https://auth.nuxtjs.org/schemes/local.html#options
2. Configure your nuxt.config.js like in comment below
3. Run nuxt application in dev mode (via npm run dev for example)
4. Login on login page
5. Open network tab in developer tools
6. Go to home page where menu or any other element renders only if user logged in
7. See that this element renders first time for not authenticated user
8. Nuxt auth making a request for check if user authenticated (why? Cookie was available from server side before response from server and it was enough for checking authenticate route before render the page)
9. When response is ready – nuxt auth set loggedIn variable to true and re-render element
10. I have errors in console and invalid application

What is expected ?

Nuxt auth module will make a request ON SERVER SIDE and BEFORE RENDER CONTENT set variable loggenIn to appropriate value.

What is actually happening?

Nuxt auth module makes authentication request on client side and re-renders page, it leads to problems with ssr.

Additional comments?

I don't know why, but when I build application and deploy it to production – everything works fine and I don't see any client-side requests, but only in dev mode on my laptop (osx) I have this annoying trouble – it makes my development painful. I also want to provide my project stack and difference between production machine and local. Project stack – symfony as backend api and nuxt as frontend. Symfony and database are working in docker and it's too slow (popular issue on macOS – https://github.com/docker/for-mac/issues/2707). On my production machine I'm using ubuntu, symfony and database are working without docker.

My nuxt config for auth module:

auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/userapi/authenticate',
            method: 'post'
          },
          user: {
            url: '/userapi/authenticated_user',
            method: 'get',
            propertyName: 'email'
          },
          logout: {
            url: '/userapi/logout',
            method: 'delete'
          }
        },
        tokenRequired: false,
        tokenType: false
      }
    },
    watchLoggedIn: false,
    redirect: false
  },

Request that is sent on initial loading (reload page, already has valid cookie for authentication):

Errors which I have in console:

Sorry it's my first time to ask something in public repository.
How to implement Basic Auth in this module?

I'm using the authorization_code grant and I'm wondering how to handle logins when end users go directly to the authorization page external to my nuxt app?

My nuxt application sits behind a gateway utilizing the same hostname for both my nuxt app and my authorization server. If the user bookmarks or navigates directly to the authorization server login page and authenticates, a session cookie is created and stored with the domain. When the user navigates back to the nuxt app, they are not logged in due to the fact the authorization_code grant hasn't been executed from nuxt.

What is the recommended way of handling this use case? Is there an auto login function I could add to the nuxt login page forcing the authorization_code grant to execute on page load?

i have 2 node for 2 domain , ex: 127.0.0.1:3000 vs 127.0.0.1:3001

• when i login with 127.0.0.1:3001 by :
  this.$auth.loginWith('local', {
  data: {
  username: 'yourusername', password: 'yourpassword'
  }
  })
  this $auth will use axios endpoint login
  when success token can save in local browser
  when i access node 127.0.0.1:3000 , it auto login by token of 127.0.0.1:3001 and I don't want that to happen
  I want 127.0.0.1:3000 use another token in local
  can help ?

Version

v4.8.1

Reproduction link

https://jsfiddle.net/e7mdn0to/

Steps to reproduce

Create basic project with create nuxt app. Set up auth module. Add simple secure route page. Add the social config to the nuxt config in the jsfiddle. Log in with your google account.

What is expected ?

Redirect to secure route.

What is actually happening?

Redirect to main page becuase loggedIn property is false.

Additional comments?

Tried debugging with debugger to see why loggedIn isn't set to true, but can't pinpoint the problem or where vuex initializes the auth object upon initial load.

Version

v4.8.4

Reproduction link

http://later-if-need

Steps to reproduce

1) Install auth-module in Nuxt project with vue, use following config:

auth: {
    watchLoggedIn: true,
    resetOnError: true,
    cookie: false, // <--- no cookie, only localStorage, '/personal' section of site wich need authorization runs with serverMiddleware setting mode: 'spa'
    redirect: false,
    strategies: {
      local: {
        endpoints: {
          login: { url: '/api/login/', method: 'post', propertyName: 'token' },
          logout: false,
          user: {
            url: '/api/user/',
            method: 'get',
            propertyName: 'user',
          }
        },
        tokenRequired: true,
        tokenName: 'Authorization',
        tokenType: 'Bearer'
      }
    }
  },

note that in documentation: vuex.namespace option is set to 'auth' by default…

2) run $auth.login() then do $router.push('/personal')
3) in /pages/personal/index.vue mounted we have:

console.log('USER', this.$auth.user, this.$auth.loggedIn, this.$store.state.auth.user, this.$store.state.auth.loggedIn)

What is expected ?

this.$auth.user, this.$auth.loggedIn to show real value equal to this.$store.state.auth.loggedIn, this.$store.state.auth.user

What is actually happening?

token is used, /api/user/ and all other endpoints with checks for token is returning data correctly.
this.$user.getToken() also seems to work.
however console.log('USER', this.$auth.user, this.$auth.loggedIn, this.$store.state.auth.user, this.$store.state.auth.loggedIn)

gives me:
USER null false {…} true

adding

async asyncData({ $axios, store, redirect, $auth }) {
      await $auth.fetchUserOnce()
}

shows correct request but nothing changed.

Additional comments?

Looks like storage engine (lib/core/storage.js) works incorrect. Stores data to my vuex store, but can't read from state directly.
While token seems to be stored using setUniversal/getUniversal, and is correctly setted in nuxt-axios instance headers.

if I add console log in lib/core/auth.js setUser and get user () I see following after call login:

> setUser false
> setUser {_id: "5dd65ff098711f313c3be6e6", email: "...",…} // several times in between goes my route push

> get user() this.$state 
loggedIn: false
strategy: "local"
user: null

> get user () this.$storage._useVuex.state.auth // storage.js this._useVuex = this.options.vuex && this.ctx.store leaves store there....
busy: false
loggedIn: true
strategy: "local"
user: Object

after refreshing page Cmd+R data reveals correctly.

Version

v4.8.4

Reproduction link

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

Steps to reproduce

Setup nuxt with typescript.
Install auth module @nuxtjs/auth @nuxtjs/axios @types/nuxtjs__auth
Configure auth0 provider https://auth.nuxtjs.org/providers/auth0.html
Setup login and callback routes.
Generate static.
Run http-server ./ in the dist folder.
Open browser and login (localhost:3000)

What is expected ?

The user should be authenticated after auth0 redirects to the callback.

What is actually happening?

Auth0 redirects to /callback, but the user is not authenticated.

Additional comments?

Running the application normally (without static) works.
Setting mode to universal or spa has no effect.

What problem does this feature solve?

I have had an abundance of success adding Google, GitHub, and Facebook support to my user authentication system. I was having difficulties hooking into Twitter's authentication flow myself and was wondering if there will be any official support for Twitter logins and authorisation.

Hi,

I currently have to following Configuration:

auth: {
  strategies: {
    keycloak: {
      _scheme: 'oauth2',
      authorization_endpoint: 'http://localhost:8080/auth/realms/sirixdb/protocol/openid-connect/auth',
      userinfo_endpoint: false,
      access_type: 'offline',
      access_token_endpoint: 'http://localhost:8080/auth/realms/sirixdb/protocol/openid-connect/token',
      response_type: 'code',
      token_type: 'Bearer',
      token_key: 'access_token',
      client_secret: '2e54cfdf-909b-47ca-b385-4c44886f04f0',
      client_id: 'sirix',
      grant_type: 'refresh_token'
    },
  },
  redirect: {
    login: '/login',
    callback: '/callback',
    home: '/'
  },
},

Now my problem is that only confidential clients should be allowed to communicate with Keycloak. So, the token-endpoint needs the client_secret, but it's not sent with the standard OAuth2 schema of Nuxt.js. How can I override this behavior? I'm really new to front-end webdev and if I'm using a Vert.x API backend as an indirection I got everything up and running, but not with Node.js directly communicating with Keycloak. However the Vert.x based REST-API only needs the generated JWT-tokens, to check authentication. It would have to be added here:

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

Just as for the other providers :-) Or we could add a Keycloak provider?

HI,
I was trying to integrate facebook login using nuxt facebook auth module. But even after following the steps mentioned in the documentation of nuxt , i'm getting an error saying that

TypeError: Cannot read property 'loginWith' of undefined
at VueComponent.fbAuth

My nuxt.config.js file looks like this
auth: {
strategies: {
facebook: {
clientid: '*',
userinfoendpoint: 'https://graph.facebook.com/v2.12/me?fields=about,name,picture{url},email,birthday',
scope: ['publicprofile', 'email', 'userbirthday'],
redirect_uri: 'http://localhost:3000/callback'
},
}
}

And I'm calling the this.$auth.loginWith("facebook") on a button click

Please help. Thanks

I have an issue where I am having a hard time proxying requests with this module. In my vue component, if I call this.$auth.loginWith('local', payload), the network request issues a POST to localhost:3000/api/auth/login, while I am looking for the request to be made to localhost:3333/v1/auth/login. I am at a loss as to how to debug this, so any help is greatly appreciated 🙏. Below are some key components of the nuxt config:

modules: [
'@nuxtjs/axios',
'@nuxtjs/pwa',
'@nuxtjs/auth',
'@nuxtjs/proxy'
],
axios: {
proxy: true
},
proxy: {
'/api/': {
target: process.env.API_PREFIX || 'http://localhost:3333/v1',
pathRewrite: { '^/api/': '' }
}
},
auth: {
strategies: {
local: {
endpoints: {
login: {
url: '/api/auth/login',
method: 'post',
propertyName: 'accessToken'
}
}
}
}
},

Version

v4.8.4

Reproduction link

https://github.com/nuxt-community/auth-module/tree/dev/examples/demo

Steps to reproduce

1. Clone nuxt-auth repo
2. Configure auth for an oauth2 scheme
3. Set the token_key to id_token
4. Run demo and sign in
5. Grab the access_token from local storage in the browser dev tools
6. Decode JWT and notice that the token_use attribute is set to "access"

What is expected ?

When configured for id_token, the auth module should store the id_token. This can be verified by decoding the stored JWT and checking the token_use attribute. The token_use attribute should be set to "id".

What is actually happening?

When auth module is configured for id_token, the access_token is stored.

Additional comments?

The problem is on line 166 on the master branch:

if (data.access_token) {
  token = data.access_toke
}

The if statement should use the value of token_key to select which key to store. For example:

const token_key = this.options.token_key || 'access_token'

if (data[token_key] {
  token = data[token_key]
}

token_key could be set to access_token in options defaults.

Hi,
is there a way to add a silent-login-method without redirecting to login-page?

Example:

• User fills in a form.
• On form-send the backend-system response with a token-expired-message
• The frontend open a login-modal
• The login-modal-request should login silently without redirect (to keep form-data)
• Default login-page-mechanism should redirect

Thanks,
vanderb

Some way to implement password grant type of Laravel passport support ??

Version

4

Reproduction link

http://todo.com

Steps to reproduce

Visit a protected route by clicking a nuxt-link, and it loads correctly.
Then refresh the page

What is expected ?

Protected page loads

What is actually happening?

Redirect to login

Additional comments?

Hi!

I'm a bit confused as to why this is happening. I'm using a pretty basic set up (local scheme, universal storage).

As soon as I refresh the page, I'm redirected (302 from nuxt) to the login page. I did a bit of debugging and this seems to be because loggedIn isn't set in the cookie state.

All of the other cookies are there, but i'm still redirected :(

I'll do some more digging and try find some more info & a repro

Here's my branch:

https://github.com/sirixdb/sirix-web-frontend/tree/oauth2-auth

Now I'm having trouble with Chrome, Nuxt.js, Keycloak and CORS. It says that Origin null is not allowed, but "Web Origins" in Keycloak is set to http://127.0.0.1

My journey so far:

https://dev.to/johanneslichtenberger/oauth2-auth-with-nuxt-js-vue-js-frontend-vert-x-backend-for-bl-and-keycloak-auth-server-26ab

Hi,

after the user properly logs in say with google/facebook, how would you start a session with your backend?

Thank you,

-l

When I login using auth0 everything works fine.
In my Vuex state there is an object named auth that contains loggedIn: true and user: userobject and other good information.
It however does not contain the jwt access_token. Which I need authenticate against my api.
How do I go about adding this access token to the the auth object?
Am I looking at this completely wrong?