Widgets

36Blocks gives you four embeddable widgets. Each one is a small snippet you add to a page in your app; 36Blocks renders the UI and handles the logic behind it. All four load https://36blocks.com/assets/proxy-auth/proxy-auth.js and call initVerification(configuration). The type in the configuration selects which UI renders.

Widget type What it does Needs
Authentication authorization Login and sign-up for your users, using the methods you enabled on your Block. Block referenceId
Organization organization-details Lets a user view and edit their current company's details. Editing requires the update_c_company permission. The user's authToken
Management user-management Lists the current company's members. With the right permission, a user can change other members' roles, remove them, or invite new ones. The user's authToken
Profile user-profile Lets a user view and edit their own details, and view or leave the companies they belong to. The user's authToken

The authToken is the signed-in user's proxy_auth_token. Read it from your own session, never hard-code it.

#

Authentication widget

Place it on your login page. It needs your Block's reference ID.

<div id="YOUR_BLOCK_REFERENCE_ID"></div>

<script type="text/javascript">
    var configuration = {
        referenceId: 'YOUR_BLOCK_REFERENCE_ID',
        type: 'authorization',
        success: (data) => {
            console.log('success response', data);
        },
        failure: (error) => {
            console.log('failure reason', error);
        },
    };
</script>
<script
    type="text/javascript"
    onload="initVerification(configuration)"
    src="https://36blocks.com/assets/proxy-auth/proxy-auth.js"
></script>

Replace YOUR_BLOCK_REFERENCE_ID with your Block's reference ID. After a successful login, 36Blocks redirects the browser to your Block's redirect URL with ?proxy_auth_token=... in the query string.

Options:

  • state: any value you pass is echoed back unchanged on the redirect after login. See Redirect Parameters.

  • addInfo.redirect_path: redirects the user somewhere other than the Block's default redirect URL after login. See Redirect Parameters.

#

Profile, Management and Organization widgets

These three widgets are for a signed-in user. They use a container with the id userProxyContainer and take the user's proxy_auth_token as authToken. Only type changes between them.

Profile (user-profile): account settings and "my profile" pages.

<div id="userProxyContainer"></div>

<script type="text/javascript">
    var configuration = {
        type: 'user-profile',
        authToken: 'ENCRYPTED_AUTH_TOKEN', // the user's proxy_auth_token
        success: (data) => {
            console.log('success response', data);
        },
        failure: (error) => {
            console.log('failure reason', error);
        },
    };
</script>
<script
    type="text/javascript"
    onload="initVerification(configuration)"
    src="https://36blocks.com/assets/proxy-auth/proxy-auth.js"
></script>

Management (user-management): team and member management for the current company. Use the same snippet with type: 'user-management'.

Organization (organization-details): organization or workspace settings for the current company. Use the same snippet with type: 'organization-details'.

#

Which widget for which page

You are building Use
A login or sign-up page authorization
A page where admins invite teammates, change roles or remove users user-management
An account settings or "my profile" page, including the list of companies a user belongs to user-profile
An organization or workspace settings page organization-details

A settings area often needs more than one. For example, user-profile plus organization-details, and user-management if there is a team angle.

#

Previewing widgets

Use Preview Widgets in the dashboard to get embed code for all four widgets. The Profile, Management and Organization previews start locked. Sign in through the preview Authentication widget first to unlock them.

#

Where signed-in widgets get their data

The Profile, Management and Organization widgets work for the user who is currently signed in, and respect that user's role and permissions in their current company. See Companies & Users and Roles & Permissions.