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' }
}
}
}
}
Related
I currently have the following nuxt.auth configuration.
auth: {
strategies: {
cookie: {
endpoints: {
login: { url: '/api/login', method: 'post' },
},
},
},
},
When login is ok, the response is in json format with the following data
{'user': 'Tlaloc-Es'}
On the login page I have the following code:
this.$auth
.loginWith('cookie', {
data: {
email: this.user_email,
password: this.user_password,
remember: this.remember,
},
})
.then((data) => {
const response = data.data.data;
this.$auth.setUser(response.user);
console.log(response.user);
console.log(this.$auth.loggedIn);
});
The problem is this.$auth.loggedIn always returns false.
I guess that auth doesn't set the user as logged, but I don't know any other steps I need part of:
this.$auth.setUser(response.user);
After a call, logging in browser stores the following cookies:
auth._token.cookie -> true
session -> session token
auth.strategy -> 'cookie'
auth._token_expiration.cookie -> false
How can I set the user as logged?
EDIT
If I execute the logout this value
auth._token.cookie
turn to false, but the session still is stored and anyway
this.$auth.loggedIn
return false.
EDIT
Another try:
auth: {
redirect: {
login: '/login',
logout: '/login',
home: '/',
},
strategies: {
cookie: {
cookie: {
name: 'session',
},
user: {
property: false,
autoFetch: false,
},
endpoints: {
login: { url: '/api/login', method: 'post' },
logout: { url: '/api/logout', method: 'post' },
},
},
},
},
async signIn() {
const succesfulLogin = await this.$auth.loginWith('cookie', {
data: {
email: this.user_email,
password: this.user_password,
remember: this.remember,
},
});
if (succesfulLogin) {
const response = succesfulLogin.data.data;
await this.$auth.setUser({ user: response.user });
console.log(this.$auth.loggedIn);
//await this.$auth.logout();
}
},
This is after login:
reponse cookie
Thanks.
you should try setting set this.$auth.loggedIn = true to true after receiving the data
this.$auth
.loginWith('cookie', {
data: {
email: this.user_email,
password: this.user_password,
remember: this.remember,
},
})
.then((data) => {
const response = data.data.data;
this.$auth.setUser(response.user);
this.$auth.loggedIn = true
console.log(response.user);
console.log(this.$auth.loggedIn);
});
Finally works with the following configuration:
auth: {
redirect: {
login: '/login',
logout: '/login',
home: '/',
},
strategies: {
cookie: {
options: {
httpOnly: true,
path: '/',
},
user: {
property: false,
autoFetch: false,
},
endpoints: {
login: { url: '/api/login', method: 'post' },
logout: { url: '/api/logout', method: 'post' },
},
},
},
},
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'
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?
I'm using Nuxt auth, but I don't have an endpoint for the user, in nuxt.config is set the endpoint to be false and after loginWith I'm jest setting the user manually.
The issue is that after refresh I'm logged in but I don't have any user info (name, email...) what I'm I missing here?
nuxt.config file:
auth: {
strategies: {
local: {
endpoints: {
login: {
url: '/api/users/login/',
method: 'post',
propertyName: 'token',
},
logout: { url: '/api/users/logout/', method: 'post' },
user: { url: '/api/users/auth/', method: 'post' },
// user: false,
},
autoFetchUser: false,
tokenName: 'Authorization',
tokenType: 'Token',
// tokenRequired: true,
// globalToken: true,
},
},
},
login form file
const { data } = await this.$auth.loginWith('local', {
data: { username: this.email, password: this.password },
});
this.$auth.setUser(data);
When you logged in, user info will return from login data, when you refresh there is no endpoint for user, then auth plugin cant retrieve your user info, so you must do it manually and setUser yourself
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