https://github.com/aidant/lazy-oauth2-implicit-grant-client
A simple OAuth 2.0 Implicit Grant client for the lazy developer.
https://github.com/aidant/lazy-oauth2-implicit-grant-client
authentication grant implicit oauth oauth2
Last synced: about 1 month ago
JSON representation
A simple OAuth 2.0 Implicit Grant client for the lazy developer.
- Host: GitHub
- URL: https://github.com/aidant/lazy-oauth2-implicit-grant-client
- Owner: aidant
- Created: 2021-09-09T11:39:52.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-18T05:23:47.000Z (almost 4 years ago)
- Last Synced: 2025-09-28T00:37:46.183Z (5 months ago)
- Topics: authentication, grant, implicit, oauth, oauth2
- Language: TypeScript
- Homepage: https://github.com/aidant/lazy-oauth2-implicit-grant-client
- Size: 11.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Lazy OAuth 2.0 Implicit Grant Client
A simple OAuth 2.0 Implicit Grant client for the lazy developer.
---
## Table of Contents
- [Example](#example)
- [API](#api)
- [`handleImplicitGrantFlow`]
- [`handleImplicitGrantCallback`]
- [`createImplicitGrantURL`]
- [`getImplicitGrantResponse`]
## Example
```ts
import {
handleImplicitGrantFlow,
handleImplicitGrantCallback,
} from '@lazy/oauth2-implicit-grant-client'
handleImplicitGrantCallback()
const button = document.createElement('button')
button.textContent = 'Login'
button.addEventListener('click', () => {
const response = await handleImplicitGrantFlow('https://api.example.com/authorize', {
client_id: 'example-client-id',
})
const token = `${response.token_type} ${response.access_token}`
console.log(token)
})
```
## API
### `handleImplicitGrantFlow`
The [`handleImplicitGrantFlow`] function handles the Implicit Grant
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 `handleImplicitGrantCallback` function then handles the response
and returns it back via the promise from `handleImplicitGrantFlow` - just like
magic.
#### Parameters
- `endpoint` - **string** - The Authorization endpoint of the OAuth 2.0 provider.
- `parameters` - _object_ - The OAuth 2.0 parameters such as; `client_id`, `scope`, and/or `redirect_uri`.
#### Example
```ts
import { handleImplicitGrantFlow } from '@lazy/oauth2-implicit-grant-client'
const button = document.createElement('button')
button.textContent = 'Login'
button.addEventListener('click', () => {
const response = await handleImplicitGrantFlow('https://api.example.com/authorize', {
client_id: 'example-client-id',
})
const token = `${response.token_type} ${response.access_token}`
console.log(token)
})
```
Returns `Promise`
### `handleImplicitGrantCallback`
The [`handleImplicitGrantCallback`] function is responsible for returning the
response from the authentication endpoint back to the
[`handleImplicitGrantFlow`] function. If you call the
[`handleImplicitGrantFlow`] and [`handleImplicitGrantCallback`] functions in the
same page make sure you call the [`handleImplicitGrantCallback`] function before
the [`handleImplicitGrantFlow`].
#### Example
```ts
import { handleImplicitGrantCallback } from '@lazy/oauth2-implicit-grant-client'
handleImplicitGrantCallback()
```
Returns `void`
### `createImplicitGrantURL`
The [`createImplicitGrantURL`] function allows you to create a URL that can be
used in the dom on anchor tags or the like to improve accessability over buttons
with click handlers.
This URL should only be used once, if you need you can call
[`createImplicitGrantURL`] multiple times to get several url's.
#### Parameters
- `endpoint` - **string** - The Authorization endpoint of the OAuth 2.0 provider.
- `parameters` - _object_ - The OAuth 2.0 parameters such as; `client_id`, `scope`, and/or `redirect_uri`.
#### Example
```ts
import { createImplicitGrantURL } from '@lazy/oauth2-implicit-grant-client'
const url = createImplicitGrantURL('https://api.example.com/authorize', {
client_id: 'example-client-id',
})
const a = document.createElement('a')
a.href = url.href
a.target = '_blank'
a.rel = 'noopener'
a.textContent = 'Login'
a.addEventListener(
'click',
() => {
a.remove()
},
{ once: true }
)
document.append(a)
```
Returns `URL`
### `getImplicitGrantResponse`
#### Parameters
- `url` - **URL** - The URL that started the OAuth 2.0 Flow.
#### Example
```ts
import {
createImplicitGrantURL,
getImplicitGrantResponse,
} from '@lazy/oauth2-implicit-grant-client'
const url = createImplicitGrantURL('https://api.example.com/authorize', {
client_id: 'example-client-id',
})
const a = document.createElement('a')
a.href = url.href
a.target = '_blank'
a.rel = 'noopener'
a.textContent = 'Login'
a.addEventListener(
'click',
async () => {
a.remove()
const response = await getImplicitGrantResponse(url)
const token = `${response.token_type} ${response.access_token}`
console.log(token)
},
{ once: true }
)
document.append(a)
```
Returns `Promise`
[`handleimplicitgrantflow`]: #handleimplicitgrantflow
[`handleimplicitgrantcallback`]: #handleimplicitgrantcallback
[`createimplicitgranturl`]: #createimplicitgranturl
[`getimplicitgrantresponse`]: #getimplicitgrantresponse