DIY Quick Start Guide – Node.js

Last updated 10/12/2022

To integrate Bread & Butter into your website, you’ll need to use our Javascript Library for the frontend UI/interface, and our Node.js library to connect to your backend (if needed).

Step 1: Client Side Implementation

Our Javascript Library can be found here:

https://github.com/breadbutter/breadbutter-js

The following snippet initializes Bread & Butter on your website and prompts the user to authenticate with the Continue With widget. This is usually placed in the header or template page to make sure it is run on all pages of your website.

<script>
window.initBreadButter = function() {
        BreadButter.configure({ app_id: APP_ID });
        BreadButter.ui.continueWith();
    };
    (function(d, s, id){ var js,fjs=d.getElementsByTagName(s)[0]; if(d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = 'https://cdn.breadbutter.io/dist/breadbutter.6.1.0.674.min.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'breadbutter-js'));
</script>

NOTE: The version in the JS src file is static. You will need to update the version to take advantage of new features (ie: https://cdn.breadbutter.io/dist/breadbutter.6.1.0.674.min.js)

Code within the initBreadButter method will be called once the JSL is loaded.

The following will configure the JSL for your app. Every page that has the JSL configured will gather user analytics that will be displayed in your dashboard.

BreadButter.configure({ app_id: APP_ID });

NOTE: APP_ID needs to be replaced by the app id corresponding to your app. It can be found here:

https://app.breadbutter.io/app/#/app-settings

The following will trigger the continueWith widget to prompt users that are not logged in to do so. This can be removed on pages where you don’t want your users to be prompted to login.

BreadButter.ui.continueWith();

You can use it to display login options on your website and allow users to authenticate with different providers like Google, etc.

Step 2: Server Side Implementation (Node.js)

Once the user’s authentication is processed by Bread & Butter, the user is redirected to a callback interface defined in your Bread & Butter app. The example below is a simple interface that accepts the request from Bread & Butter and processes the authentication.

After the interface is created you will need to update and enable the Callback URL with the URL to this interface in your app settings here:

https://app.breadbutter.io/app/#/app-settings

Processing an authentication request

You can find the Node.js server library here:

https://github.com/breadbutter/breadbutter-node

Create a new Bread & Butter client

APP_ID can be found at:

https://app.breadbutter.io/app/#/app-settings

APP_SECRET can be created under Advanced Settings at:

https://app.breadbutter.io/app/#/app-settings

const client = require('breadbutter-nodejs')('APP_ID', 'APP_SECRET');

Retrieve authentication from Bread & Butter server:

You can find the detailed API response here:

https://breadbutter.io/api/server-api/

//NOTE: This could be different based on what server you are using.
// If you are using Express
const authToken = req.query.authentication_token;

client.getAuthentication(authToken).then((response) => {
    const authData = response.auth_data;

    const emailAddress = authData.email_address;
    const firstName = authData.first_name;
    const lastName = authData.last_name;
    const profileImage = authData.profile_image_url;
});

//Use information above to create user in your system, create a session, etc

Redirect the user back to your website

//NOTE: This could be different based on what server you are using.
//If you are using Express
app.use(function(req, res) {
    const authToken = req.query.authentication_token;
    client.getAuthentication(authToken).then((response) => {
        const authData = response.auth_data;

        const destinationURL = response.options.destination_url;
        res.redirect(destinationURL);

        // For plain solution:
        // res.writeHead(301, {
        //     Location: destinationURL
        // }).end();
    });
});