bpedroza / js-pkce Goto Github PK
View Code? Open in Web Editor NEWA package that makes using the OAuth2 PKCE flow easier
License: MIT License
A package that makes using the OAuth2 PKCE flow easier
License: MIT License
Would be great to add a usage example in repo.
Thanks in advance.
Hi, i am trying to obtain the access token from the ping federated Server, and also i am successfully able to get it(thanks to js-pkce).The only concern is while im trying to decode the access token over JWT.io , i am getting payload data as follows:
{
"scope": "openid profile address email phone",
"client_id": "Reg1ABCD",
"standardATM": "90fSGwCxckjnKH473",
"iss": "https://something.abc.com",
"acr": "MS-AD-Kerberos",
"sub": "someting123",
"msid": "someting123",
"exp": 1645704086
}
I am expecting my email id under "scope" section, any help on it would be appreciated ,Thanks!!.
I'm getting the error in browser (not during compilation)
Uncaught (in promise) Error: Cannot resolve "crypto" from http://localhost:8091/main-903a0f08.js
at a.resolve (s.min.js:3:4413)
at s.min.js:3:1488
at Array.map (<anonymous>)
at s.min.js:3:1431
My package.json
{
"private": true,
"main": "dist/main.js",
"name": "name",
"scripts": {
"test": "npm run build-web && ava",
"test:lazy": "ava",
"serve": "cross-env NODE_ENV=development rollup -c -w",
"build-web": "cross-env NODE_ENV=production PLATFORM=web rollup -c",
"build-cordova": "cross-env NODE_ENV=production PLATFORM=cordova rollup -c",
"node-prod": "ts-node -O '{\"module\": \"commonjs\"}' src/server/"
},
"version": "0.0.1",
"browserslist": "Firefox ESR",
"ava": {
"files": [
"./test/specs/*.ts"
],
"serial": false,
"failFast": true,
"timeout": "2m",
"compileEnhancements": false,
"extensions": [
"ts"
],
"require": [
"ts-node/register"
]
},
"dependencies": {
"body-parser": "^1.19.0",
"compression": "^1.7.4",
"crypto-browserify": "^3.12.0",
"crypto-js": "^3.1.9",
"date-fns": "^2.21.1",
"element-ui": "^2.15.1",
"email-regex": "^4.0.0",
"express": "^4.17.1",
"fela-vue": "2.6.0-beta.44",
"js-pkce": "^1.2.1",
"lafetch": "0.4.5",
"node-fetch": "^2.6.1",
"pepka": "^0.12.2",
"portal-vue": "^2.1.7",
"reset-css": "^5.0.1",
"roboto-fontface": "^0.10.0",
"systemjs": "^6.8.3",
"ts-node": "^9.1.1",
"vue": "^2.6.12",
"vue-page-title": "^1.2.4",
"vue-router": "^3.5.1",
"vuex": "^3.6.2",
"ws": "^7.4.5",
"wspromisify": "^2.4.1"
},
"devDependencies": {
"@babel/core": "^7.13.16",
"@babel/plugin-proposal-object-rest-spread": "^7.13.8",
"@babel/preset-env": "^7.13.15",
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-typescript": "8.2.1",
"@rollup/plugin-url": "^6.0.0",
"@types/express": "^4.17.11",
"@types/node": "^14.14.41",
"@types/node-fetch": "^2.5.10",
"@types/ws": "^7.4.1",
"@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
"@vue/babel-plugin-transform-vue-jsx": "^1.2.1",
"@vue/babel-preset-jsx": "^1.2.4",
"ava": "^3.15.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"babel-preset-env": "^1.7.0",
"cross-env": "^7.0.3",
"fs-extra": "^9.1.0",
"html-minifier": "^4.0.0",
"mustache": "^4.2.0",
"postcss": "^8.2.10",
"regenerator-runtime": "^0.13.7",
"rollup": "^2.45.2",
"rollup-plugin-alias": "^2.2.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-cleaner": "^1.0.0",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-terser": "7.0.2",
"rollup-plugin-vue": "^5.0.0",
"tslib": "^2.2.0",
"typescript": "^4.2.4",
"vue-template-compiler": "^2.6.12"
},
"browser": {
"crypto": false,
"stream": false
}
}
after googling I've found that with previous version of crypto it's supposed to work
https://stackoverflow.com/questions/54162297/module-not-found-error-cant-resolve-crypto
Any ideas how to fix it in my case?
Hi,
It's not really an issue with js-pkce code, more like a question about implementation.
I'm using Laravel with Laravel Passport as my backend. /oauth/token
is secured by CSRF token check, so when I do exchangeForAccessToken
I need to send CSRF token with the request, otherwise it will be rejected. So the question is: how do I get CSRF token after I'm logged in and redirected back from backend's login screen to my frontend app? I think CSRF token is sent back in a cookie, so maybe I could re-use it, but then how do I access it? document.cookie
is empty.
Would be good to be able to send custom query params on the calls to the auth server. Some servers like PingFederate support the concept of authorization adapters, which should be set by the OAuth client.
Currently the fetch POST request for a token sets credentials
to omit
. But this breaks when using PKCE across domains when the remote server has correctly configured Allow-Origins specified.
I have done some testing in the browser, and I can see the fetch fails because the remote server can't read the cookies it has created for that user during the authorization step. If you simply go into the console and right-click the failed request and select Copy -> Copy Fetch Request, and paste it into the console, and change credentials
to include
rather than omit
, it works as expected.
Would you consider extending this library to allow correctly configured CORS implementaions? Thanks!
Some providers (including Azure AD) provide Access Tokens which aren't JWT and contain no information - this is perfectly acceptable as per the standard RFC. But I see no way using your library to acquire the ID token?
Can you provide a method for accessing the ID token? E.g., exchangeForIDToken
?
Thanks,
MV3 browser extensions only expose the StorageArea API (via chrome.storage.session for example), not the Storage API in service workers.
The StorageArea API is asynchronous so it is not possible to build a Storage API shim around it to pass into the js-pkce storage
config variable either.
That means it's impossible to use this library from a Chrome extension currently.
Hi , i have implemented single sign on in my application using js-pkce library.The code works fine for me. But i tried running npm audit over the application just to check for any vulnerabilities in the library. Here is the error which i encountered on npm audit :
npm ERR! Unexpected end of JSON input while parsing near ''
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ssriv112\AppData\Roaming\npm-cache_logs\2022-02-16T11_47_24_273Z-debug.log
and the log file says that these are the target files having errors :
verbose stack SyntaxError: Unexpected end of JSON input while parsing near ''
**- verbose stack at JSON.parse ()
It would be great if there are any solutions to handle this issue.Attaching "\json-parse-better-errors\index.js" file for your reference
index.js.txt.
could you please export ITokenResponse interface from PKCE.d.ts ?
Now I have to copy ITokenResponse interface to my codebase if I need to process the responce in a method other that calls pkce.exchangeForAccessToken(..)
Thank you in advance
The PKCE.exchangeForAccessToken
method is typed to return Promise<ITokenResponse>
where ITokenResponse
is typed to be the following:
export default interface ITokenResponse {
access_token: string;
expires_in: number;
refresh_expires_in: number;
refresh_token: string;
scope: string;
token_type: string;
}
This is incorrect since the token endpoint can return error response as well: https://www.rfc-editor.org/rfc/rfc6749#section-5.2
Based on my testing it seems that the PKCE.exchangeForAccessToken
function just returns the error response such as {"error": "invalid_grant"}
which is not what the types suggest.
Suggestion:
Either make the function return union of these types or then throw an exception when an error is returned from the authentication server.
It would be nice to also support revoking of token so a user can be logged out.
See https://datatracker.ietf.org/doc/html/rfc7009
Example:
...
const authorizeUrl = pkce.authorizeUrl({ state: 'myState' });
...
cons token = await pkce.exchangeForAccessToken(responseUrl);
Looks like if we want to validate state in such situation we need to set it under pkce_state in session storage.
Our requirements are that every request must use a unique code_challenge within a server to server connection. So in the mean time sessionstorage or localstorage arn't available.
Are there any chance setting a code verifier per user/request? The storage keys are fixed, too.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.