Within my chrome extension I need to retrieve the token returned by my Oauth authentication process.
If the authentication is successful, I can't get the return value.
To implement this I have a method declared in my child component Login.vue (loaded from the parent App.vue) and in which a button calls my function via async login()
async login() {
const CLIENT_SECRET = "***********************************";
const redirectURL = browser.identity.getRedirectURL();
const clientID = "*********";
const scopes = "openid";
let loginURL = `${urlAuth}/auth`;
loginURL += `?client_id=${clientID}`;
loginURL += "&response_type=code";
loginURL += "&state = default";
loginURL += `&redirect_uri=${encodeURIComponent(redirectURL)}`;
loginURL += `&scope=${encodeURIComponent(scopes)}`;
let url = {};
url = await browser.identity.launchWebAuthFlow({
interactive: true,
url: loginURL,
});
let hash;
const JsonUrl = {};
const hashes = url.slice(url.indexOf("?") + 1).split("&");
for (let i = 0; i < hashes.length; i + 1) {
hash = hashes[i].split("=");
JsonUrl[hash[0]] = hash[1];
}
const code = JsonUrl.code;
const details = {
redirect_uri: redirectURL,
client_id: "********",
grant_type: "authorization_code",
code,
client_secret: CLIENT_SECRET,
scope: "openid",
};
let detailsBody = [];
Object.keys(details).forEach(((property) => {
const encodedKey = encodeURIComponent(property);
const encodedValue = encodeURIComponent(details[property]);
detailsBody.push(`${encodedKey}=${encodedValue}`);
}));
detailsBody = detailsBody.join("&");
// let user = {};
await fetch(`${urlAuth}/token`, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: detailsBody,
}).then((response) => (response.json()))
.then((data) => {
this.user = data.access_token;
});
this.$emit("access-token", this.user);
},
What I want
Get the result of my fetch request
What I get
The fetch request works. I am directed to the login page and the session appears on the admin interface of my oAuth server.
Since I'm in an extension, I can't send anything to the console. So I try to send the result in a component props which I fetch and display in the App.view parent via this code
<Login
v-if="!isConnected"
#access-token="updateToken($event)"
/>
...
props: {
token: {
type: String,
default: "By default",
required,
},
methods: {
updateStatus(statut) {
this.token = token;
},
}
}
But my props token keeps its default value. Nothing is transmitted and I don't even know if the fetch result is retrieved.
A little help would be appreciated.
Thanks :)
Related
I'm using axios <0.22 version so I can use cancelToken but I dont understand how I can use it
I tried but it doesnt work. Help me please. How cancel requests if they are calling same endpoint?
let req = {}
const authInterceptors = (cfg) => {
const config = cfg;
req = cfg;
config.headers.common['X-XSRF-TOKEN'] = antiForgeryToken;
if (req[config.url]) {
req[config.url].cancel('Automatic cancellation')
}
const axiosSource = axios.CancelToken.source()
req[config.url] = { cancel: axiosSource.cancel }
config.cancelToken = axiosSource.token
return config;
};
const errorInterceptors = (error) => {
return Promise.reject(error);
};
const httpClient = axios.create({
headers: { 'Cache-Control': 'no-cache' },
adapter: throttleAdapterEnhancer(<AxiosAdapter>axios.defaults.adapter, { threshold: 3 * 1000 }),
});
httpClient.interceptors.request.use(authInterceptors, errorInterceptors);
First off, just know CancelToken according to docs:
is deprecated since v0.22.0 and shouldn't be used in new projects
To use CancelToken, there's just 3 steps:
create a CancelToken
assign that token to a request
invoke the method on CancelToken
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
or
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// An executor function receives a cancel function as a parameter
cancel = c;
})
});
// cancel the request
cancel();
Docs: https://axios-http.com/docs/cancellation
I use Jest + SuperTest to test API. I would like to get the token and store it globally (using agent() method. It works fine when I have hardcoded token and use agent() to set it globally like this:
const supertest = require("supertest");
const baseUrl = "https://gorest.co.in/public/v1";
const request = supertest
.agent(baseUrl)
.set(
"Authorization",
">>>here comes hardcoded token value<<<"
);
describe("Posts endpoint", () => {
it.only("should be able to create a post", async () => {
const resp = await request.get("/users");
const user_id = resp.body.data[0].id;
const response = await request.post("/posts").send({
title: "foo",
body: "bar",
user_id: user_id,
});
expect(response.statusCode).toBe(201);
});
});
but I don't know how to get the token from auth endpoint and pass it there instead of this hardcoded one. Here is the function of getting token in beforeAll().
let token = "";
beforeAll(async () => {
const response = await request(baseUrl).post("/auth").send({
username: "test#example.com",
password: "password",
});
token = response.body.access_token;
});
Does anyone have any idea how to handle that with SuperTest?
I think the order of your code is just slightly wrong. Although some functions get hoisted when testing, it might be clearer to write the code the way it should execute.
You have the write idea, as the beforeAll() is executed before a beforeEach or other test. This problem is that you are creating your request in Supertest before you run the beforeAll and get the token.
const supertest = require("supertest");
const baseUrl = "https://gorest.co.in/public/v1";
describe("Posts endpoint", () => {
let token = "";
beforeAll(async () => {
const response = await request(baseUrl).post("/auth").send({
username: "test#example.com",
password: "password",
});
token = response.body.access_token;
});
let request;
beforeEach(async () => {
request = supertest
.agent(baseUrl)
.set('Authorization', token)
;
});
it.only("should be able to create a post", async () => {
const resp = await request.get("/users");
const user_id = resp.body.data[0].id;
const response = await request.post("/posts").send({
title: "foo",
body: "bar",
user_id: user_id,
});
expect(response.statusCode).toBe(201);
});
});
I’m working on a full-stack NestJS application, integrating with Auth0 using the express-openid-connect library. I’m using Cypress for e2e tests, and I’m trying to find a way of testing my login using Cypress.
I found this article - https://auth0.com/blog/end-to-end-testing-with-cypress-and-auth0/, but it seems to be very much tied to a React application. I’m calling the /oauth/token API endpoint, and I get a response, but I’m unsure how to build out my callback URL to log me in to the application. Here’s what I have so far:
Cypress.Commands.add('login', () => {
cy.session('logged in user', () => {
const options = {
method: 'POST',
url: `${Cypress.env('OAUTH_DOMAIN')}/oauth/token`,
body: {
grant_type: 'password',
username: Cypress.env('AUTH_USERNAME'),
password: Cypress.env('AUTH_PASSWORD'),
scope: 'openid profile email',
audience: `${Cypress.env('OAUTH_DOMAIN')}/api/v2/`,
client_id: Cypress.env('OAUTH_CLIENT_ID'),
client_secret: Cypress.env('OAUTH_CLIENT_SECRET'),
},
};
cy.request(options).then((response) => {
// What do I do here?
});
});
});
Any pointers would be gratefully recieved!
I ended up sorting this out by using Puppeteer to handle my login, stopping at the point of redirection to the callback URL and returning the cookies and callback URL to Cypress, as detailed in this article:
https://sandrino.dev/blog/writing-cypress-e2e-tests-with-auth0
Things have changed a bit since then, and with the introduction of Cypress's experimentalSessionSupport it's a bit simpler. I ended up whittling the solution down to having the following in my Cypress setup:
// cypress/plugins/auth0.js
const puppeteer = require('puppeteer');
const preventApplicationRedirect = function (callbackUrl) {
return (request) => {
const url = request.url();
if (request.isNavigationRequest() && url.indexOf(callbackUrl) === 0)
request.respond({ body: url, status: 200 });
else request.continue();
};
};
const writeUsername = async function writeUsername({ page, options } = {}) {
await page.waitForSelector('#username');
await page.type('#username', options.username);
};
const writePassword = async function writeUsername({ page, options } = {}) {
await page.waitForSelector('#password', { visible: true });
await page.type('#password', options.password);
};
const clickLogin = async function ({ page } = {}) {
await page.waitForSelector('button[type="submit"]', {
visible: true,
timeout: 5000,
});
const [response] = await Promise.all([
page.waitForNavigation({ waitUntil: 'networkidle2' }),
page.click('button[type="submit"]'),
]);
return response;
};
exports.Login = async function (options = {}) {
const browser = await puppeteer.launch({
headless: options.headless,
args: options.args || ['--no-sandbox', '--disable-setuid-sandbox'],
});
const page = await browser.newPage();
try {
await page.setViewport({ width: 1280, height: 800 });
await page.setRequestInterception(true);
page.on('request', preventApplicationRedirect(options.callbackUrl));
await page.goto(options.loginUrl);
await writeUsername({ page, options });
await writePassword({ page, options });
const response = await clickLogin({ page, options });
if (response.status() >= 400) {
throw new Error(
`'Login with user ${
options.username
} failed, error ${response.status()}`,
);
}
const url = response.url();
if (url.indexOf(options.callbackUrl) !== 0) {
throw new Error(`User was redirected to unexpected location: ${url}`);
}
const { cookies } = await page._client.send('Network.getAllCookies', {});
return {
callbackUrl: url,
cookies,
};
} finally {
await page.close();
await browser.close();
}
};
// cypress/plugins/index.js
const auth0 = require('./auth0');
module.exports = (on, config) => {
require('dotenv').config({ path: '.env.test' });
config.env.AUTH0_DOMAIN = process.env.AUTH0_DOMAIN;
config.env.AUTH_USERNAME = process.env.AUTH_USERNAME;
config.env.AUTH_PASSWORD = process.env.AUTH_PASSWORD;
on('task', {
LoginPuppeteer(options) {
return auth0.Login(options);
},
});
return config;
};
// cypress/support/commands.js
const { getUnixTime } = require('date-fns');
/*
* Create the cookie expiration.
*/
function getFutureTime(minutesInFuture) {
const time = new Date(new Date().getTime() + minutesInFuture * 60000);
return getUnixTime(time);
}
/**
* Create a cookie object.
* #param {*} cookie
*/
function createCookie(cookie) {
return {
name: cookie.name,
value: cookie.value,
options: {
domain: `${cookie.domain.trimLeft('.')}`,
expiry: getFutureTime(15),
httpOnly: cookie.httpOnly,
path: cookie.path,
sameSite: cookie.sameSite,
secure: cookie.secure,
session: cookie.session,
},
};
}
/**
* Login via puppeteer and return the redirect url and cookies.
*/
function login() {
return cy.task('LoginPuppeteer', {
username: Cypress.env('AUTH_USERNAME'),
password: Cypress.env('AUTH_PASSWORD'),
loginUrl: 'http://localhost:3000/login',
callbackUrl: 'http://localhost:3000/callback',
});
}
/**
* Login with Auth0.
*/
Cypress.Commands.add('loginAuth0', () => {
cy.session('logged in user', () => {
login().then(({ cookies, callbackUrl }) => {
console.log(cookies);
cookies
.map(createCookie)
.forEach((c) => cy.setCookie(c.name, c.value, c.options));
cy.visit(callbackUrl);
});
});
});
You can then use cy.loginAuth0() in your app to login with a real Auth0 instance. Make sure you have "experimentalSessionSupport": true in your cypress.json. That way you'll only have to perform this (admittedly long winded) task only once in your test suite!
I working with localStorage token in my next.js application. I tried to get the localStorage on page getInitialProps but, it returns undefined.
Here is an example,
Dashboard.getInitialProps = async () => {
const token = localStorage.getItem('auth');
const res = await fetch(`${process.env.API_URL}/pages/about`, {
headers: { 'Authorization': token }
});
const data = await res.json();
return { page: data };
}
For the initial page load, getInitialProps will run on the server
only. getInitialProps will then run on the client when navigating to a
different route via the next/link component or by using next/router. Docs
This means you will not be able to access localStorage(client-side-only) all the time and will have to handle it:
Dashboard.getInitialProps = async ({ req }) => {
let token;
if (req) {
// server
return { page: {} };
} else {
// client
const token = localStorage.getItem("auth");
const res = await fetch(`${process.env.API_URL}/pages/about`, {
headers: { Authorization: token },
});
const data = await res.json();
return { page: data };
}
};
If you want to get the user's token for the initial page load, you have to store the token in cookies instead of localStorage which #alejandro also mentioned in the comment.
I'm using a static array to scaffold a user table, prior to refactoring with actual postgres db and some fetch()-ing code. At present, the tests work, but obviously they are working synchronously. Here's the placeholder API code:
// UserAPI.js
let findUserById = (credentials = {}) => {
const { userId } = credentials
if (userId) {
const foundUser = users.find(user => user.id === userId)
if (foundUser !== undefined) {
const { password: storedpassword, ...user } = foundUser
return user
}
}
return null
}
exports.byId = findUserById
And an example test as follows:
// excerpt from TokenAuth.test.js
const UserAPI = require('../lib/UserAPI')
describe('With TokenAuth middleware', () => {
beforeEach(() => {
setStatus(0)
})
it('should add user to req on authorised requests', () => {
const token = createToken(fakeUser)
const authReq = { headers: { authorization: 'Bearer ' + token } }
const myMiddleware = TokenAuth(UserAPI.byId)
myMiddleware(authReq, fakeRes, fakeNext)
// expect(authReq.user).toStrictEqual({ id: 1, username: 'smith#example.com' });
expect(authReq.user.username).toStrictEqual('smith#example.com')
expect(authReq.user.id).toStrictEqual(1)
})
})
This runs fine, and along with other tests gives me the coverage I want. However, I now want to check that the tests will deal with the async/await nature of the fetch() code I'm going to use for the proper UserAPI.js file. So I re-write the placeholder code as:
// UserAPI.js with added async/await pauses ;-)
let findUserById = async (credentials = {}) => {
const { userId } = credentials
// simulate url resolution
await new Promise(resolve => setTimeout(() => resolve(), 100)) // avoid jest open handle error
if (userId) {
const foundUser = users.find(user => user.id === userId)
if (foundUser !== undefined) {
const { password: storedpassword, ...user } = foundUser
return user
}
}
return null
}
exports.byId = findUserById
... at which point I start getting some lovely failures, due I think it's returning unresolved promises.
My problem is two-fold:
How should I alter the UserAPI.test.js tests to deal with the new async nature of findUserByCredentials() ?
Am I ok in my assumption that ExpressJS is happy with async functions as request handlers? Specifically, due to the async nature ofUserAPI.findUserByCredentials is this ok?
Main App.js uses curried UserAPI.byId() for the findUserById.
// App.js (massively simplified)
const express = require('express')
const TokenAuth = require('./middleware/TokenAuth')
const RequireAuth = require('./middleware/RequireAuth')
const UserAPI = require('./lib/UserAPI')
let router = express.Router()
const app = express()
app.use(TokenAuth(UserAPI.byId))
app.use(RequireAuth)
app.use('/users', UserRouter)
module.exports = app
My TokenAuth middleware would now run along these lines:
// TokenAuth.js (simplified)
const jwt = require('jsonwebtoken')
require('dotenv').config()
const signature = process.env.SIGNATURE
let TokenAuth = findUserById => async (req, res, next) => {
let header = req.headers.authorization || ''
let [type, token] = header.split(' ')
if (type === 'Bearer') {
let payload
try {
payload = jwt.verify(token, signature)
} catch (err) {
res.sendStatus(401)
return
}
let user = await findUserById(payload)
if (user) {
req.user = user
} else {
res.sendStatus(401)
return
}
}
next()
}
module.exports = TokenAuth
A partial answer us simply to add an async/await on the middleware call:
it('should add user to req on authorised requests', async () => {
const token = createToken(fakeUser)
const authReq = { headers: { authorization: 'Bearer ' + token } }
const myMiddleware = TokenAuth(UserAPI.byId)
await myMiddleware(authReq, fakeRes, fakeNext)
// expect(authReq.user).toStrictEqual({ id: 1, username: 'smith#example.com' });
expect(authReq.user.username).toStrictEqual('smith#example.com')
expect(authReq.user.id).toStrictEqual(1)
})