@startuml skinparam sequence { ActorBackgroundColor white ActorBorderColor black ParticipantBackgroundColor white ParticipantBorderColor black LifeLineBackgroundColor blue LifeLineBorderColor black ArrowColor black } skinparam defaultFontSize 14 ' plantuml: https://plantuml.com/sequence-diagram title Oauth for native applications (with PKCE) actor "User/User-Agent\n(mobile device)" as u participant "Mobile Browser" as bro participant "mobile app" as app participant "Auth server" as auth participant "Api" as api u -> app: I'd like to use this app app -> app: I'll generate a secret and hash it (PKCE) app -[#red]> bro: open auth server url with this hash as query string (front-channel)\n/auth?response_type={code}&\nclient_id={client_id}&\nredirect_uri={redirect_uri}&\nscope={scope}&\nstate={random_value}&\ncode_challenge={hash_rand_str}&\ncode_challenge_method=S256 bro -[#red]> auth: grant me access, here's the hash (front-channel) auth -[#red]> bro: here's a temporary code, exchange for token (front-channel) bro -[#red]> app: here's a temporary code\nredirect?code={temp_code}&state={state} app -> auth: here's the code and secret unhashed, give me token\nPOST /token form_encoded\ngrant_type=authorization_code&\ncode={temp_code}&\nredirect_uri={redirect_uri}&\ncode_verifier={rand_str_unhashed}&\nclient_id={client_id} auth -> auth: verify hash of the secret auth -> app: here's the token app -> api: give me data with this token @enduml Submit amiga aws-orange black-knight bluegray blueprint cerulean-outline cerulean crt-amber crt-green cyborg-outline cyborg hacker lightgray mars materia-outline materia metal mimeograph minty plain reddress-darkblue reddress-darkgreen reddress-darkorange reddress-darkred reddress-lightblue reddress-lightgreen reddress-lightorange reddress-lightred sandstone silver sketchy-outline sketchy spacelab spacelab-white superhero-outline superhero toy united vibrant       🎉 Discover the future PlantUML Web Editor! 🚀  PNG  SVG  ASCII Art