Gathering detailed insights and metrics for @lazy/oauth2-authorization-code-pkce-client
Gathering detailed insights and metrics for @lazy/oauth2-authorization-code-pkce-client
A simple OAuth 2.0 Authorization Code PKCE client for the lazy developer.
1.0.0-rc.4
MIT
TypeScript
39.71 kB
Installations
npm install @lazy/oauth2-authorization-code-pkce-clientDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
16.18.0
NPM Version
8.19.2
Releases
Unable to fetch releases
Languages
1
TypeScript
TypeScript (100%)
Developer
aidant
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
8 Commits
1 Watchers
1 Branches
1 Contributors
Updated on Apr 17, 2022
Maintainers
1
Package Meta Information
Latest Version
1.0.0-rc.4
Package Id
@lazy/oauth2-authorization-code-pkce-client@1.0.0-rc.4
Unpacked Size
39.71 kB
Size
10.19 kB
File Count
34
NPM Version
8.19.2
Node Version
16.18.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Lazy OAuth 2.0 Authorization Code PKCE Client
A simple OAuth 2.0 Authorization Code PKCE client for the lazy developer.
Table of Contents
Example
HTML
All functionality of this package is exposed through a web component that is accessible by default, the web component is the recommended way to use this package.
1```html 2<head> 3 <script 4 type="module" 5 src="https://cdn.skypack.dev/@lazy/oauth2-authorization-code-pkce-client/register-callback.js" 6 ></script> 7 <script 8 type="module" 9 src="https://cdn.skypack.dev/@lazy/oauth2-authorization-code-pkce-client/register-web-component.js" 10 ></script> 11 <script type="module"> 12 addEventListener('oauth2:credentials', (event) => { 13 console.log(event.detail) 14 }) 15 </script> 16</head> 17 18<body> 19 <a 20 is="lazy-oauth2-authorization-code-pkce-client" 21 server:authorization_endpoint="https://auth.example.com/oauth2/authorize" 22 server:token_endpoint="https://auth.example.com/oauth2/token" 23 oauth2:client_id="d66de78a-50e2-4007-ba6b-55f86ee40b61" 24 oauth2:scope="email" 25 > 26 Connect with Example 27 </a> 28</body>
JavaScript
If you need a lower-level JavaScript API you can use handleAuthorizationCodeFlow or
createContext, getAuthorizationURL, getAuthorizationCode, and getAccessToken.
1import { 2 handleAuthorizationCodeFlow, 3 handleAuthorizationCodeCallback, 4} from '@lazy/oauth2-authorization-code-pkce-client' 5 6handleAuthorizationCodeCallback() 7 8const button = document.createElement('button') 9button.textContent = 'Login' 10 11button.addEventListener('click', () => { 12 const response = await handleAuthorizationCodeFlow('https://auth.example.com/oauth2', { 13 client_id: 'd66de78a-50e2-4007-ba6b-55f86ee40b61', 14 scope: 'email', 15 }) 16 const token = `${response.token_type} ${response.access_token}` 17 console.log(token) 18})
API
lazy-oauth2-authorization-code-pkce-client
The custom web component <a is="lazy-oauth2-authorization-code-pkce-client">
is the simplest solution to adding the OAuth 2.0 Authorization Code PKCE flow.
The @lazy/oauth2-authorization-code-pkce-client/register-callback.js script
should be loaded on the callback page.
Parameters
server:endpoint- string - The base URL or metadata URL of the OAuth 2.0 provider.server:authorization_endpoint- string - The URL of the OAuth 2.0 provider's authorization endpoint.server:token_endpoint- string - The URL of the OAuth 2.0 provider's token endpoint.oauth2:*- string - The OAuth 2.0 parameters such as;client_id,scope, and/orredirect_uri.
1<head> 2 <script 3 type="module" 4 src="https://cdn.skypack.dev/@lazy/oauth2-authorization-code-pkce-client/register-web-component.js" 5 ></script> 6</head> 7 8<body> 9 <a 10 is="lazy-oauth2-authorization-code-pkce-client" 11 server:authorization_endpoint="https://auth.example.com/oauth2/authorize" 12 server:token_endpoint="https://auth.example.com/oauth2/token" 13 oauth2:client_id="d66de78a-50e2-4007-ba6b-55f86ee40b61" 14 oauth2:scope="email" 15 > 16 Connect with Example 17 </a> 18</body>
Emits the oauth2:credentials CustomEvent with the OAuth 2.0 credentials.
handleAuthorizationCodeFlow
The handleAuthorizationCodeFlow function handles the Authorization Code
authentication flow. A new window is created where the user is then prompted to
authenticate with the OAuth 2.0 provider, once the user had accepted or rejected
the request the handleAuthorizationCodeCallback function then handles the response
and returns it back via the promise from handleAuthorizationCodeFlow - just like
magic.
Parameters
oauth2server- string or object - The base URL, metadata URL, or metadata of the OAuth 2.0 provider.parameters- object - The OAuth 2.0 parameters such as;client_id,scope, and/orredirect_uri.
Example
1import { handleAuthorizationCodeFlow } from '@lazy/oauth2-authorization-code-pkce-client/handle-authorization-code-flow.js' 2 3const button = document.createElement('button') 4button.textContent = 'Login' 5 6button.addEventListener('click', () => { 7 const response = await handleAuthorizationCodeFlow('https://auth.example.com/oauth2', { 8 client_id: 'example-client-id', 9 }) 10 const token = `${response.token_type} ${response.access_token}` 11 console.log(token) 12})
Returns Promise<AccessTokenSuccessResponse>
handleAuthorizationCodeCallback
The handleAuthorizationCodeCallback function is responsible for returning
the response from the authentication endpoint back to the
handleAuthorizationCodeFlow function. If you call the
handleAuthorizationCodeFlow and handleAuthorizationCodeCallback
functions in the same page make sure you call the
handleAuthorizationCodeCallback function before the
handleAuthorizationCodeFlow.
Example
1import { handleAuthorizationCodeCallback } from '@lazy/oauth2-authorization-code-pkce-client/handle-authorization-code-callback.js' 2 3handleAuthorizationCodeCallback()
Returns void
createContext
The createContext function allows you to create a context object that is
used by the lower level functions. Each context should only be used once, if you
need you can call createContext multiple times to get several context objects.
Parameters
oauth2server- string or object - The base URL, metadata URL, or metadata of the OAuth 2.0 provider.parameters- object - The OAuth 2.0 parameters such as;client_id,scope, and/orredirect_uri.
Example
1import { createContext } from '@lazy/oauth2-authorization-code-pkce-client/create-context.js'
2
3const context = await createContext('https://auth.example.com/oauth2', {
4 client_id: 'example-client-id',
5})Returns Promise<Context>
getAuthorizationURL
Create the URL to the OAuth 2.0 provider's authorization endpoint.
Parameters
context- Context - The context object returned fromcreateContext.
Example
1import { getAuthorizationURL } from '@lazy/oauth2-authorization-code-pkce-client/get-authorization-url.js' 2 3const url = getAuthorizationURL(context) 4open(url, '_blank', 'noopener')
getAuthorizationCode
Parameters
Get the authorization code from the callback endpoint.
context- Context - The context object returned fromcreateContext.
Example
1import { getAuthorizationCode } from '@lazy/oauth2-authorization-code-pkce-client/get-authorization-code.js' 2 3const response = await getAuthorizationCode(context)
Returns Promise<AuthorizationSuccessResponse>
getAccessToken
Exchange an authorization code for an access token.
Parameters
context- Context - The context object returned fromcreateContext.response- AuthorizationSuccessResponse - The Authorization Code response.
Example
1import { getAccessToken } from '@lazy/oauth2-authorization-code-pkce-client/get-access-token.js' 2 3const credentials = await getAccessToken(context, response)
Returns Promise<AccessTokenSuccessResponse>
Submodules
There 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:
@lazy/oauth2-authorization-code-pkce-client/authorization-code-error.js@lazy/oauth2-authorization-code-pkce-client/create-context.js@lazy/oauth2-authorization-code-pkce-client/get-access-token.js@lazy/oauth2-authorization-code-pkce-client/get-authorization-code.js@lazy/oauth2-authorization-code-pkce-client/get-authorization-url.js@lazy/oauth2-authorization-code-pkce-client/handle-authorization-code-callback.js@lazy/oauth2-authorization-code-pkce-client/handle-authorization-code-flow.js@lazy/oauth2-authorization-code-pkce-client/register-callback.js@lazy/oauth2-authorization-code-pkce-client/register-web-component.js
No vulnerabilities found.
No security vulnerabilities found.