https://github.com/kevinedry/bindid-react
https://github.com/kevinedry/bindid-react
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kevinedry/bindid-react
- Owner: KevinEdry
- License: mit
- Created: 2021-03-28T13:53:28.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-22T15:11:56.000Z (about 5 years ago)
- Last Synced: 2025-06-01T06:18:19.632Z (about 1 year ago)
- Language: JavaScript
- Size: 359 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bindid-react
Please follow the [BindID Documentation](https://developer.bindid.io/docs/api/rest/topics/oidcAPIs/authorizationAPI/authorization_api) for further instructions
> easy intergration for a native react component with bindid
[](https://www.npmjs.com/package/bindid-react) [](https://standardjs.com)
## Install
```bash
npm install --save bindid-react
```
## Usage
### BindIDProvider
The BindIDProvider is responsible for initializing the BindID SDK. This can be used in a high order component and should receive the following parameters:
|Parameter| Type | Required
|--|--|--|
| clientId | string | ✓ |
| apiCompat | `latest` or `api-level-1` as string |✘ |
| disableStateValidation |boolean |✘ |
And the implementation as follows:
```jsx
import React, { Component } from 'react'
import { BindIDProvider } from 'bindid-react'
class Example extends Component {
render() {
return (
)
}
}
```
### LoginButton
The Login Button component is what the user sees in order to start the authentication process. it ships with a default UI that can be changed by pass `style` or a `className` parameter, you also will have to pass to it an `options` object with a redirect URI parameter.
The LoginButton can accept these parameters:
|Parameter| Type | Required
|--|--|--|
| options | object | ✓ |
| onCompleted | function |✘ |
| onError |function |✘ |
| className |string |✘ |
| style |object |✘|
The `options` object as follows:
|Parameter| Type | Required
|--|--|--|
| redirectUri | string | ✓ |
| scope | array of strings |✘ |
| verifications | array |✘ |
| otherLoginOptions | object |✘ |
| customMessage | string |✘|
The `LoginButton` component Implementation:
```jsx
import React, { Component } from 'react'
import { BindIDProvider, LoginButton } from 'bindid-react'
class Example extends Component {
render() {
const options = {
redirectUri: 'YOUR_REDIRECT_URI',
}
return (
)
}
}
```
The default `LoginButton` component styling will look like this:
## License
MIT © [KevinEdry](https://github.com/KevinEdry)