SDK Roles

Use tenant user roles in your React app to show or hide UI based on who signed in. After login, the SDK loads the user's assigned roles automatically — you read them with useBlockAuthUser().

SDK Quickstart

1. Prerequisites

Complete the SDK Quickstart (FlowBlockAuth + DropdownProfile).
Use @block-auth.io/blockauth-sdk-react >= 0.8.8.
In the Dashboard, under Users management:
- Create roles in the Roles tab.
- Assign them to users in the Users tab.

Roles belong to the tenant. After sign-in, the SDK returns the roles assigned to that user. Use the role name in code (e.g. admin). Checks are case-insensitive.

2. Example

import { useState } from "react";
import {
  FlowBlockAuth,
  DropdownProfile,
  useBlockAuthUser,
} from "@block-auth.io/blockauth-sdk-react";

const config = {
  api_key: "YOUR_API_KEY",
  api_secret: "YOUR_API_SECRET",
};

export default function App() {
  const [isLogged, setIsLogged] = useState(false);
  const { roleNames, hasRole, isLoadingUser } = useBlockAuthUser();

  if (!isLogged) {
    return (
      <FlowBlockAuth
        apiKey={config.api_key}
        apiSecret={config.api_secret}
        onSuccess={() => setIsLogged(true)}
      />
    );
  }

  return (
    <>
      <DropdownProfile
        apiKey={config.api_key}
        apiSecret={config.api_secret}
        onLogout={() => setIsLogged(false)}
      />

      <div className="mt-6 rounded-lg border p-4">
        {isLoadingUser ? (
          <p>Loading roles…</p>
        ) : (
          <>
            <p>
              Your roles:{" "}
              <strong>{roleNames.length > 0 ? roleNames.join(", ") : "none"}</strong>
            </p>
            {hasRole("admin") && (
              <p className="mt-2 font-semibold text-emerald-600">
                Admin area unlocked
              </p>
            )}
          </>
        )}
      </div>
    </>
  );
}

Understanding the code

useBlockAuthUser() — reads the signed-in user's tenant roles. The SDK fetches them automatically after a successful sign-in.
roleNames — array of role names assigned to the user.
hasRole('admin') — returns true if the user has that role. Replace "admin" with any name from your tenant.
isLoadingUser — true while the profile is loading. Wait before rendering role-dependent UI.
DropdownProfile — keep it mounted so the SDK session stays active and roles remain available.

When roles change in the Dashboard, the SDK refreshes them automatically. You can also call refreshUserProfile() to reload manually.

3. useBlockAuthUser

import { useBlockAuthUser } from "@block-auth.io/blockauth-sdk-react";

const {
  user,           // full profile, or null
  roleNames,      // ["admin", "editor"]
  hasRole,        // (name) => boolean
  isLoadingUser,  // boolean
  refreshUserProfile, // () => Promise<profile | null>
} = useBlockAuthUser();

Value	Description
`user`	Signed-in user profile, including `roles`, or `null`.
`roles`	Role objects: `{ name, slug }[]`.
`roleNames`	Role names only.
`roleSlugs`	Role slugs only.
`isLoadingUser`	`true` while the profile is being fetched.
`hasRole(name)`	Check one role by name.
`hasRoleBySlug(slug)`	Check one role by slug.
`hasAnyRole(names)`	Check if the user has any of the given names.
`hasAnyRoleBySlug(slugs)`	Check if the user has any of the given slugs.
`refreshUserProfile()`	Re-fetch the profile from Block-Auth.