Getting Started
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.
Building the integration with code or an AI coding agent? Follow the Integration Guide for the end-to-end flow, and use this page for the dashboard setup.
The full flow from login page to logout, with code and token-storage guidance.
Create a Block
Create a new Block from the dashboard. This gives you a working configuration you can adjust before going live. Every Block has a reference ID (reference_id), which you need in the Authentication widget.
Choose login/signup methods
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.
Change branding details
Under the Branding tab, set the branding details (logo, colors, name, etc.) shown on your widgets.
Set session time
Under the Setting tab, set Session Time: how long, in seconds, a session stays valid if the user doesn't log out.
Finish setting up the Block
Once login methods, branding, and session settings are configured, finish setting up the Block so it's ready to use. Also set the Block's redirect URL: where 36Blocks sends the browser after a successful login.
Embed the Authentication widget
Copy the Authentication widget's (type: authorization) embed code and add it to your login page:
<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
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 Redirect Parameters for the full list.
Use that proxy_auth_token to call the Get Details endpoint (GET /c/getDetails) and retrieve the user's info.
Previewing widgets
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.
The authkey (for backend calls)
The widgets and signed-in calls above work from the Block's reference_id and the user's proxy_auth_token. Backend calls that act without a signed-in user, the Server-to-Server (Auth Key) module, authenticate with an authkey instead. The authkey is provided by 36Blocks to the owner of the 36Blocks account. It is not created in the Block setup above, and no API endpoint returns it, so code and AI agents cannot fetch it. When a task needs it, the value comes from the user.
Next steps
Embed the other three widgets.
Decide how your backend represents a session.
Keep users signed in.