How to get User Profile information

When a visitor verifies with a Bread & Butter tool, for example by clicking "Continue with Google" or "Continue with LinkedIn", Bread & Butter holds their basic profile. The BreadButter.getProfile() call makes that profile available to your own website's JavaScript, so you can fill in a form, greet the visitor by name, or save the details to your own database.

In short: Once the Bread & Butter script is on the page, call BreadButter.getProfile() and it returns three things to your callback: user_profile (email address, first name, last name and profile image URL), suggested_provider (the sign-in option the visitor used, such as LinkedIn or Google) and device_verified (true when the visitor has verified on this device). Only the fields the visitor actually shared are filled in, so always check a value exists before you use it.

Before you start

The Bread & Butter script must already be installed on the page where you make the call. If you use the WordPress plugin it's added for you. On any other site, add the snippet from Settings, then App & Domains, as described in JavaScript Snippet.

The call

BreadButter.getProfile((user_profile, suggested_provider, device_verified) => {
    console.log('GET PROFILE CALL COMPLETE');
});

The callback runs once Bread & Butter has checked the current visitor. Put your own code inside it.

What the callback returns

user_profile

The visitor's basic profile, as shared through the provider they chose.

Field	What it holds
`user_profile.email_address`	The visitor's email address
`user_profile.first_name`	Their first name
`user_profile.last_name`	Their last name
`user_profile.profile_image_url`	An absolute URL to their profile image

A field is only filled in if the visitor shared it. A visitor who verified with an email address alone, for example, may have no profile image.

suggested_provider

The sign-in option the visitor used, which you can use to show them the same button first next time.

Field	What it holds	Example
`suggested_provider.idp`	The provider, as a short code	`"linkedin"` , `"github"` , `"microsoft"`
`suggested_provider.name`	A descriptive name for the provider	`"BreadButter GitHub"`
`suggested_provider.type`	The kind of sign-in	`"social"`

device_verified

A true or false value. It is true when the visitor has verified on this device, and false when they haven't, in which case there's no profile to use yet.

Example: fill in a form automatically

This fills the email and name fields of a form for a visitor who has already verified. Change the selectors to match your own form.

BreadButter.getProfile((user_profile, suggested_provider, device_verified) => {
    if (!device_verified || !user_profile) {
        return; // Nothing to fill in yet
    }
 
    const fill = (selector, value) => {
        const field = document.querySelector(selector);
        if (field && value) {
            field.value = value;
        }
    };
 
    fill('#email', user_profile.email_address);
    fill('#first-name', user_profile.first_name);
    fill('#last-name', user_profile.last_name);
});

If you save the profile to your own database, handle it like any other personal data you collect and cover it in your privacy policy.