# breadbutter-js
> Bread & Butter Javascript API client
Latest version **4.6.0** (published 2021-07-27) · 0 weekly downloads
## Install
```sh
npm install breadbutter-js
pnpm add breadbutter-js
yarn add breadbutter-js
bun add breadbutter-js
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 4.6.0 |
| Published | 2021-07-27 |
| First published | 2021-07-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 30 |
| Unpacked size | 4 MB |
| Known vulnerabilities | 0 (+10 in 4 direct dependencies) |
| Install scripts | no |
| Maintainers | breadbutter |
## Links
- npm: https://www.npmjs.com/package/breadbutter-js
- npm.io page: https://npm.io/package/breadbutter-js
## Dependencies (30)
- [husky](https://npm.io/package/husky.md) ^4.3.0
- [colors](https://npm.io/package/colors.md) ^1.1.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [moment](https://npm.io/package/moment.md) ^2.17.1
- [prompt](https://npm.io/package/prompt.md) ^1.0.0
- [stylus](https://npm.io/package/stylus.md) ^0.54.7
- [trello](https://npm.io/package/trello.md) ^0.7.0
- [connect](https://npm.io/package/connect.md) ^3.7.0
- [nodemon](https://npm.io/package/nodemon.md) ^1.19.4
- [webpack](https://npm.io/package/webpack.md) ^4.42.1
- [prettier](https://npm.io/package/prettier.md) 2.1.2
- [crypto-js](https://npm.io/package/crypto-js.md) ^3.3.0
- [node-sass](https://npm.io/package/node-sass.md) ^4.13.1
- [css-loader](https://npm.io/package/css-loader.md) ^2.1.1
- [superagent](https://npm.io/package/superagent.md) ^3.4.1
- [ttf-loader](https://npm.io/package/ttf-loader.md) ^1.0.2
- [url-loader](https://npm.io/package/url-loader.md) ^3.0.0
- [file-loader](https://npm.io/package/file-loader.md) ^5.1.0
- [sass-loader](https://npm.io/package/sass-loader.md) ^8.0.2
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.3.11
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [scss-compile](https://npm.io/package/scss-compile.md) ^0.1.7
- [serve-static](https://npm.io/package/serve-static.md) ^1.14.1
- [style-loader](https://npm.io/package/style-loader.md) ^0.23.1
- [es6-promisify](https://npm.io/package/es6-promisify.md) ^5.0.0
- [stylus-loader](https://npm.io/package/stylus-loader.md) ^3.0.2
- [superagent-promise](https://npm.io/package/superagent-promise.md) ^1.1.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.10.3
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) ^3.0.2
- [google-translate-api-browser](https://npm.io/package/google-translate-api-browser.md) ^1.1.71
## Recent versions
- 4.6.0 (latest) — 2021-07-27
## README
# BreadButter JavaScript
The official BreadButter JavaScript client library.
## Download
https://cdn.breadbutter.io/dist/breadbutter.4.6.0.282.min.js
## Configuration
- Prior to coding, some configuration is required at https://app.breadbutter.io/app/#/app-settings. Make sure you add your website url to the CORS Allow List.
- For the full Developer Documentation please visit: https://app.breadbutter.io/docs/api/
---
## Integrate with BreadButter with one simple front end script tag
- `APP_ID` can be found in [App Settings](https://app.breadbutter.io/app/#/app-settings)
### Example Website
```html
Bread & Butter Sample
```
### Continue with script tag
Inject this on your existing page to get started using with Bread & Butter with the Continue With widget.
```javascript
```
## Configure the global BreadButter client
```javascript
BreadButter.configure({
app_id,
api_path,
destination_url,
callback_url,
client_data,
force_reauthentication, //default false
app_name,
page_view_tracking, //default false
button_theme,
continue_with_position: {
top/bottom,
left/right
},
expand_email_address, //default true
show_login_focus, //default true
allow_sub_domain, //default true
remember_close, //default true
success_event_code
});
```
#### Configuration Details
Property | Description
--- | ---
app_id | [STRING] Unique identifier for your application. Find your app_id here: https://app.breadbutter.io/app/#/app-settings.
callback_url | [STRING] The Callback URL is the url that the user will be redirected to after they have authenticated with the provider. A default is set in your App Settings, this parameter is used if this instance of the widget needs to be redirected to a different location (ie, your test environment).
destination_url | [STRING] The Destination URL is the final destination for the user to be redirected. This is only required if your client side needs to tell your backend where to redirect the user.
app_name | [STRING] Application name that you want displayed in the JSL widgets.
client_data | [OBJECT] Client data is used to allow you to pass parameters from the client side to your backend which processes the authentication.
force_reauthentication | [STRING] [off/attempt/force] Force reauthentication for the provider when your user logs in (ie, disregard the user's current session if the providers supports it).
page_view_tracking | [BOOLEAN] [DEFFAULT: true] By default, the JSL will create events for all your user's page views. This parameter allows you to disable this feature.
button_theme| [STRING] [VALUES: round-icons/square-icons/tiles] [DEFAULT: 'round-icons'] This paremeter allows you to change the theme the provider buttons are displayed in your widgets.
expand_email_address | [BOOLEAN] [DEFFAULT: true] This parameter is used to expand the email address field on advanced discovery.
show_login_focus | [BOOLEAN] [DEFFAULT: true] Show the background blur for the continue with login on the advanced discovery.
continue_with_position | [OBJECT] [Example: {'top': '10px', 'right': '10px'}] Used for positioning the continue with widget. Will accept only 1 parameter for top/bottom and 1 parameter for left/right. Accepts 10, '10px', and '10%' for positioning.
allow_sub_domain | [BOOLEAN] [DEFAULT: false]
remember_close | [BOOLEAN] [DEFAULT: false]
success_event_code | [STRING]
## Widgets
### Continue With Widget
#### Global Overrides
Accepted global options (defined above) when using the Continue With widget:
```
app_name
destination_url
callback_url
client_data
force_reauthentication
button_theme
continue_with_position
expand_email_address
show_login_focus
remember_close
success_event_code
```
#### Parameters
Property | Description
--- | ---
mode | [STRING] Used to start the widget in a specific part of the workflow.
email_address | [STRING] Used to prefill the email address for the user if you already have it (ie, querystring parameter from an email)
pin | [STRING] This parameter takes a pin sent to the user in a one of the following workflows: Email confirmation, Invitation, Reset Password.
onFormClose | [FUNCTION] Function called when the Continue With widget is closed.
#### Basic Usage
```
BreadButter.widgets.continueWith();
BreadButter.widgets.continueWith({
email_address: USER_EMAIL
});
BreadButter.widgets.continueWith({
mode: BreadButter.mode.RESET_PASSWORD,
email_address: USER_EMAIL,
pin: EMAIL_PIN
});
BreadButter.widgets.continueWith({
mode: BreadButter.mode.CONFIRM_EMAIL,
email_address: USER_EMAIL,
pin: EMAIL_PIN
});
BreadButter.widgets.continueWith({
mode: BreadButter.mode.INVITATION,
email_address: USER_EMAIL,
pin: EMAIL_PIN //if invitation pin is available
});
```
#### Close Event
```
BreadButter.widgets.continueWith();
BreadButter.widgets.continueWith({
onFormClose: function() {
console.log("Continue With widget dismissed");
}
});
```
### Sign in Widget
#### Global Overrides
Accepted global options (defined above) when using the Continue With Widget:
```
app_name
destination_url
callback_url
client_data
force_reauthentication
button_theme
expand_email_address
success_event_code
```
#### Parameters
Property | Description
--- | ---
mode | [STRING] Used to start the widget in a specific part of the workflow.
email_address | [STRING] Used to prefill the email address for the user if you already have it (ie, querystring parameter from an email)
pin | [STRING] This parameter takes a pin sent to the user in a one of the following workflows: Email confirmation, Invitation, Reset Password.
#### Basic Usage
```
BreadButter.widgets.signIn(TARGET_DOM_ID);
BreadButter.widgets.signIn(TARGET_DOM_ID, {
email_address: USER_EMAIL
});
BreadButter.widgets.signIn(TARGET_DOM_ID, {
mode: BreadButter.mode.RESET_PASSWORD,
email_address: USER_EMAIL,
pin: EMAIL_PIN
});
BreadButter.widgets.signIn(TARGET_DOM_ID, {
mode: BreadButter.mode.CONFIRM_EMAIL,
email_address: USER_EMAIL,
pin: EMAIL_PIN
});
BreadButter.widgets.signIn(TARGET_DOM_ID, {
mode: BreadButter.mode.INVITATION,
email_address: USER_EMAIL,
pin: EMAIL_PIN //if invitation pin is available
});
```
### Buttons Widget
#### Buttons
```
BreadButter.widgets.buttons(TARGET_DOM_ID);
```
#### Icons
```
BreadButter.widgets.buttons(TARGET_DOM_ID, {
button_theme: ‘round-icons’
});
```
## Methods
### Custom API Events
Use this method to track specific events performed by your users.
```
BreadButter.events.custom(CUSTOM_API_EVENT_NAME, function() {
console.log(‘EVENT CALL COMPLETE’);
});
```
---
_Source: https://npm.io/package/breadbutter-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._