feat: added simple PKCE and state checks utils, used PKCE and state checks in auth0

playground/server/routes/auth/auth0.get.ts

@@ -1,6 +1,7 @@
 export default oauth.auth0EventHandler({
   config: {
     emailRequired: true,
+    checks: ['state']
   },
   async onSuccess(event, { user }) {
     await setUserSession(event, {

src/runtime/server/lib/oauth/auth0.ts

@@ -1,10 +1,11 @@
-import type { H3Event } from 'h3'
+import type { H3Event, H3Error } from 'h3'
 import { eventHandler, createError, getQuery, getRequestURL, sendRedirect } from 'h3'
 import { withQuery, parsePath } from 'ufo'
 import { ofetch } from 'ofetch'
 import { defu } from 'defu'
 import { useRuntimeConfig } from '#imports'
 import type { OAuthConfig } from '#auth-utils'
+import { type OAuthChecks, checks } from '../../utils/security'
 
 export interface OAuthAuth0Config {
   /**
@@ -24,7 +25,7 @@ export interface OAuthAuth0Config {
   domain?: string
   /**
    * Auth0 OAuth Audience
-   * @default process.env.NUXT_OAUTH_AUTH0_AUDIENCE
+   * @default ''
    */
   audience?: string
   /**
@@ -39,6 +40,13 @@ export interface OAuthAuth0Config {
    * @default false
    */
   emailRequired?: boolean
+  /**
+   * checks
+   * @default []
+   * @see https://auth0.com/docs/flows/authorization-code-flow-with-proof-key-for-code-exchange-pkce
+   * @see https://auth0.com/docs/protocols/oauth2/oauth-state
+   */
+  checks?: OAuthChecks[]
 }
 
 export function auth0EventHandler({ config, onSuccess, onError }: OAuthConfig<OAuthAuth0Config>) {
@@ -60,6 +68,7 @@ export function auth0EventHandler({ config, onSuccess, onError }: OAuthConfig<OA
 
     const redirectUrl = getRequestURL(event).href
     if (!code) {
+      const authParam = await checks.create(event, config.checks) // Initialize checks
       config.scope = config.scope || ['openid', 'offline_access']
       if (config.emailRequired && !config.scope.includes('email')) {
         config.scope.push('email')
@@ -73,10 +82,20 @@ export function auth0EventHandler({ config, onSuccess, onError }: OAuthConfig<OA
           redirect_uri: redirectUrl,
           scope: config.scope.join(' '),
           audience: config.audience || '',
+          ...authParam
         })
       )
     }
 
+    // Verify checks
+    let checkResult
+    try {
+      checkResult = await checks.use(event, config.checks)
+    } catch (error) {
+      if (!onError) throw error
+      return onError(event, error as H3Error)
+    }
+
     const tokens: any = await ofetch(
       tokenURL as string,
       {
@@ -90,6 +109,7 @@ export function auth0EventHandler({ config, onSuccess, onError }: OAuthConfig<OA
           client_secret: config.clientSecret,
           redirect_uri: parsePath(redirectUrl).pathname,
           code,
+          ...checkResult
         }
       }
     ).catch(error => {

src/runtime/server/utils/security.ts

@@ -0,0 +1,117 @@
+import type { H3Event } from 'h3'
+import { subtle, getRandomValues } from 'uncrypto'
+
+export type OAuthChecks = 'pkce' | 'state'
+
+// From oauth4webapi https://github.com/panva/oauth4webapi/blob/4b46a7b4a4ca77a513774c94b718592fe3ad576f/src/index.ts#L567C1-L579C2 
+const CHUNK_SIZE = 0x8000
+export function encodeBase64Url(input: Uint8Array | ArrayBuffer) {
+  if (input instanceof ArrayBuffer) {
+    input = new Uint8Array(input)
+  }
+
+  const arr = []
+  for (let i = 0; i < input.byteLength; i += CHUNK_SIZE) {
+    // @ts-expect-error
+    arr.push(String.fromCharCode.apply(null, input.subarray(i, i + CHUNK_SIZE)))
+  }
+  return btoa(arr.join('')).replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_')
+}
+
+function randomBytes() {
+  return encodeBase64Url(getRandomValues(new Uint8Array(32)))
+}
+
+/** 
+ * Generate a random `code_verifier` for use in the PKCE flow
+ * @see https://tools.ietf.org/html/rfc7636#section-4.1
+ */
+export function generateCodeVerifier() {
+  return randomBytes()
+}
+
+/** 
+ * Generate a random `state` used to prevent CSRF attacks 
+ * @see https://www.rfc-editor.org/rfc/rfc6749.html#section-4.1.1
+ */
+export function generateState() {
+  return randomBytes()
+}
+
+/**
+ * Generate a `code_challenge` from a `code_verifier` for use in the PKCE flow
+ * @param verifier `code_verifier` string
+ * @returns `code_challenge` string
+ * @see https://tools.ietf.org/html/rfc7636#section-4.1
+ */
+export async function pkceCodeChallenge(verifier: string) {
+  return encodeBase64Url(await subtle.digest({ name: 'SHA-256' }, new TextEncoder().encode(verifier)))
+}
+
+interface CheckUseResult {
+  code_verifier?: string
+}
+/**
+ * Checks for PKCE and state
+ */
+export const checks = {
+  /**
+   * Create checks
+   * @param event, H3Event
+   * @param checks, OAuthChecks[] a list of checks to create
+   * @returns Record<string, string> a map of check parameters to add to the authorization URL
+   */
+  async create(event: H3Event, checks?: OAuthChecks[]) {
+    const res: Record<string, string> = {}
+    if (checks?.includes('pkce')) {
+      const pkceVerifier = generateCodeVerifier()
+      const pkceChallenge = await pkceCodeChallenge(pkceVerifier)
+      console.log('pkceVerifier', pkceVerifier)
+      console.log('pkceChallenge', pkceChallenge)
+      res['code_challenge'] = pkceChallenge
+      res['code_challenge_method'] = 'S256'
+      setCookie(event, 'nuxt-auth-util-verifier', pkceVerifier, { maxAge: 60 * 15, secure: true, httpOnly: true, sameSite: 'lax' })
+    }
+    if (checks?.includes('state')) {
+      res['state'] = generateState()
+      setCookie(event, 'nuxt-auth-util-state', res['state'], { maxAge: 60 * 15, secure: true, httpOnly: true, sameSite: 'lax' })
+    }
+    return res
+  },
+  /**
+   * Use checks, verifying and returning the results
+   * @param event, H3Event
+   * @param checks, OAuthChecks[] a list of checks to use
+   * @returns CheckUseResult a map that can contain `code_verifier` if `pkce` was used to be used in the token exchange
+   */
+  async use(event: H3Event, checks?: OAuthChecks[]) : Promise<CheckUseResult> {
+    const res: CheckUseResult = {}
+    const { state } = getQuery(event)
+    if (checks?.includes('pkce')) {
+      const pkceVerifier = getCookie(event, 'nuxt-auth-util-verifier')
+      setCookie(event, 'nuxt-auth-util-verifier', '', { maxAge: -1 })
+      res['code_verifier'] = pkceVerifier
+    }
+    if (checks?.includes('state')) {
+      const stateInCookie = getCookie(event, 'nuxt-auth-util-state')
+      setCookie(event, 'nuxt-auth-util-state', '', { maxAge: -1 })
+      if (checks?.includes('state')) {
+        if (!state || !stateInCookie) {
+          const error = createError({
+            statusCode: 401,
+            message: 'Auth0 login failed: state is missing'
+          })
+          throw error
+        }
+        if (state !== stateInCookie) {
+          const error = createError({
+            statusCode: 401,
+            message: 'Auth0 login failed: state does not match'
+          })
+          throw error
+        }
+      }
+    }
+    return res
+  },
+}