Authenticating Users with ssoExchange

The Arena Comment System supports integration with your website's authentication system, allowing users who are already authenticated on your website to be seamlessly authenticated in the Comment System using the ssoExchange function. This function should be called after the Arena Comment System is fully loaded, which can be detected using the arena-loaded event.

📘

Note

Ensure you have completed the base installation before proceeding with this step

Implementation Steps

Listen for the arena-loaded Event

Register an event listener for the arena-loaded event to ensure the Arena Comment System is initialized before attempting authentication.

Call ssoExchange()

Use the window.arena.auth.ssoExchange method to pass user authentication details from your website to the Arena Comment System. The function accepts an object containing the provider details and user profile information.

Code Example

document.addEventListener('arena-loaded', () => {
    window.arena.auth.ssoExchange({
        "provider": "[YOUR-SITE-SLUG]",
        "username": "user-test-3265722",
        "profile": {
            "profileImage": "https://placehold.co/60x60.jpg",
            "urlName": "1671553865710",
            "email": "[email protected]",
            "username": "user-test-3265722",
            "displayName": "User Test 3265722",
            "name": {
                "familyName": "Test",
                "givenName": "User"
            }
        }
    });
});

• provider: Your Arena site slug. You can get this value from your dashboard or directly with your account manager.
• username: The unique username of the authenticated user.
• profile: An object containing user details:
  • profileImage: A URL to user profile image.
  • urlName: A unique identifier for the user's profile URL.
  • email: The user's email address.
  • username: The user's username (must match the top-level username).
  • displayName: The name displayed in the Comment System.
  • name: An object with familyName and givenName for the user's full name.

Overriding Arena's signup modal

The Arena Comment System allows users to override the default authentication modal by enabling a custom login flow. This can be achieved by adding a specific flag to the Comment System's div element and registering an event listener to handle the login modal trigger.

📘

Note

Ensure you have completed the base installation before proceeding with this step

Implementation Steps

1. Add the Custom Login Flag

To enable the custom login override, include the data-custom-login-enabled="true" attribute in the Comment System's div element. This flag informs the system to bypass the default authentication modal and trigger a custom event instead.

Example:

<div class="arena-comments-widget" 
     data-site-slug="[YOUR-SITE-SLUG]" 
     data-custom-login-enabled="true">
</div>

• data-site-slug: Replace "your-site-slug" with your site's unique identifier.
• data-custom-login-enabled: Set to "true" to enable the custom login override.

2. Register the Event Listeners

Open login Modal

Add an event listener for the arena-open-login-modal event to handle the custom login logic. This event is dispatched when the user attempts to interact with the Comment System in a way that requires authentication (e.g., posting a comment).

Example:

document.addEventListener('arena-open-login-modal', (event) => {
    console.log('Custom login modal triggered:', event);
    // Implement your custom login modal or authentication flow here
});

The event object contains details about the trigger, which can be used to customize the login experience.

Replace the console.log with your custom logic, such as opening a bespoke login modal or redirecting to an authentication provider.

Logout (optional)

When the user clicks the logout button, they will be logged out of their account, regardless of whether the app is listening to the arena-comments-logout event. This event is dispatched after the logout completes and can be used to trigger post-logout actions (e.g., sending analytics events).

Example:

document.addEventListener('arena-comments-logout', (event) => {
    console.log('Logout triggered:', event);
    // Implement your post-logout actions here
});