NuxtJS Auth Runtime Configuration for Docker - javascript

I run my nuxt app inside a docker container, with the aim of building once, running many. When I run a container, I want to pass in NUXT_ENV_COMMUNITY_ID which would be different per container.
However, with the following setup, when I run my container, I get an undefined error:
nuxt.config.js
auth: {
redirect: {
home: '/home'
},
strategies: {
local: {
endpoints: {
login: {url: "/login", method: "post"},
logout: {url: "/logout", method: "post"},
// user: {url: "/user/" + process.env.NUXT_ENV_COMMUNITY_ID, method: "GET"}
},
token: {
property: 'token',
global: true,
maxAge: 14400,
},
redirectUri: undefined,
}
},
plugins: [{ src: '~/plugins/auth', ssr: true }],
},
env: {
COMMUNITY_ID: process.env.NUXT_ENV_COMMUNITY_ID
},
publicRuntimeConfig: {
communityId: process.env.NUXT_ENV_COMMUNITY_ID
},
privateRuntimeConfig: {
communityId: process.env.NUXT_ENV_COMMUNITY_ID
},
The commented out line produces /user/undefined
Auth plugin
export default function({ $auth, $config }) {
$auth.strategies.local.options.endpoints.user = {url: "/user/" + $config.communityId, method: "GET"}
}
When I run a console.log for this.$auth.strategies.local.options.endpoints in nuxtServerInit, it prints out:
login: {
url: '/login',
method: 'post'
},
logout: {
url: '/logout',
method: 'post'
},
user: {
url: '/user/177',
method: 'GET'
}
Which is what I expect, however Nuxt tries to call api/auth/user which doesn't exist. Any advice is greatly appreciated!
Thanks!

Related

Nuxt-auth V5 how to get a user by id

My 'Login' endpoint works fine, and I set the 'propertyName' to 'access_token' as that is where the value for my token lives. I see 'Vuex' update my 'LoggedIn' status to true and I can also see the Token Response in the 'Network' tab of Chrome.
However, I'm really struggling to understand how the 'User' endpoint works.
The example is given:
auth: {
strategies: {
login: {
scheme: 'local',
token: {
property: 'access_token',
required: true,
type: 'Bearer',
},
refreshToken: {
property: 'refresh_token',
data: 'refresh_token',
maxAge: 60 * 60 * 24 * 30
},
user: {
property: false,
autoFetch: true,
},
autoLogout: true,
endpoints: {
login: { url: '/registration/login', method: 'post', propertyName: 'access_token'},
user: {
url: '/registration/requests/1',
method: 'get',
propertyName: false
},
logout: {
url: '/registration/logout', method: 'post'
},
},
},
},
redirect: {
login: '/news',
},
},
The above is pretty much identical to mine, how does the 'User' endpoint, know which user is logged in?
I am using a third-party system for my authentication as I'm integrating an application into the third-party system. Their 'User' endpoint for REST requires an 'ID' or 'UserName' to return details about a particular user.
My 'Login' response contains 'UserName' which I could use to call the subsequent User endpoint (If I knew how).
Does anyone know how the User endpoint works? Essentially I need to call it something like this:
user: { url: '/users/${userId}', method: 'get', }

Nuxt auth module fails to login

What I'm doing is a mobile application using Nuxt and Capacitor.
Since the Nuxt Auth module doesn't support in app dialogs for oAuth authentications, what I'm trying to do is to mix the capacitor-google-auth with the Auth module.
I perform correctly the oAuth login with Google and I can get the credentials.
Then I force the Auth Module to set its strategy to Google in this way (following their documentation)
// method 1
this.$auth.$storage.setUniversal('strategy', 'google')
this.$auth.strategy.token.set(token)
const user = await this.$auth.fetchUser()
await this.$auth.setUser(user)
// method 2
this.$auth.$storage.setUniversal('strategy', 'google')
await this.$auth.setUserToken(token)
I can correctly see the calls to my API in both ways, the user get fetched correctly the first time.
Unfortunately the token in both the cookie and local storage is not set, or better, it is set for a millisecond, then it get cleared...
Once completed the process the try catch get an error and it is undefined.
Do you know how can I let it work? Do you need more information?
Thanks
EDIT: Adding auth configuration:
auth: {
resetOnError: true,
localStorage: false,
cookie: {
prefix,
options: {
maxAge,
secure: true,
domain,
},
},
redirect: {
login: '/',
logout: '/',
home: '/home',
},
strategies: {
local: {
endpoints: {
login: {
url: '/auth/local',
method: 'POST',
propertyName: 'token',
},
logout: { url: '/auth/logout', method: 'POST' },
user: { url: '/me', method: 'GET', propertyName: false },
},
tokenRequired: true,
tokenType: 'Bearer',
},
},
},
I realize that you authorize your user with google OAuth2 and receive a token from Google, and you want to store that. I had the same issue; after registering a user, I wanted to keep the user logged in. So in my case, I receive the token from register API and then use nuxt-auth to set the tokens.
Here is my code after the user registers:
try {
this.$bvToast.hide('register-error-toast')
let response = await this.$axios.post('/api/auth/register/', this.user_data)
// these two methods are what you can try
this.$auth.setUser(response.data.user)
this.$auth.setUserToken(response.data.token)
} catch (error) {
}
And this is my auth config in the nuxt.config.js file:
auth: {
redirect: {
login: '/auth/login',
logout: '/',
home: '/'
},
cookie: {
options: {
maxAge: 12 * 24 * 60 * 60
}
},
strategies: {
local: {
autoFetchUser: false,
token: {
property: 'token',
type: 'Bearer'
},
user: {
property: 'user',
autoFetch: false
},
endpoints: {
login: {
url: process.env.BASE_URL + '/api/auth/login/',
method: 'post'
},
user: false,
}
}
}
}
I shared my whole config with you, and it may have some excessive data; you can change the config base on your requirements.

Nuxt Application redirect to auth page and return to dashboard by refresh page

i used Nuxt.js
and i used auth Nuxt.js .
after login to dashboard page by refresh goto auth and return to dashboard page.
by routing all is ok but by refresh not correct!
auth: {
cookie: {
prefix: 'auth.',
options: {
maxAge: '3600'
}
},
redirect: {
login: '/auth/login',
logout: '/auth/login',
callback: false,
home: false
},
strategies: {
local: {
login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
logout: { url: '/api/auth/logout', method: 'post' },
user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
},
// token_type: '',
}
},
and in post/_slug.vue
by refresh return 404 error !
mode: universal
ssr : true

Nuxt-auth ..login network header gives me strange path seems like my locale route for login page

Iam trying to use nuxt-auth module with axios and it gives me "Cannot read property 'data' of undefined" ...and login headers gives strange path
"Request URL: http://aqar.abdullah.link/api/api/auth/login",any help please???
Nuxt.config.js
axios: {
baseURL:'http://aqar.abdullah.link/api',
auth: {
strategies: {
local: {
endpoints: {
login: { url: '/office/login', method: 'post', propertyName: 'data.token' },
user: { url: '/auth/me', method: 'post', propertyName: false },
logout: false
}
}
}
}
}
Login Method:
methods:{
async Login(){
try{
await this.$auth.loginWith('local', {
data:{
email: this.email,
password: this.password
}
})
this.$router.push('/')
}catch(e){
this.error = e.response.data
}
},
},
Api response on postman:
login page path in folders
I'm not sure, I used the exact same configurations and it worked for me.
But your nuxt.config.js file has a missing closing }, for the axios object.
it should look like this:
axios: {
baseURL: "http://aqar.abdullah.link/api"
},
auth: {
strategies: {
local: {
endpoints: {
login: {
url: "/office/login",
method: "post",
propertyName: "data.token"
},
user: { url: "/auth/me", method: "post", propertyName: false },
logout: false
}
}
}
},
also make sure you have these modules in you nuxt.config.js as well:
modules: [
"#nuxt/http",
"#nuxtjs/auth",
"#nuxtjs/axios",
],

Loopback mock session

I'm using loopback with express session to store cartId.
But I need to inject cartId on request session in order to make my tests work.
So on my remote method I have
Cart.get = function (req, cb) {
Service.getCart(req, req.session.cartId)
.then(function (result) {
cb(null, result);
})
.catch(cb);
};
Cart.remoteMethod(
'get',
{
accepts: { arg: 'req', type: 'object', 'http': { source: 'req' } },
returns: { arg: 'cart', type: 'object', root: true },
http: { path: '/', verb: 'get' }
}
);
How can I force req.session.cartId for my tests?
Thanks
If I understand your case correctly, you can do something similar to the code below, you would just add another param (cardId) to your get method definition:
Cart.remoteMethod('get',{
accepts: [
{ arg: "caseId", type: "number", http: {source:'path'} },
{ arg: 'req', type: 'object', http: { source: 'req' } }
],
returns: { arg: 'cart', type: 'object', root: true },
http: { path: '/:caseId/getCart', verb: 'get' }
});
You can simply use "get" remote method and pass cartId through URL or if you have concern about cartId visibility on URL then you can use post method as following code.
Use following cart.js file and explore in loopback api.
module.exports = function (Cart) {
Cart.getCart = function (cartId, cb) {
Cart.findOne({
where: { cartId : cartId }
}, function (err, cart) {
cb(null, users);
});
};
Cart.remoteMethod('getCart', {
accepts: {
arg: "id",
type: "string",
required: true
},
returns: {
arg: 'cart',
type: 'object'
},
http: {
path: '/:cartId/getcart',
verb: 'get'
}
});
};
get call : http://HOST:IP/cart/YourID/getcart
You will retrieve cart by Id.
Hope this will work.

Categories

Resources