Develop Reference

cypress.origin throws error: (uncaught exception)Error: on only accepts instances of Function

I am using Cypress with Cucumber.
I am trying to test cross origin login but the origin method keeps on throwing error:
Code:
Given(/^the user login to the Test Page$/, function () {
cy.visit("https://example-originalURL");
cy.get("button").contains("Login").click();
const credentials = {
username: "hello",
password: "user",
};
cy.origin("https://example-newURL", { args: credentials }, ({ username, password }) => {
cy.get("#email", { timeout: 20000 }).type(username);
cy.get("#password").type(password, { log: false });
cy.get("button").contains("Login").click();
});
});
Cypress.config.js
module.exports = defineConfig({
projectId: "t7unhv",
e2e: {
setupNodeEvents(on, config) {
on("file:preprocessor", cucumber());
on('task', {
log(message) {
console.log(message +'\n\n');
return null;
},
});
},
specPattern: "./cypress/e2e/features/*.feature",
chromeWebSecurity: false,
experimentalSessionAndOrigin: true,
defaultCommandTimeout: 15000,
env: {
devCentralUrl: "https://***.dev.***.com.au/login",
testCentralUrl:
"https://***.test.***.com.au/login",
test***: "http://***.test.***.com.au",
dev***: "http://***.dev.***.com.au",
uat***: "https://***.uat.***.com.au",
dataSource: "",
environs: "test",
},
retries: {
runMode: 0,
},
pageLoadTimeout: 15000,
reporter: "mochawesome",
reporterOptions: {
reporterEnabled: "mochawesome",
mochawesomeReporterOptions: {
reportDir: "cypress/reports/mocha",
quite: true,
charts: true,
overwrite: false,
html: false,
json: true,
},
},
},
});
Error:
The following error originated from your test code, not from Cypress.
> on only accepts instances of Function
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
I have tried multiple syntax changes like not passing the credentials as optional argument to cy.origin.
If someone can provide a quick help, that will be great.

If the problem is in the test code, it is likely to be that newURL is undefined. The error message suggests the problem is in the app, but that might be a red herring.
Try just adding a fixed string for the cy.origin() key,
cy.origin('login', { args: credentials }, ({ username, password }) => {
...
})

Nuxt.js auth module does not redirect logged in user

Authenticated user can still access the /login page. If I follow a link to /login page, I am redirected to a different page, which works fine. But if I enter /login into URL manually, I am still being taken to /login page, even though I am already logged in. What I am trying to achieve is, when the user is logged in, they should be redirected to /retailer/account page before any components are shown on the page (if they enter /login page manually).
I was trying using beforeMount() function, beforeCreate() function, following the documentation for auth: 'guest' middleware, however it does not seem to have any effect and loggedIn always returns false before the page is fully rendered.
My setup:
nuxt.config.js :
export default {
mode: 'universal',
target: 'static',
auth: {
cookie: {
prefix: 'auth_'
},
// Options
redirect: {
login: '/login',
logout: '/login',
callback: false,
home: '/retailer/account'
},
strategies: {
local: {
endpoints: {
login: {
url: '/auth/login',
method: 'post',
propertyName: 'access_token',
credentials: true
},
logout: {
url: '/auth/logout',
method: 'post'
},
user: {
url: '/auth/me',
method: 'post',
propertyName: '',
credentials: false
}
},
token: {
required: true,
type: 'Bearer',
global: true
},
autoFetchUser: true
}
},
preserveState: true,
watchLoggedIn: true
},
router: {
middleware: [
'auth'
]
}
}
layouts/default.vue :
export default {
auth: false
}
pages/retailer/account.vue :
export default {
middleware: 'auth'
}
pages/login.vue :
export default {
middleware: 'authenticated',
auth: 'guest'
}
Tried all kinds of middleware examples I could find and made some simple redirection code, but, as mentioned before, app.$auth.loggedIn always returns false from server-side, so I never get redirected.
middleware/authenticated.js
export default function ({ app, redirect }) {
if (app.$auth.loggedIn) {
return redirect(app.localePath({ name: 'index' }))
}
}
Later, when Vue hydrates the app, loggedIn is, of course, true.
Any ideas what I am doing wrong? Any guidance would be a huge help!

Nuxt auth module has a middleware auth can redirect unauthenticated user to login page, and redirect authenticated to home.
I see than the auth middleware is configured correctly in you nuxt.config.js.
The problem is that auth middleware only works on server side for SSR. but you configured to generate static website.
You can remove line target: 'static', from nuxt.config.js.
Or fllow this issue to find some help for static site auth:
https://github.com/nuxt/nuxt.js/issues/3023

ScopeKey doesn't work in nuxt.js auth module

Recently i started to learn how to use Nuxtjs and while learning how to use its Auth module i came across a problem.
I'm able to log in and I want to check the scope of the accounts, i tried doing it using the "scopeKey" property of "Auth". From the back end i get the "scope" from the databse and it can either be "user" or "admin".
I have tried to set the scope with
scopeKey: 'scope'
But I get that scope is "undefined"/"null" when checking with
this.$auth.hasScope('admin') / this.$auth.hasScope('user')
or "this.$auth.hasScope(admin)" return an empty value when setting "scopeKey" to
scopeKey: 'data.scope'
or
scopeKey: 'user.scope'
Here is my auth strategy:
auth: {
strategies: {
local: {
scopeKey: 'scope',
endpoints: {
login: {
url: 'api/auth/login',
method: 'post',
propertyName: 'token',
},
logout: {
url: 'api/auth/logout',
method: 'get'
},
user: {
url: 'api/me',
method: 'get',
propertyName: data
}
}
}
},
redirect: {
login: '/auth/login',
logout: '/',
callback: '/auth/login',
home: '/dash/'
}
}
and here it is an example of the json that the auth module reads when i log in:
"data": {
"id": 2,
"name": "test1",
"email": "test#test.com",
"email_verified_at": null,
"scope": "admin",
"created_at": "2019-08-01 13:11:49",
"updated_at": "2019-08-01 13:11:49"
},
I can access the scope value on the front end page with
$auth.user.scope
or with
$auth.$state.user.scope
But how can I give the "scope" to the "scopeKey" property in the nuxt.config.js file while setting the "auth" properties/strategy?
edit:
I have tried moving it inside the auth object or deleting the property and I still get false on $auth.hasScope('admin') and $auth.hasScope('user') which means scopeKey is still undefined and i'm not sure why.

The scopeKey is 'scope' by default. You don't need to set it again.
For me it worked by doing server side change.
When I put string value in scope, it does not work
$data['scope'] = "admin";
But when I changed it to array, $auth.hasScope('admin') works;
$data['scope'] = array("admin", "test");
Hope it helps.

scopeKey: 'scope' should not be placed inside strategies object.
Put it directly in the auth object.
Take a look at default config.
P.S. You can even delete this property from your auth config object, because 'scope' is default value for scopeKey.

Somehow hasScope() is not working for me too, so I directly checked the user object, I also has token in my response.
I am having a type variable in my response that tells me if the user is admin or someone else.
add this into your middleware
export default function ({ $auth, redirect }) {
if (!$auth.loggedIn) {
return redirect('/')
}
if ($auth.user.type != 'Super Admin') { // Super Admin or whatever the user you want to check
return redirect('/')
}
}

Trello API authentication not giving a valid user token if I disconnect

I integrated trello API to my dashboard on symfony 3.4.
When I go to my page for the first time, I have the authorize() function as a popup. When I accept, I have my token and my boards as return. For this case, all is good.
But if I disconnect the current user and come with another, this new user can access to the previous boards. It's like if the token stay the first user how come on the navigator.
Authorize()
Trello.authorize({
name : 'Native Web',
type : 'popup',
expiration: "never",
success: function () { onAuthorizeSuccessful(); },
error: function () { onFailedAuthorization(); },
scope: { write: true, read: true },
});
onAuthorizeSuccessful()
function onAuthorizeSuccessful() {
var token = Trello.token();
Trello.get('/members/me/boards/', successBoards, error);
}
The successBoards function processes the data.
So, do you have an idea? What am I doing wrong?

It's done, i have save the token on cookie. And i call Trello.authorize if the cookie doesn't exist.
I have added persist: false on this function. Like that the token is not save by the trello logic, but by my logic.
If someone is in my case :
Authorize()
Trello.authorize({
name: 'Native Web',
type: 'popup',
persist: false,
expiration: "never",
success: function () {
onAuthorizeSuccessful();
},
error: function () {
onFailedAuthorization();
},
scope: {write: true, read: true},
});
onAuthorizeSuccessful()
function onAuthorizeSuccessful() {
var token = Trello.token();
$.cookie($.cookie('currentLog')+'TokenTrello', token, {expires: 365, secure: false});
loadBoards();
}
loadBoards()
function loadBoards() {
//Get the users boards
$.get('https://api.trello.com/1/members/me/boards?key=' + API_KEY + '&token=' + $.cookie($.cookie('currentLog')+'TokenTrello'), successBoards);
}
Solved for me. Thanks

Changing credentials to a proxy server on the fly

I'm developing an extension for chrome. The extension allows to pick any proxy server from a list, each proxy is required authorization. There is an issue when a user would like to connect to the same proxy server twice but with different credentials for example if a user was successfully logged in the first time the chrome remembers it and when the user would try to connect with other credentials the chrome would use credentials that were inputted in the first login.
var authCredentials = {
username: 'Jack',
password: 'PassForJack'
}
var auth = function () {
return {
authCredentials
};
};
chrome.webRequest.onAuthRequired.addListener(auth, {
urls: ["<all_urls>"]
}, ["blocking"]);
// set a new proxy server for the first login
chrome.proxy.settings.set({
value: {
mode: 'fixed_servers',
rules: {
singleProxy: {
host: 'some-proxy-server.com',
port: 8000
}
}
},
scope: 'regular'
});
// change credentails
authCredentials = {
username: 'Bob',
password: 'PassForBob'
};
// remove proxy configuration
chrome.proxy.settings.set({
value: {
mode: 'direct'
},
scope: 'regular'
});
// remove onAuthListener
chrome.webRequest.onAuthRequired.removeListener(auth)
chrome.webRequest.onAuthRequired.hasListener(auth) // returns false
chrome.webRequest.onAuthRequired.addListener(auth, {
urls: ["<all_urls>"]
}, ["blocking"]);
// lets re connect
chrome.proxy.settings.set({
value: {
mode: 'fixed_servers',
rules: {
singleProxy: {
host: 'some-proxy-server.com',
port: 8000
}
}
},
scope: 'regular'
});
// that doesn't help the user would be logged as "Jack" but has to be as "Bob"

There are multiple possibilities here since the question is not very clear. I would suggest to walk through documentation for the chrome.webRequest first. But My question would be why don't you use interceptor method to check for server-credential pair ? There's a good article about adding interceptor in the background.js script of your extension which suggests to use the beforeRequest hook.