# @bitkub-blockchain/react-bitkubnext-oauth2

> ## Installation ```sh yarn add @bitkub-blockchain/react-bitkubnext-oauth2 ``` ## How to use ##### Step 1 : Connect with bitkub next for your UI-component ``` import { ReactBitkubNextOauth2 } from "@bitkub-blockchain/react-bitkubnext-oauth2"

Latest version **0.0.15** (published 2021-11-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bitkub-blockchain/react-bitkubnext-oauth2
pnpm add @bitkub-blockchain/react-bitkubnext-oauth2
yarn add @bitkub-blockchain/react-bitkubnext-oauth2
bun add @bitkub-blockchain/react-bitkubnext-oauth2
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.15 |
| Published | 2021-11-17 |
| First published | 2021-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rattanapol-bbt, moonshot-isman |

## Links

- npm: https://www.npmjs.com/package/@bitkub-blockchain/react-bitkubnext-oauth2
- npm.io page: https://npm.io/package/@bitkub-blockchain/react-bitkubnext-oauth2

## Recent versions

- 0.0.15 (latest) — 2021-11-17
- 0.0.14 — 2021-11-17
- 0.0.13 — 2021-11-17

## README

# React BitkubNext Oauth2
## Installation
```sh
yarn add @bitkub-blockchain/react-bitkubnext-oauth2
```
## How to use
##### Step 1 : Connect with bitkub next for your UI-component
```
import { ReactBitkubNextOauth2 } from "@bitkub-blockchain/react-bitkubnext-oauth2"

<ReactBitkubNextOauth2       
    clientId={"YOUR_CLIENT_ID"}
    redirectURI={"YOUR_OAUTH_REDIRECT_URI"}
>
    <button>connect with bitkub next</button>
</ReactBitkubNextOauth2>
```
==================
##### Step 2 : When Oauth2 Success, In your redirect uri will have code query string in your URL
```
import { exchangeAuthorizationCode } from '@bitkub-blockchain/react-bitkubnext-oauth2'

const handlerGetAccessToken = async () => {
    const { access_token, refresh_token } = await exchangeAuthorizationCode("YOUR_OAUTH_CLIENT_ID", "YOUR_OAUTH_REDIRECT_URI", code)
    // success
    alert(access_token)
    alert(refresh_token)
}

```
==================
##### Extra : Extend Your Access Token if you have a refresh token
```
import { exchangeRefreshToken } from '@bitkub-blockchain/react-bitkubnext-oauth2'

const handlerExtendAccessToken = async () => {
    const { access_token, refresh_token } = await exchangeRefreshToken("YOUR_OAUTH_CLIENT_ID", "YOUR_REFRESH_TOKEN")
    // success
    alert(access_token)
    alert(refresh_token)
}
```
==================
## ReactBitkubNextOauth2 Props
| Name          | Required      | Type          | Default value |
| :------------ | :----------:  | :----------:  | :----------:  |
| clientId      | true          | String        |               |
| redirectURI   | true          | String        |               |
| mode          | false         | 'new_tab' , 'popup' , 'redirect' |       "new_tab"        |
| state         | false         | String        |               |
| onClick       | false         | () => void    |               |

---
_Source: https://npm.io/package/@bitkub-blockchain/react-bitkubnext-oauth2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._