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
Related
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' }
}
}
}
}
js app with Nuxt Auth and when I want to log in. User is not set and loggedIn is false
const response = await this.$auth.loginWith('local', { data: {
email: this.form.email.value,
password: this.form.password.value,
} });
this.$auth.setUser(response.data.user);
this.$auth.strategy.token.set(response.data.jwt.access_token)
this.$auth.strategy.refreshToken.set(response.data.jwt.refresh_token)
so I wrote this and after that user is set but loggedIn is still false. Here my nuxt.config.js.
auth: {
strategies: {
local: {
scheme: 'refresh',
token: {
property: 'access_token',
maxAge: 1800,
required: true,
type: 'Bearer',
},
refreshToken: {
property: 'refresh_token',
data: 'refresh_token',
maxAge: 60 * 60 * 24 * 30,
},
user: {
property: 'user',
autoFetch: true,
},
endpoints: {
login: { url: '/login', method: 'post' },
refresh: { url: '/refresh', method: 'post', propertyName: false },
logout: { url: '/logout', method: 'post' },
user: { url: '/refresh', method: 'post', propertyName: false },
},
},
},
},
Can you help me with it please?
I found solution to my answer. I wrote my own scheme
import { RefreshScheme } from '~auth/runtime'
export default class CustomScheme extends RefreshScheme {
// Override `fetchUser` method of `local` scheme
async fetchUser (endpoint) {
this.options.endpoints.user = {
...this.options.endpoints.user,
data: {
token: this.$auth.strategy.refreshToken.get()
}
}
// Token is required but not available
if (!this.check().valid) {
return
}
// User endpoint is disabled.
if (!this.options.endpoints.user) {
this.$auth.setUser({})
return
}
// Try to fetch user and then set
return this.$auth.requestWith(
this.name,
endpoint,
this.options.endpoints.user
).then((response) => {
const user = response.data.user
// Transform the user object
const customUser = {
...user,
fullName: user.name,
roles: ['user']
}
// Set the custom user
// The `customUser` object will be accessible through `this.$auth.user`
// Like `this.$auth.user.fullName` or `this.$auth.user.roles`
this.$auth.setUser(customUser)
return response
}).catch((error) => {
this.$auth.callOnError(error, { method: 'fetchUser' })
})
}
}
Apparently was the problem by getting user from propertyName. I replace code with my own response const user = response.data.user and now it seems working :)
I am attempting to get Nuxt.js to work with cookie authentication. I am using nuxt-auth with cookie setting. Laravel Backend with Passport.
The reason I need to use Cookies is because I plan on having the nuxt project be on my main domain name (with login) and then having app.mydomainname.com for the actual application. The main website has public facing pages that use authentication as well.
Here is my config for nuxt.js for nuxt-auth:
auth: {
local: false,
redirect: {
login: "/login",
logout: "/login",
callback: "/login",
home: false,
},
strategies: {
cookie: {
token: {
property: "data.access_token",
},
user: {
property: "data",
},
endpoints: {
login: {
url: "v1/auth/login",
method: "post",
propertyName: "access_token",
},
logout: { url: "/v1/auth/logout", method: "delete" },
user: { url: "/v1/settings", method: "get" },
},
},
},
},
Login works fine, but then the cookie does not set when I look in my editthiscookie chrome plugin, thus the call to /settings does not work:
As you see the cookie is just being set to true and not the access token.
Any help with the configuration would be helpful.
Thanks
Figured it out. I had to set set required: true and type: "Bearer" in the token config.
So it looks like this now:
auth: {
redirect: {
login: "/login",
logout: "/login",
callback: "/login",
home: false,
},
strategies: {
local: false,
cookie: {
token: {
property: "data.access_token",
required: true,
type: "Bearer",
},
user: {
property: "data",
},
endpoints: {
login: {
url: "v1/auth/login",
method: "post",
},
logout: { url: "/v1/auth/logout", method: "delete" },
user: { url: "/v1/settings", method: "get" },
},
},
},
},
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?
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