A Block is the container you configure to add 36Blocks to one app. It holds your login/signup methods, branding, session settings, and the widgets your users interact with. Everything in this guide happens inside a single Block.

Create a new Block from the dashboard. This gives you a working configuration you can adjust before going live.

Under the Service tab, choose which login/signup methods your Block supports. Google and Apple sign-in work out of the box using our shared credentials. If you'd rather use your own Google/Apple app credentials, enter them under the Service tab's credentials section.

Under the Branding tab, set the branding details (logo, colors, name, etc.) shown on your widgets.

Under the Setting tab, set Session Time: how long, in seconds, a session stays valid if the user doesn't log out.

Once login methods, branding, and session settings are configured, finish setting up the Block so it's ready to use.

Copy the Authentication widget's (type: authorization) embed code and add it to your login page:

<div id="3622180b17824553746a3e1c4e0a9b5"></div>

<script type="text/javascript">
    var configuration = {
        referenceId: '3622180b17824553746a3e1c4e0a9b5',
        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://proxy.msg91.com/assets/proxy-auth/proxy-auth.js"
></script>

Once a user successfully logs in, 36Blocks redirects the browser to your configured redirect URL with proxy_auth_token (and a refresh_token) in the query string. See for the full list.

Use that proxy_auth_token to call GET /c/getDetails and retrieve the user's info.

Use the Preview Widgets option to get embed code for all four widgets (Authentication, Profile, Management, Organization). The three non-Authentication previews start locked: you'll need to authenticate through the preview Authentication widget first to unlock them.

Widgets

: embed the other three widgets.

Session & Authorization

: decide how your backend represents a session.

Refresh Tokens

: keep users signed in.