Replies: 3 comments 7 replies
-
|
I've already heard from a number of oauth-proficient developers that successfully moved their projects to this module and the examples that are present were immensely helpful to them just for the sole purpose of identifying the routines for a given JTBD. This library and its examples are intentionally low level and framework-less so that, as written in the readme, framework-specific client modules may be written utilizing it. Such effort would be carried out by a developer aware of the individual required routines and their placement. I think it's fair to say that if, given the example code, you don't know what to put where in your project, then you're not the target audience for this module and ideally, someone would write [insert your framework of choice here] abstraction that would be suitable for you. It is absolutely not feasible to write working examples for all the flows for all the popular frameworks in all the target supported runtimes. That being said, rather than asking for "better examples", why don't you shed light on what you want to achieve, what's your target environment like, etc. in a Q&A discussion.
I'll attempt to put an explainer on top of the individual examples stating their intended use. |
Beta Was this translation helpful? Give feedback.
-
When in the process of choosing a library I usually also look at example code. If I have a lot of libraries to choose from, and I think the example code can't be working or is unclear, I usually just look at the next library, and don't think too much about the intended use of the examples, as long as they aren't clearly stated. There weren't too many other libraries around which have got the functionality I need, so I looked further into this one anyway. When just looking through the code I was also wondering what is meant with getCurrentUrl(), until I realized it probably just means window.location.href (when in a browser, and I guess at least in the Public Client Authorization Code Flow, it will be a browser most of the time). And yes I've got it working, and it works wonderful, thanks :-). |
Beta Was this translation helpful? Give feedback.
-
Neat, could it then be used as examples then? Something that one could use without still having to rely on another layer and using vanillajs (without assuming any framework). |
Beta Was this translation helpful? Give feedback.
-
|
FWIW here is mine as a basic test against my local Keycloak instance : <!DOCTYPE html>
<html>
<body>
<button id="login" disabled onclick='location.href=authURL'>login</button>
<div id="information"></div>
<button id="restart" disabled onclick='location.href="alt.html"'>restart process</button>
</body>
<script>
// inspired by https://github.com/panva/oauth4webapi/blob/master/examples/oidc.ts
const oauthurl = "https://cdn.jsdelivr.net/npm/oauth4webapi@2.10.3/+esm"
const openIdConnectUrl = new URL('http://localhost:8181/realms/hubsce'); // no trailing '/' !
// example of a Keycloak instance with a realm
const clientId = 'hubsclient';
// client in that realm with appropriate URLs
const redirectUri = 'http://localhost:8080/alt.html?authentified=true';
const scope = 'openid';
const buttonEl = document.querySelector('#login')
const informationEl = document.querySelector('#information')
const restartEl = document.querySelector('#restart')
var authURL = ''
let as
let codeVerified
const debug=false
import(oauthurl).then((oauth) => {
if(debug)console.log(oauth);
const client = {
client_id: clientId,
token_endpoint_auth_method: 'none',
}
async function discover(){
as = await oauth
.discoveryRequest(openIdConnectUrl, { algorithm: 'oidc' })
.then((response) => oauth.processDiscoveryResponse(openIdConnectUrl, response))
if(debug)console.log(as)
if (currentURL.searchParams.get('authentified')) {
codeVerified = sessionStorage.getItem("code_verifier" )
getInfo()
buttonEl.setAttribute('disabled', true)
}
const code_challenge_method = 'S256'
const code_verifier = oauth.generateRandomCodeVerifier()
sessionStorage.setItem("code_verifier", code_verifier)
const code_challenge = await oauth.calculatePKCECodeChallenge(code_verifier)
const authorizationUrl = new URL(as.authorization_endpoint)
authorizationUrl.searchParams.set('client_id', clientId)
authorizationUrl.searchParams.set('redirect_uri', redirectUri)
authorizationUrl.searchParams.set('response_type', 'code')
authorizationUrl.searchParams.set('scope', scope)
authorizationUrl.searchParams.set('code_challenge', code_challenge)
authorizationUrl.searchParams.set('code_challenge_method', code_challenge_method)
authURL = authorizationUrl.href
buttonEl.removeAttribute('disabled')
}
discover()
async function getInfo(){
let sub
let access_token
const currentUrl = new URL(location.href)
const params = oauth.validateAuthResponse(as, client, currentUrl)
if (oauth.isOAuth2Error(params)) {
console.error('Error Response', params)
throw new Error() // Handle OAuth 2.0 redirect error
}
const response = await oauth.authorizationCodeGrantRequest(
as,
client,
params,
redirectUri,
codeVerified,
)
const result = await oauth.processAuthorizationCodeOpenIDResponse(as, client, response )
if(debug)console.log('Access Token Response', result)
;({ access_token } = result)
const claims = oauth.getValidatedIdTokenClaims(result)
if(debug)console.log('ID Token Claims', claims)
;({ sub } = claims)
const responseInfo = await oauth.userInfoRequest(as, client, access_token)
const resultInfo = await oauth.processUserInfoResponse(as, client, sub, responseInfo)
console.log('UserInfo Response', resultInfo)
buttonEl.setAttribute('disabled', true)
informationEl.innerText = 'Welcome '+resultInfo.preferred_username+' ('+resultInfo.name+')'
restartEl.removeAttribute('disabled')
}
});
var currentURL = new URL(location.href)
console.log('authentified', currentURL.searchParams.get('authentified') )
</script>
</html> |
Beta Was this translation helpful? Give feedback.
-
@panva do you know if any are open source or maybe have an article/video around it? I'm seeing if I can get a code/PKCE flow working in Remix or Next.js and while the examples are helpful and better than scratch, it does feel like there could be more so everyone isn't reinventing the wheel. I'm sure I'll land on something eventually, but having a deeper example of what I would think would be a pretty common implementation in the JS/React world would be nice and prevent people from all duplicating work. |
Beta Was this translation helpful? Give feedback.
-
|
IMO, the quality of examples/documentation in this project and all of Filip's OSS work is unmatched. 🎩 |
Beta Was this translation helpful? Give feedback.
-
|
that's exciting news! as far as the example note, i'm glad someone found value out of what is there and maybe there's more that i haven't seen, but as far as i saw (and still see) in the source repo, there is basic documentation of the api, and a very basic example of the code flow in raw JS in 94 lines of code. the other flows have similarly anemic examples. this is an open source project and the maintainer doesn't owe us anything, but from what i've seen the docs and examples are far from rich and thorough. which again, is fine by itself, and from what i can tell the lib looks great, but to call the docs and examples rich is just not true. |
Beta Was this translation helpful? Give feedback.
-
|
My original reply to this topic about the module's intended audience still stands. @balazsorban44 happens to match that audience. Thank you for the kind words mate. |
Beta Was this translation helpful? Give feedback.
-
|
What threw me off about the PKCE example is how is the |
Beta Was this translation helpful? Give feedback.
-
|
In a browser scenario you would use local, session, or cookie storage that you'd recall on the way back. The only insecurity would be having XSS vulnerability in which case, nothing will protect you then and the game's over anyway. |
Beta Was this translation helpful? Give feedback.
-
I've looked at your project and the examples.
And while looking at the examples, I was like, how the heck is that supposed to be working????
Until I've realized, that this are none working examples ;-). Just some abstract ideas how the whole thing could be implemented.
Would be cool to have working examples. Or at least some comments in the examples which clearly states that they are none working, and what would be needed to make them work.
Beta Was this translation helpful? Give feedback.
All reactions