User
/
Overview
Last updated

User

The User component displays authenticated user information and provides login/logout functionality.

Usage

<fluid-user></fluid-user>

Attributes

AttributeTypeDefaultDescription
hide-widgetbooleanfalseWhether to hide the component
class-namestring—Additional CSS classes

Display Options

AttributeTypeDefaultDescription
show-avatarbooleantrueShow user avatar
show-namebooleantrueShow user name
show-emailbooleanfalseShow user email
show-logoutbooleantrueShow logout button when authenticated
login-textstring'Sign In'Text for login button
logout-textstring'Sign Out'Text for logout button

Examples

Basic User Display

<fluid-user></fluid-user>

Compact with Avatar Only

<fluid-user
  show-name="false"
  show-avatar="true"
></fluid-user>

With Email Display

<fluid-user
  show-email="true"
  show-avatar="true"
></fluid-user>

Custom Button Text

<fluid-user
  login-text="Log In"
  logout-text="Log Out"
></fluid-user>

JavaScript API

// Get authenticated user
const user = window.FairShareSDK.getAuthenticatedUser();

if (user) {
  console.log('User ID:', user.id);
  console.log('Name:', user.name);
  console.log('Email:', user.email);
} else {
  console.log('No user authenticated');
}

// Set authentication (typically done after OAuth flow)
window.FairShareSDK.setAuthentication({
  token: "user-auth-token",
  user: { id: 123, name: "John Doe", email: "john@example.com" }
});
Previous page
Next page