I am trying to connect to a couple social services through a Nuxt app and was starting by trying Spotify oauth2. I have the config below and it seems that the login works but user data is not returned.
modules: ['#nuxtjs/axios', '#nuxtjs/auth-next'],
auth: {
strategies: {
social: {
scheme: 'oauth2',
endpoints: {
authorization: 'https://accounts.spotify.com/authorize',
token: undefined,
logout: 'http://localhost:3000/logout',
userInfo: 'https://api.spotify.com/v1/me',
},
token: {
property: 'access_token',
type: 'Bearer',
maxAge: 1800,
},
refreshToken: {
property: 'refresh_token',
maxAge: 60 * 60 * 24 * 30,
},
responseType: 'code',
grantType: 'authorization_code',
accessType: undefined,
redirectUri: 'http://localhost:3000/dashboard/',
logoutRedirectUri: '/',
clientId: 'abc123',
scope: ['user-read-private', 'user-read-email'],
state: '',
codeChallengeMethod: '',
responseMode: '',
acrValues: '',
// autoLogout: false
},
},
My method in Login
methods: {
login() {
this.$auth.loginWith('social')
},
},
Any help on how to get the user data would be appreciated!
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' },
},
},
},
},
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. 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?
When I log out in Chrome and Firefox browser it works fine. But when I logged out on safari, it didn't go well. When I click logout, it goes to the login page then returns to the home page. After I click logout one more time. It made it to the login page. So I have to click logout twice on safari browser
My code like this :
async logout () {
await this.$auth.logout()
this.SET_IS_AUTH(false)
// this.$router.push('/')
window.location.href = '/'
}
My auth in nuxt.config.js like this :
auth: {
redirect: {
login: '/',
home: '/home',
logout: '/'
},
strategies: {
local: {
scheme: 'refresh',
token: {
property: 'response.token',
// maxAge: 3600,
// type: 'Bearer'
},
refreshToken: {
property: 'response.token',
// data: 'refresh_token',
// maxAge: 60 * 60
},
endpoints: {
login: {
url: '/auth/token',
method: 'post',
propertyName: 'response.token'
},
user: false,
logout: false
},
tokenRequired: true,
tokenType: 'Bearer '
}
},
token: {
name: 'token'
},
cookie: {
name: 'token'
}
},
How can I solve this problem?