panva/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Webpack 5 + jose

git clone https://gist.github.com/panva/64aa2db809722a497d3df3d96daba639 webpack-example
cd webpack-example
npm install
npx webpack
npx http-server
Navigate to http://127.0.0.1:8080 and check the console logs

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JOSE Example</title>
  <script src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>

## index.js
import { createRemoteJWKSet, jwtVerify } from 'jose'

const JWKS = createRemoteJWKSet(new URL('https://op.panva.cz/jwks'))

const jwt = 'eyJhbGciOiJQUzI1NiIsImtpZCI6InIxTGtiQm8zOTI1UmIyWkZGckt5VTNNVmV4OVQyODE3S3gwdmJpNmlfS2MifQ.eyJzdWIiOiJnb29nbGUuMTE3NzQxODU4Njc1MzgzNzQ1OTk2IiwiYXVkIjoiSTBBbmpzYkZhTXM3NXhjanI1bm1JIiwiaWF0IjoxNjA1Njg4NjUyLCJpc3MiOiJodHRwczovL29wLnBhbnZhLmN6In0.VYe2CT6KoGRYyaoU7DpaiDZXaOHLP5tdHOuM283lBsqi00-XPA_cXJ9PPVk7NbGT-CrmfS6gFSQ-X1Uz3ebH51UsOPKi_nqh_IrztKJdSUvtI_PQ9zhdyHw40pqQY-0Gmp8FuBPXz17HrSfyRdkyZBSR_-lOVzUCxczwBUKRkxhvKsYSPEpAmrtgF3Pno2BXMnZ6TQ0OfdkXPq3ZQSOEfjI69UUiJxDAfbqVi8LZwiOTq0_8R4PT5DXrKUQMCambaJb4SKzhEn8fS2ERz3MSC4jgLyjfM2hdkm83tGwsXCeKn-NuDB5XwMUia1oHq_kANJUme1E58tFrMCd8RyK4yw'

console.log('verifying JWT', jwt)
jwtVerify(jwt, JWKS, {
  issuer: 'https://op.panva.cz',
  audience: 'I0AnjsbFaMs75xcjr5nmI'
}).then(({ protectedHeader, payload }) => {
  console.log('verification succeeded')
  console.log('protectedHeader', protectedHeader)
  console.log('payload', payload)
})

## package.json
{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "Example bundling jose for the browser using webpack@5",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "jose": "^4.0.2",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0"
  }
}

## webpack.config.js
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JOSE Example</title>
	<script src="dist/bundle.js"></script>
	</head>
	<body>
	</body>
	</html>
	import { createRemoteJWKSet, jwtVerify } from 'jose'

	const JWKS = createRemoteJWKSet(new URL('https://op.panva.cz/jwks'))

	const jwt = 'eyJhbGciOiJQUzI1NiIsImtpZCI6InIxTGtiQm8zOTI1UmIyWkZGckt5VTNNVmV4OVQyODE3S3gwdmJpNmlfS2MifQ.eyJzdWIiOiJnb29nbGUuMTE3NzQxODU4Njc1MzgzNzQ1OTk2IiwiYXVkIjoiSTBBbmpzYkZhTXM3NXhjanI1bm1JIiwiaWF0IjoxNjA1Njg4NjUyLCJpc3MiOiJodHRwczovL29wLnBhbnZhLmN6In0.VYe2CT6KoGRYyaoU7DpaiDZXaOHLP5tdHOuM283lBsqi00-XPA_cXJ9PPVk7NbGT-CrmfS6gFSQ-X1Uz3ebH51UsOPKi_nqh_IrztKJdSUvtI_PQ9zhdyHw40pqQY-0Gmp8FuBPXz17HrSfyRdkyZBSR_-lOVzUCxczwBUKRkxhvKsYSPEpAmrtgF3Pno2BXMnZ6TQ0OfdkXPq3ZQSOEfjI69UUiJxDAfbqVi8LZwiOTq0_8R4PT5DXrKUQMCambaJb4SKzhEn8fS2ERz3MSC4jgLyjfM2hdkm83tGwsXCeKn-NuDB5XwMUia1oHq_kANJUme1E58tFrMCd8RyK4yw'

	console.log('verifying JWT', jwt)
	jwtVerify(jwt, JWKS, {
	issuer: 'https://op.panva.cz',
	audience: 'I0AnjsbFaMs75xcjr5nmI'
	}).then(({ protectedHeader, payload }) => {
	console.log('verification succeeded')
	console.log('protectedHeader', protectedHeader)
	console.log('payload', payload)
	})
	{
	"name": "webpack-example",
	"version": "1.0.0",
	"description": "Example bundling jose for the browser using webpack@5",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "MIT",
	"dependencies": {
	"jose": "^4.0.2",
	"webpack": "^5.6.0",
	"webpack-cli": "^4.2.0"
	}
	}
	const path = require('path');

	module.exports = {
	entry: './index.js',
	output: {
	path: path.resolve(__dirname, 'dist'),
	filename: 'bundle.js'
	}
	};