{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/pkce/","result":{"data":{"markdownRemark":{"id":"0867dd59-ba31-51af-b5ab-f5c10842430c","excerpt":"PKCE is an OAuth 2.0 security extension for public clients on mobile devices intended to avoid a malicious programme creeping into the same computer from…","html":"

PKCE is an OAuth 2.0 security extension for public clients on mobile devices intended to avoid a malicious programme creeping into the same computer from intercepting the authorisation code. The RFC 7636 introduction discusses the mechanisms of such an attack.

\n

PKCE has a different specification of its own. It allows applications to use the most reliable OAuth 2.0 flows in public or untrusted clients - the Authorization Code flow. In order to efficiently use a dynamically generated password, it achieves this by doing some setup work before the flow and some verification at the end of the flow.

\n

This is important because getting a fixed secret in a public client is not safe.

\n

In this blog, we will see how PKCE is useful in authorization code flow for OAuth and OIDC and how you can use this with your OAuth and OpenID Connect providers.

\n

What is PKCE

\n

Proof Key for Code Exchange as known as PKCE, is a key for preventing malicious attacks and securely performing code authorization flow.

\n

I would say, PKCE is used to provide one more security layer to the authorization code flow in OAuth and OpenID Connect.

\n

PKCE is mainly useful for the client-side application or any web apps that are using the client secret key and used to replace the static secret used in the authorization flow.

\n

This flow basically works with two parameters Code Verifier and Code challenge. Let's see what are these parameters, how we use them, and generate them.

\n

PKCE code verifier and challenge

\n

The code verifier is a cryptographically random string using the characters A-Z, a-z, 0-9, and the punctuation characters -._~ (hyphen, period, underscore, and tilde), between 43 and 128 characters long.\nOnce the client has generated the code verifier, it uses that to create the code challenge.

\n

For devices that can perform a SHA256 hash, the code challenge is a BASE64-URL-encoded string of the SHA256 hash of the code verifier.

\n

Generate code verifier and code challenge

\n

Here you can see the examples to generate the Code verifier and code challenge in different languages. Either you can find Node and Go Packages for this but I would recommend you to not depend on any package for such small things.

\n

NodeJs

\n
var crypto = require("crypto")\n\nfunction base64URLEncode(str) {\n    return str.toString('base64')\n        .replace(/\\+/g, '-')\n        .replace(/\\//g, '_')\n        .replace(/=/g, '');\n}\nvar verifier = base64URLEncode(crypto.randomBytes(32));\nconsole.log("code_verifier: ", verifier)\n\nif(verifier){\n    var challenge = base64URLEncode(sha256(verifier));\n    console.log("code_challenge: ",challenge)\n}\n\n\nfunction sha256(buffer) {\n    return crypto.createHash('sha256').update(buffer).digest();\n}
\n

Golang

\n
package main\n \nimport (\n    "crypto/sha256"\n    "encoding/base64"\n    "fmt"\n    "math/rand"\n    "strings"\n    "time"\n)\n \ntype CodeVerifier struct {\n    Value string\n}\n \nconst (\n    length = 32\n)\n \nfunc base64URLEncode(str []byte) string {\n    encoded := base64.StdEncoding.EncodeToString(str)\n    encoded = strings.Replace(encoded, "+", "-", -1)\n    encoded = strings.Replace(encoded, "/", "_", -1)\n    encoded = strings.Replace(encoded, "=", "", -1)\n    return encoded\n}\n \nfunc verifier() (*CodeVerifier, error) {\n    r := rand.New(rand.NewSource(time.Now().UnixNano()))\n    b := make([]byte, length, length)\n    for i := 0; i < length; i++ {\n        b[i] = byte(r.Intn(255))\n    }\n    return CreateCodeVerifierFromBytes(b)\n}\n \nfunc CreateCodeVerifierFromBytes(b []byte) (*CodeVerifier, error) {\n    return &CodeVerifier{\n        Value: base64URLEncode(b),\n    }, nil\n}\n \nfunc (v *CodeVerifier) CodeChallengeS256() string {\n    h := sha256.New()\n    h.Write([]byte(v.Value))\n    return base64URLEncode(h.Sum(nil))\n}\n \nfunc main() {\n    verifier, _ := verifier()\n    fmt.Println("code_verifier: ", verifier.Value)\n    challenge := verifier.CodeChallengeS256()\n    fmt.Println("code_challenge :", challenge)\n}\n
\n

Implement the OAuth 2.0 Authorization Code with PKCE Flow

\n

Get the Authorization code

\n

In the OAuth Authorization flow, we need to have the code verifier and code challenge to start with the authentication and obviously an OAuth provider to connect.

\n

For the initial request, we need to pass the codechallenge and codechallenge_method to the OAuth or OIDC provider that supports PKCE based flow.

\n

The request will look like:

\n
Provider + /oauth/redirect?\nclient_id={client_id}\n&redirect_uri={Callback URL}\n&scope={Scope}\n&response_type=code\n&state={random long string}\n&code_challenge={code challenge}\n&code_challenge_method=SHA256
\n

The provider should redirect you to the authentication/login page and where you’ll get the code after successful authentication.

\n

Code Exchange

\n

In the code exchange request, we need to pass the code we have received through the above request and the code verifier that we have generated in our first step.

\n
POST Provider + /oauth/access_token\n\nRequest body:\n{\n   client_id:{client_id},\n   client_secret:{client_secret},\n   redirect_uri:{redirect_uri},\n   response_type:token,\n   Code:{code} // That we have received in authorization request\n   code_verifier: {code verifier // generated in the first step\n}
\n

Once the codeverificer hash matches with the codechallenge of the authorization request, You will get the token in the response with status code 200 OK.

\n
{\n    "access_token": "c5a****b-****-4*7f-a********e4a",\n    "token_type": "access_token",\n    "refresh_token": "5*****82-b***-**82-8c*1-*******7ce",\n    "expires_in": 11972\n}
\n

That's it and you've implemented PKCE flow in your application.

\n","headings":[{"value":"What is PKCE","depth":2},{"value":"PKCE code verifier and challenge","depth":3},{"value":"Generate code verifier and code challenge","depth":3},{"value":"Implement the OAuth 2.0 Authorization Code with PKCE Flow","depth":2},{"value":"Get the Authorization code","depth":3},{"value":"Code Exchange","depth":3}],"fields":{"slug":"/engineering/pkce/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"If you are working with OAuth and OIDC authorization code flow and want to setup PKCE flow then this article will help you to understand everything about PKCE.","title":"PKCE: What it is and how to use it with OAuth 2.0","canonical":null,"date":"September 03, 2020","updated_date":null,"tags":["PKCE","Oauth","OIDC"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/7ba5011bcf44e895dd050e8766d4d005/c2ae5/pkce.png","srcSet":"/static/7ba5011bcf44e895dd050e8766d4d005/f5f11/pkce.png 200w,\n/static/7ba5011bcf44e895dd050e8766d4d005/6d133/pkce.png 400w,\n/static/7ba5011bcf44e895dd050e8766d4d005/c2ae5/pkce.png 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Narendra Pareek","github":"pareek-narendra","bio":"Narendra is a Product Manager at LoginRadius, where he is utilizing his skills in driving vision and roadmap for businesses. He focuses on collaboration between customer and company. He is also having a 5 years of develoment experience in different NodeJS, GO and PHP language projects.","avatar":null}}}},"pageContext":{"id":"0867dd59-ba31-51af-b5ab-f5c10842430c","fields__slug":"/engineering/pkce/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}