Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/romankurnovskii/cognito-token-observer
https://github.com/romankurnovskii/cognito-token-observer
aws cognito observer react
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/romankurnovskii/cognito-token-observer
- Owner: romankurnovskii
- License: mit
- Created: 2022-08-26T08:02:58.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T07:36:38.000Z (18 days ago)
- Last Synced: 2024-10-28T14:24:01.618Z (17 days ago)
- Topics: aws, cognito, observer, react
- Language: TypeScript
- Homepage: https://npmjs.com/package/cognito-token-observer
- Size: 868 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# cognito-token-observer
[![NPM version][npm-image]][npm-url]
![npm-typescript]
[![License][github-license]][github-license-url]
[](https://github.com/romankurnovskii/cognito-token-observer)
[![Install size][install-size]][install-size-url]
## About
Monitors date expiration of access and id tokens provided by Amazon Cognito. Refreshes when expired.
### Use case
Authorize users with Amazon Cognito and use result token in 3rd party projects outside AWS.
## Example
[React app](example)
projects:
- https://www.cloud-exam-prepare.com/
## Installation:
```bash
npm install cognito-token-observer
```
or
```bash
yarn add cognito-token-observer
```
## Usage
Add `CognitoAuthObserver` to your component:
```js
import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom/client'
import { CognitoAuthObserver } from 'cognito-token-observer'
function App() {
const [userData, setUserData] = useState([])
const cognitoObserver = CognitoAuthObserver({ // init
clientId: process.env.REACT_APP_COGNITO_CLIENT_ID,
poolDomain: process.env.REACT_APP_COGNITO_POOL_DOMAIN,
redirectUrl: process.env.REACT_APP_COGNITO_REDIRECT_URI,
region: process.env.REACT_APP_COGNITO_REGION,
userPoolId: process.env.REACT_APP_COGNITO_USER_POOL_ID,
});
cognitoObserver.onTokenUpdate(() => { // callback on token update
setUserData(cognitoObserver.getUserData())
}, 'onTokenUpdateKey')
const getCodeFromBrowser = () => {
// get code after signin/up to aws cognito
// then pass to cognitoObserver
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
const code = params['code'];
}
const cognitoCode = getCodeFromBrowser()
useEffect(() => {
cognitoObserver.init(cognitoCode)
.then(isAuthenticated => {
console.log('Token updated:', isAuthenticated)
})
}, [])
return (
{JSON.stringify(userData)}
)
}
```
## Development
In the root package
```
npm run build
npm pack
# will create .tgz file cognito-token-observer-{x.x.x}.tgz
```
add path in example
```
cd example
```
Open `package.json`
change dependency from
```
"cognito-token-observer": "^x.x.x",
```
to the path
```
# in my case version 2.2.2.
"file:../cognito-token-observer-2.2.2.tgz"
```
## API
- **init(code?: string) => Promise**
CognitoObserver.init: (code?: string | undefined) => Promise
- **isActive()** => boolean
- **onTokenUpdate(callback, key)** key need to be unique. Used because of reference from react etc
- **getAccessToken()** => string | null
- **getIdToken()** => string | null
- **getUserData()** => userData:UserDataType
- **clearTokens()** remove localStorage tokens
[npm-url]: https://www.npmjs.com/package/cognito-token-observer
[npm-image]: https://img.shields.io/npm/v/cognito-token-observer
[github-license]: https://img.shields.io/github/license/romankurnovskii/cognito-token-observer
[github-license-url]: https://github.com/romankurnovskii/cognito-token-observer/blob/main/LICENSE
[npm-typescript]: https://img.shields.io/npm/types/cognito-token-observer
[install-size]: https://packagephobia.com/badge?p=cognito-token-observer
[install-size-url]: https://packagephobia.com/result?p=cognito-token-observer