How implement refreshToken in nuxtjs? - vue.js

i work hard in implement #nuxt/auth-next with refreshToken ,i wrote with docs. It didn't work. Here is my nuxt.config.js
local2: {
scheme: 'local',
user: {
property: 'user',
autoFetch: true,
},
refreshToken: {
property: 'refresh_token',
data: 'refresh_token',
required: true,
},
endpoints: {
login: {
url: '/user/login/',
method: 'post',
propertyName: 'token',
},
logout: { url: '/user/logout', method: 'post' },
user: { url: '/user/me', method: 'get', propertyName: 'token' },
refresh: {
url: '/user/refreshToken',
method: 'post',
// propertyName: 'refreshToken',
},
},
},

Related

nuxtjs/auth refresh token in cookies

I am using nuxtjs/auth for login and logout of mu users. When I login, I receive this from the backend:
return JSONResponse({
'result': True,
'token_type': 'bearer',
'access_token': *****})
:cookie(key="refresh_token", httponly=True)
So the refresh token is in cookies already. How can I use it within the nuxtjs/auth?
My nuxt.config.js looks like:
auth: {
strategies: {
local: {
token: {
property: 'access_token',
global: true,
maxAge: 1800,
type: 'Bearer'
},
user: {
property: 'userID',
autoFetch: true
},
endpoints: {
login: { url: '/api/v1/auth/login', method: 'post', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } },
logout: false,
user: { url: '/api/v1/auth/get_cur_user', method: 'get' }
}
}
}
}

Nuxt-auth doesn't see any cookies

Nuxt-auth doesn't see any cookies. Doesn't 'connect.sid' cookie.
nuxt.config.js auth settings:
auth: {
strategies: {
cookie: {
cookie: {
prefix: '',
name: 'test',
},
options: {
expires: new Date(new Date().getTime() + 20000000000).getTime(),
maxAge: 31622400,
},
user: {
property: 'data',
autoFetch: false,
},
endpoints: {
login: { url: '/auth/login', method: 'post', withCredentials: true },
logout: { url: '/auth/logout', method: 'delete' },
},
},
},
},
However browser has the cookies (not 'httpOnly'):
'auth._token.cookie': true
'connect.sid': '213lkj123123fsdsf'
'auth.strategy': 'cookie'
'auth._token_expiration.cookie': false
'i18n_redirected': 'en'

Nuxt Auth Refresh token - failed authentication

I use #nuxtjs/auth-next and I must have a configuration problem but I tried multiple configurations without success.
I used this example for the server part https://github.com/cornflourblue/node-mongo-signup-verification-api.
Here is my current configuration:
auth: {
redirect: {
login: '/login',
logout: '/',
callback: '/login',
home: '/'
},
strategies: {
local: {
scheme: 'refresh',
token: {
property: 'jwtToken',
maxAge: 1800,
global: true,
// type: 'Bearer'
},
refreshToken: {
property: 'refreshToken',
data: 'refreshToken',
maxAge: 60 * 60 * 24 * 30
},
user: {
property: false,
autoFetch: false
},
endpoints: {
login: { url: '/accounts/authenticate', method: 'post', propertyName: 'data.jwtToken' },
refresh: { url: '/accounts/refresh-token', method: 'post' },
user: false,
//user: { url: '/accounts/refresh-token', method: 'post', propertyName: null },
logout: { url: '/accounts/revoke-token', method: 'post' }
},
// autoLogout: false
}
}
}
Cookies and the answer are correct I think.
What's wrong?
It's "working" with this configuration :
auth: {
redirect: {
login: '/login',
logout: '/',
callback: '/login',
home: '/'
},
strategies: {
local: {
scheme: 'refresh',
token: {
property: 'jwtToken',
maxAge: 1800,
global: true,
//type: ''
},
refreshToken: {
property: 'jwtToken',
data: 'refreshToken',
maxAge: 60 * 60 * 24 * 30
},
user: {
property: false,
autoFetch: false
},
endpoints: {
login: { url: '/accounts/authenticate', method: 'post', propertyName: 'jwtToken' },
refresh: { url: '/accounts/refresh-token', method: 'post' },
user: false,
//user: { url: '/accounts/refresh-token', method: 'post', propertyName: null },
logout: { url: '/accounts/revoke-token', method: 'post' }
},
// autoLogout: false
}
}
}
But in reality the refresh token is sent by the server in an HTTP Only cookie so it is not functional.
Is this case covered by #nuxtjs/auth-next or is it mandatory to have the refresh token in the API response?

Customize Bearer keyword with nuxt

I'm trying to connect a Nuxt PWA with Django REST framework with Bearer auth.
I need to change the keyword "Bearer" for "token" on Nuxt.
Nuxt Auth v4 gives me:
Authorization: Bearer ba0bd40f588e...
I need
Authorization: token ba0bd40f588e...
My nuxt config:
auth: {
strategies: {
local: {
endpoints: {
login: { url: 'api-token-auth/', method: 'post', propertyName: 'token' },
user: { url: 'user', method: 'get', propertyName: false },
logout: false,
},
},
},
resetOnError: true,
scopeKey: 'groups',
},
I already tried:
token: {
property: 'token',
type: 'token',
name: 'token'
},
I remember this was possible, please help

Nuxt Auth - User Data not set

I try to do a login via nuxt-auth module. As a response I get the token and then the user data is delivered. However, this.$Auth.loggedIn is false and this.$Auth.user is undefined. I have been fighting for 3 days and can not get any further. Hope somebody can help me.
login
await this.$auth.login({
data: {
email: this.email,
password: this.password
}
}).then(() => {
this.$router.push('/dashboard')
}).catch(err => {
this.snackbar.show = true;
})
nuxt.config.js
auth: {
strategies: {
local: {
endpoints: {
login: {
url: '/auth/login',
method: 'post',
propertyName: 'access_token'
},
logout: {
url: '/auth/logout',
method: 'post'
},
user: {
url: '/auth/me',
method: 'post'
},
tokenRequired: true
}
}
}
}
response login
{
"access_token": "xxxxxxxxxxxxx.eyJpc3MiOiJodHRwczpcL1wvYXBpLmFwcHJlexxxxxxxcxXRoXC9sb2dpbiIsImlhdCI6MTUzODI5NTczMywiZXhwIjoxNTM4Mjk5MzMzLCJuYmYiOjE1MzgyOTU3MzMsImp0aSI6ImdtWWVyZTViQjk1cU5BRG8iLCJzdWIiOjIsInBydiI6IjYwODM2NzQ0MzQ4ZDQzMTk4NzE4N2ZjMWM2YzIzMjYxMDcyMWE5ZjAifQ.JhOiwIg7StzZR71aqYyI9rJpPXVclmddzPSIwqCIUN4",
"token_type": "bearer",
"expires_in": 3600
}
response user
{
"id": 2,
"name": "Dominik Dummy",
"email": "dummy#andreas-pabst.de",
"created_at": {
"date": "2018-09-28 09:11:31.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"updated_at": {
"date": "2018-09-28 09:11:31.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"self": "https:\/\/api.apprex.de\/api\/users\/2"
}
Ok after a long try, I finally solved it. The problem was that auth.fetchUser() requires a property user in the user response, which is not present in my user response. I set the propertyName to false in the nuxt.config.js and now it works
*nuxt.config.js
auth: {
strategies: {
local: {
endpoints: {
login: {
url: '/auth/login',
method: 'post',
propertyName: 'access_token'
},
logout: {
url: '/auth/logout',
method: 'post'
},
user: {
url: '/auth/me',
method: 'post',
propertyName: false // <--- Default "user"
}
}
}
}
}
Currently I am not sure if this is a fault in the module
Update for auth-next": "^5.0.0"
You will have to set property: false instead of propertyName.
So your nuxt.config.js might be as follows:
auth: {
strategies: {
local: {
token: {
property: 'access_token',
required: true,
type: 'Bearer'
},
user: {
property: false, // <--- Default "user"
autoFetch: true
},
endpoints: {
login: { url: 'api/login', method: 'post' },
logout: { url: 'api/auth/logout', method: 'post' },
user: { url: 'api/user', method: 'get' }
}
}
}
},
You should call the this.$auth.fetchUser() for fills user data and loggedIn in the auth store Docs