{"id":43050697,"url":"https://github.com/aidant/lazy-oauth2-authorization-code-pkce-client","last_synced_at":"2026-01-31T10:35:05.327Z","repository":{"id":57682831,"uuid":"481164052","full_name":"aidant/lazy-oauth2-authorization-code-pkce-client","owner":"aidant","description":"A simple OAuth 2.0 Authorization Code PKCE client for the lazy developer.","archived":false,"fork":false,"pushed_at":"2022-11-04T23:02:39.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-30T15:49:48.814Z","etag":null,"topics":["authentication","authorization","code","oauth","oauth2","pkce"],"latest_commit_sha":null,"homepage":"https://github.com/aidant/lazy-oauth2-authorization-code-pkce-client","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aidant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-13T10:04:51.000Z","updated_at":"2022-04-17T03:17:38.000Z","dependencies_parsed_at":"2022-09-21T13:40:45.649Z","dependency_job_id":null,"html_url":"https://github.com/aidant/lazy-oauth2-authorization-code-pkce-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"aidant/boilerplate-npm-package","purl":"pkg:github/aidant/lazy-oauth2-authorization-code-pkce-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidant%2Flazy-oauth2-authorization-code-pkce-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidant%2Flazy-oauth2-authorization-code-pkce-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidant%2Flazy-oauth2-authorization-code-pkce-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidant%2Flazy-oauth2-authorization-code-pkce-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aidant","download_url":"https://codeload.github.com/aidant/lazy-oauth2-authorization-code-pkce-client/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidant%2Flazy-oauth2-authorization-code-pkce-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28938696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T10:18:23.202Z","status":"ssl_error","status_checked_at":"2026-01-31T10:18:22.693Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","authorization","code","oauth","oauth2","pkce"],"created_at":"2026-01-31T10:35:02.466Z","updated_at":"2026-01-31T10:35:05.314Z","avatar_url":"https://github.com/aidant.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lazy OAuth 2.0 Authorization Code PKCE Client\n\n\u003cp align='center'\u003e\n  A simple OAuth 2.0 Authorization Code PKCE client for the lazy developer.\n  \u003cbr\u003e\n  \u003ca href='https://www.npmjs.com/package/@lazy/oauth2-authorization-code-pkce-client'\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@lazy/oauth2-authorization-code-pkce-client?style=flat-square\"\u003e\n  \u003c/a\u003e\n  \u003ca href='https://bundlephobia.com/package/@lazy/oauth2-authorization-code-pkce-client'\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/@lazy/oauth2-authorization-code-pkce-client?label=minified%20%26%20gzipped\u0026style=flat-square\"\u003e\n  \u003c/a\u003e\n  \u003ca href='https://github.com/aidant/lazy-oauth2-authorization-code-pkce-client/actions/workflows/publish.yml'\u003e\n    \u003cimg src=\"https://img.shields.io/github/workflow/status/aidant/lazy-oauth2-authorization-code-pkce-client/Publish?style=flat-square\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Table of Contents\n\n- [Example](#example)\n  - [HTML](#html)\n  - [JavaScript](#javascript)\n- [API](#api)\n  - [`lazy-oauth2-authorization-code-pkce-client`]\n  - [`handleAuthorizationCodeFlow`]\n  - [`handleAuthorizationCodeCallback`]\n  - [`createContext`]\n  - [`getAuthorizationURL`]\n  - [`getAuthorizationCode`]\n  - [`getAccessToken`]\n- [Submodules](#submodules)\n\n## Example\n\n### HTML\n\nAll functionality of this package is exposed through a web component that is\naccessible by default, the web component is the recommended way to use this package.\n\n````html\n```html\n\u003chead\u003e\n  \u003cscript\n    type=\"module\"\n    src=\"https://cdn.skypack.dev/@lazy/oauth2-authorization-code-pkce-client/register-callback.js\"\n  \u003e\u003c/script\u003e\n  \u003cscript\n    type=\"module\"\n    src=\"https://cdn.skypack.dev/@lazy/oauth2-authorization-code-pkce-client/register-web-component.js\"\n  \u003e\u003c/script\u003e\n  \u003cscript type=\"module\"\u003e\n    addEventListener('oauth2:credentials', (event) =\u003e {\n      console.log(event.detail)\n    })\n  \u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003ca\n    is=\"lazy-oauth2-authorization-code-pkce-client\"\n    server:authorization_endpoint=\"https://auth.example.com/oauth2/authorize\"\n    server:token_endpoint=\"https://auth.example.com/oauth2/token\"\n    oauth2:client_id=\"d66de78a-50e2-4007-ba6b-55f86ee40b61\"\n    oauth2:scope=\"email\"\n  \u003e\n    Connect with Example\n  \u003c/a\u003e\n\u003c/body\u003e\n````\n\n### JavaScript\n\nIf you need a lower-level JavaScript API you can use [`handleAuthorizationCodeFlow`] or\n[`createContext`], [`getAuthorizationURL`], [`getAuthorizationCode`], and [`getAccessToken`].\n\n```ts\nimport {\n  handleAuthorizationCodeFlow,\n  handleAuthorizationCodeCallback,\n} from '@lazy/oauth2-authorization-code-pkce-client'\n\nhandleAuthorizationCodeCallback()\n\nconst button = document.createElement('button')\nbutton.textContent = 'Login'\n\nbutton.addEventListener('click', () =\u003e {\n  const response = await handleAuthorizationCodeFlow('https://auth.example.com/oauth2', {\n    client_id: 'd66de78a-50e2-4007-ba6b-55f86ee40b61',\n    scope: 'email',\n  })\n  const token = `${response.token_type} ${response.access_token}`\n  console.log(token)\n})\n```\n\n## API\n\n### [`lazy-oauth2-authorization-code-pkce-client`]\n\nThe custom web component `\u003ca is=\"lazy-oauth2-authorization-code-pkce-client\"\u003e`\nis the simplest solution to adding the OAuth 2.0 Authorization Code PKCE flow.\nThe `@lazy/oauth2-authorization-code-pkce-client/register-callback.js` script\nshould be loaded on the callback page.\n\n#### Parameters\n\n- `server:endpoint` - _string_ - The base URL or metadata URL of the OAuth 2.0 provider.\n- `server:authorization_endpoint` - _string_ - The URL of the OAuth 2.0 provider's authorization endpoint.\n- `server:token_endpoint` - _string_ - The URL of the OAuth 2.0 provider's token endpoint.\n- `oauth2:*` - _string_ - The OAuth 2.0 parameters such as; `client_id`, `scope`, and/or `redirect_uri`.\n\n```html\n\u003chead\u003e\n  \u003cscript\n    type=\"module\"\n    src=\"https://cdn.skypack.dev/@lazy/oauth2-authorization-code-pkce-client/register-web-component.js\"\n  \u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003ca\n    is=\"lazy-oauth2-authorization-code-pkce-client\"\n    server:authorization_endpoint=\"https://auth.example.com/oauth2/authorize\"\n    server:token_endpoint=\"https://auth.example.com/oauth2/token\"\n    oauth2:client_id=\"d66de78a-50e2-4007-ba6b-55f86ee40b61\"\n    oauth2:scope=\"email\"\n  \u003e\n    Connect with Example\n  \u003c/a\u003e\n\u003c/body\u003e\n```\n\nEmits the `oauth2:credentials` CustomEvent with the OAuth 2.0 credentials.\n\n### `handleAuthorizationCodeFlow`\n\nThe [`handleAuthorizationCodeFlow`] function handles the Authorization Code\nauthentication flow. A new window is created where the user is then prompted to\nauthenticate with the OAuth 2.0 provider, once the user had accepted or rejected\nthe request the `handleAuthorizationCodeCallback` function then handles the response\nand returns it back via the promise from `handleAuthorizationCodeFlow` - just like\nmagic.\n\n#### Parameters\n\n- `oauth2server` - **string** or **object** - The base URL, metadata URL, or metadata of the OAuth 2.0 provider.\n- `parameters` - _object_ - The OAuth 2.0 parameters such as; `client_id`, `scope`, and/or `redirect_uri`.\n\n#### Example\n\n```ts\nimport { handleAuthorizationCodeFlow } from '@lazy/oauth2-authorization-code-pkce-client/handle-authorization-code-flow.js'\n\nconst button = document.createElement('button')\nbutton.textContent = 'Login'\n\nbutton.addEventListener('click', () =\u003e {\n  const response = await handleAuthorizationCodeFlow('https://auth.example.com/oauth2', {\n    client_id: 'example-client-id',\n  })\n  const token = `${response.token_type} ${response.access_token}`\n  console.log(token)\n})\n```\n\nReturns `Promise\u003cAccessTokenSuccessResponse\u003e`\n\n### `handleAuthorizationCodeCallback`\n\nThe [`handleAuthorizationCodeCallback`] function is responsible for returning\nthe response from the authentication endpoint back to the\n[`handleAuthorizationCodeFlow`] function. If you call the\n[`handleAuthorizationCodeFlow`] and [`handleAuthorizationCodeCallback`]\nfunctions in the same page make sure you call the\n[`handleAuthorizationCodeCallback`] function before the\n[`handleAuthorizationCodeFlow`].\n\n#### Example\n\n```ts\nimport { handleAuthorizationCodeCallback } from '@lazy/oauth2-authorization-code-pkce-client/handle-authorization-code-callback.js'\n\nhandleAuthorizationCodeCallback()\n```\n\nReturns `void`\n\n### `createContext`\n\nThe [`createContext`] function allows you to create a context object that is\nused by the lower level functions. Each context should only be used once, if you\nneed you can call [`createContext`] multiple times to get several context objects.\n\n#### Parameters\n\n- `oauth2server` - **string** or **object** - The base URL, metadata URL, or metadata of the OAuth 2.0 provider.\n- `parameters` - _object_ - The OAuth 2.0 parameters such as; `client_id`, `scope`, and/or `redirect_uri`.\n\n#### Example\n\n```ts\nimport { createContext } from '@lazy/oauth2-authorization-code-pkce-client/create-context.js'\n\nconst context = await createContext('https://auth.example.com/oauth2', {\n  client_id: 'example-client-id',\n})\n```\n\nReturns `Promise\u003cContext\u003e`\n\n### `getAuthorizationURL`\n\nCreate the URL to the OAuth 2.0 provider's authorization endpoint.\n\n#### Parameters\n\n- `context` - **Context** - The context object returned from [`createContext`].\n\n#### Example\n\n```ts\nimport { getAuthorizationURL } from '@lazy/oauth2-authorization-code-pkce-client/get-authorization-url.js'\n\nconst url = getAuthorizationURL(context)\nopen(url, '_blank', 'noopener')\n```\n\n### `getAuthorizationCode`\n\n#### Parameters\n\nGet the authorization code from the callback endpoint.\n\n- `context` - **Context** - The context object returned from [`createContext`].\n\n#### Example\n\n```ts\nimport { getAuthorizationCode } from '@lazy/oauth2-authorization-code-pkce-client/get-authorization-code.js'\n\nconst response = await getAuthorizationCode(context)\n```\n\nReturns `Promise\u003cAuthorizationSuccessResponse\u003e`\n\n### `getAccessToken`\n\nExchange an authorization code for an access token.\n\n#### Parameters\n\n- `context` - **Context** - The context object returned from [`createContext`].\n- `response` - **AuthorizationSuccessResponse** - The Authorization Code response.\n\n#### Example\n\n```ts\nimport { getAccessToken } from '@lazy/oauth2-authorization-code-pkce-client/get-access-token.js'\n\nconst credentials = await getAccessToken(context, response)\n```\n\nReturns `Promise\u003cAccessTokenSuccessResponse\u003e`\n\n## Submodules\n\nThere are two main submodules for this package; `@lazy/oauth2-authorization-code-pkce-client/register-web-component.js` and `@lazy/oauth2-authorization-code-pkce-client/register-callback.js` these can be used to setup the OAuth 2.0 flow without writing any JavaScript. Each function also has a submodule associated with it to optimize bundle size, a list of all the submodules can be found below:\n\n- `@lazy/oauth2-authorization-code-pkce-client/authorization-code-error.js`\n- `@lazy/oauth2-authorization-code-pkce-client/create-context.js`\n- `@lazy/oauth2-authorization-code-pkce-client/get-access-token.js`\n- `@lazy/oauth2-authorization-code-pkce-client/get-authorization-code.js`\n- `@lazy/oauth2-authorization-code-pkce-client/get-authorization-url.js`\n- `@lazy/oauth2-authorization-code-pkce-client/handle-authorization-code-callback.js`\n- `@lazy/oauth2-authorization-code-pkce-client/handle-authorization-code-flow.js`\n- `@lazy/oauth2-authorization-code-pkce-client/register-callback.js`\n- `@lazy/oauth2-authorization-code-pkce-client/register-web-component.js`\n\n[`lazy-oauth2-authorization-code-pkce-client`]: #lazy-oauth2-authorization-code-pkce-client\n[`handleauthorizationcodeflow`]: #handleauthorizationcodeflow\n[`handleauthorizationcodecallback`]: #handleauthorizationcodecallback\n[`createcontext`]: #createcontext\n[`getauthorizationurl`]: #getauthorizationurl\n[`getauthorizationcode`]: #getauthorizationcode\n[`getaccesstoken`]: #getaccesstoken\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faidant%2Flazy-oauth2-authorization-code-pkce-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faidant%2Flazy-oauth2-authorization-code-pkce-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faidant%2Flazy-oauth2-authorization-code-pkce-client/lists"}