I have two websites. On the first the user logs in (creating a local storage value), on the second (the one I am trying to program) the storage value is rechecked for login but is returning false. What do I need to modify?
NB: I know this is a strange situation, but there is a reason for it so it cannot be changed.
In strategies I have...
local: {
token: { required: false, maxAge: 90000 },
user: { autoFetch: false, property: false },
endpoints: {
user: false,
login: false,
logout: false,
},
},
... property being set to false as the storage value is a more complex version of {"firstName":"abc","lastName":"def"}, i.e. not in a user field.
In the main vue file I have...
created() {
var savedData = localStorage.getItem("ngStorage-user");
if (savedData !== null) {
alert(savedData); // Displays the string that I expect.
this.$auth.setUser(JSON.parse(savedData)); // The setUser call.
alert(this.$auth.user.firstName); // Displays 'abc'.
alert(this.$auth.loggedIn); // Displays false
}
}
PS: I have reviewed the similar queries, but none seems to match this.
====
Addendum: I have possibly solved this, and improved it at the same time by checking that the token is valid.
Added a call to tokencheck in the API which checks the token and returns minimal user details.
local: {
token: { required: false, maxAge: 90000, property: "token" },
user: { autoFetch: false, property: false },
endpoints: {
user: { url: `${process.env.API_URL}tokencheck` },
login: false,
logout: false,
},
},
And then in Vue
created() {
var savedData = localStorage.getItem("ngStorage-user");
if (savedData !== null) {
var parsedSaveData = JSON.parse(savedData);
this.$auth.setUserToken(parsedSaveData.token) // Which calls the 'user' endpoint
.then(res => { this.$auth.setUser(res.data); })
.catch(() => { this.error = true; });
}
}
Related
I want to set login, logout callback url.
So, I set the callback url like this.
//signIn
const signInResult = await signIn("credentials", {
message,
signature,
redirect: false,
callbackUrl: `${env.nextauth_url}`,
});
//signOut
signOut({ callbackUrl: `${env.nextauth_url}`, redirect: false });
But, When I log in, I look at the network tab.
api/auth/providers, api/auth/callback/credentials? reply with
callbackUrl(url) localhost:3000
It's api/auth/callback/credentials? reply.
It's api/auth/providers reply
and api/auth/session reply empty object.
When I run on http://localhost:3000, everything was perfect.
But, After deploy, the login is not working properly.
How can I fix the error?
I added [...next-auth] code.
import CredentialsProvider from "next-auth/providers/credentials";
import NextAuth from "next-auth";
import Moralis from "moralis";
import env from "env.json";
export default NextAuth({
providers: [
CredentialsProvider({
name: "MoralisAuth",
credentials: {
message: {
label: "Message",
type: "text",
placeholder: "0x0",
},
signature: {
label: "Signature",
type: "text",
placeholder: "0x0",
},
},
async authorize(credentials: any): Promise<any> {
try {
const { message, signature } = credentials;
await Moralis.start({
apiKey: env.moralis_api_key,
});
const { address, profileId } = (
await Moralis.Auth.verify({ message, signature, network: "evm" })
).raw;
if (address && profileId) {
const user = { address, profileId, signature };
if (user) {
return user;
}
}
} catch (error) {
console.error(error);
return null;
}
},
}),
],
pages: {
signIn: "/",
signOut: "/",
},
session: {
maxAge: 3 * 24 * 60 * 60,
},
callbacks: {
async jwt({ token, user }) {
user && (token.user = user);
return token;
},
async session({ session, token }: any) {
session.user = token.user;
return session;
},
async redirect({ url, baseUrl }) {
// Allows relative callback URLs
if (url.startsWith("/")) return `${baseUrl}${url}`;
// Allows callback URLs on the same origin
else if (new URL(url).origin === baseUrl) return url;
return baseUrl;
},
},
secret: env.nextauth_secret,
});
I am trying to use Nuxt/auth, but run into problem with session saving in localStorage.
Login.vue
methods: {
sendLoginLink() {
this.$auth.loginWith('local', {
data: {
username: "test#gmail.com",
password: "testpassword"
}
}).then((date) => {
console.log("data", date)
}).catch((err) => {
console.error("err", err)
})
}
Nuxt.config.js
auth: {
strategies: {
local: {
endpoints: {
login: { url: '/dashboard', method: 'post', propertyName: 'token' }
},
tokenType: ''
}
}
axios: {
baseURL: 'http://localhost:1234'
},
modules: [
'#nuxtjs/axios',
'#nuxtjs/auth-next',
]
When the user logs in, the function sendLoginLink is called and throw error in console:
Which means that the auth-token is so large that it cannot be stored in localStorage, but all other things related to this function are saved in localStorage. For example:
I googled a lot but didn't find a good solution to the problem. For example, I tried to clear all localStorage memory before running sendLoginLink() function but the result is the same. Different browsers have the same problem
I'm new to Nuxt Auth and express session, when I perform this.$auth.loginWith('local', { data: '' }), I will set req.session.loggedIn = true in the server, and I can see my req.session.id = 'xxx' for example.
After that, the nuxt auth will make another call to /api/auth/user, but I can see the sessionID has been changed, and req.session.loggedIn was undefined.
How can I maintain the same session for every request?
Below is my config
auth: {
strategies: {
local: {
token: {
required: false,
type: false
},
endpoints: {
login: { url: '/api/auth/login', method: 'POST' },
logout: { url: '/api/auth/logout', method: 'POST' },
user: { url: '/api/auth/user', method: 'get' }
}
}
}
},
I'm using v5
"#nuxtjs/auth-next": "5.0.0-1616003482.75c20e6",
I'm looking to pass the request context into a KOA middleware that is generated from a require (https://github.com/Shopify/koa-shopify-auth). I set some API keys that I need to pass into it from a previous middleware but have no access to them when I reach createShopifyAuth.
I've tried passing in the global server.context but it doesn't seem to be set from the previous middleware.
server.use(async (ctx, next) => {
await shopifyKeys;
if (url.parse(ctx.originalUrl, true).query.shop) {
const shops = url.parse(ctx.originalUrl, true).query.shop;
server.context.keys = [shopifyKeys[shops].key, shopifyKeys[shops].secret];
console.log(server.context.keys);
}
return next();
});
server.use(
createShopifyAuth({
apiKey: server.context.keys[0],
secret: server.context.keys[1],
scopes: [
'read_products',
'read_checkouts',
'read_orders',
'write_orders',
],
async afterAuth(ctx) {
const { shop, accessToken } = ctx.session;
ctx.cookies.set('shopOrigin', shop, {
httpOnly: false,
secure: true,
sameSite: 'none',
});
const registration = await registerWebhook({
address: `${HOST}/webhooks/orders/paid`,
topic: 'ORDERS_PAID',
accessToken,
shop,
apiVersion: ApiVersion.July20,
});
if (registration.success) {
console.log('Successfully registered webhook!');
} else {
console.log(
'Failed to register webhook',
registration.result.data.webhookSubscriptionCreate.userErrors,
);
}
ctx.redirect('/');
},
}),
);
Any help with figuring out how to get the context into the second server.use would be appreciated.
I am allegedly a newbie when it comes to KOA, but the only way I manage to make it was passing the data via cookies, individually. Here is an example:
server.use(
createShopifyAuth({
apiKey: SHOPIFY_API_KEY,
secret: SHOPIFY_API_SECRET_KEY,
scopes: [
"read_products",
"write_products",
"read_script_tags",
"write_script_tags",
"read_themes",
"write_themes",
],
accessMode: "offline",
afterAuth(ctx) {
const { shop, accessToken } = ctx.session;
ctx.cookies.set("shopOrigin", shop, {
httpOnly: false,
secure: true,
sameSite: "none",
});
ctx.cookies.set("accessToken", accessToken, {
httpOnly: false,
secure: true,
sameSite: "none",
});
ctx.redirect("/");
},
}),
);
I've created a new User model, based on builtin one. I'm trying this:
module.exports = function(TiUser) {
TiUser.on('dataSourceAttached', function(obj) {
var login = TiUser.login;
TiUser.login = function(credentials, include, cb) {
var result = login.apply(this, credentials);
// Do my stuff
cb(null, my_data);
};
});
};
But I can't get it working... What is wrong? or how could this be done right?
Thanks
You may want to consider adding an afterRemote() hook to login(). Now you can achieve to add role( using Role model ) to user. For example:
TiUser.afterRemote('login', function(ctx, next) {
//add role to the user.
next();
});
At the end I've created a new method instead of overriding a current one:
module.exports = function(TiUser) {
TiUser.auth = function(credentials, include, fn) {
var self = this;
self.login(credentials, include, function(err, token) {
authInfo = {
token: token
};
fn(err, authInfo);
});
};
TiUser.remoteMethod(
'auth',
{
description: 'Login method with Role data information embedded in return',
accepts: [
{arg: 'credentials', type: 'object', required: true, http: {source: 'body'}},
{arg: 'include', type: ['string'], http: {source: 'query' },
description: 'Related objects to include in the response. ' +
'See the description of return value for more details.'}
],
returns: {
arg: 'accessToken', type: 'object', root: true,
description: 'User Model'
},
http: {verb: 'post'}
}
);
};