SSO Integration

Overview

Single Sign-On (SSO) allows you to identify users who are already logged into your application. This enables you to:

Track which users submitted feedback
Maintain user context across your app and the widget

Setting Up SSO

Step 1: Generate an SSO Secret

Go to your Thoughtbase dashboard
Navigate to Settings → SSO
Generate or copy your SSO secret

Important: Keep your SSO secret secure! Never expose it in client-side code.

Step 2: Create SSO Tokens in Your Backend

When a user logs into your application, generate a JWT token signed with your SSO secret:

import { SignJWT } from "jose";

const secret = new TextEncoder().encode("your-sso-secret");

const ssoToken = await new SignJWT({
  userId: user.id,
  email: user.email,
  organizationId: "your-org-id",
})
  .setProtectedHeader({ alg: "HS256" })
  .setIssuedAt()
  .setExpirationTime("1h")
  .sign(secret);

After initializing the widget and when a user logs in, call the identify function:

<script>
  // Initialize widget
  window.thoughtbase.initWidget({
    organizationId: 'your-organization-id-here'
  });
  
  // After user logs in on your site
  function onUserLogin(user) {
    // Get SSO token from your backend
    fetch('/api/generate-sso-token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ userId: user.id })
    })
    .then(response => response.json())
    .then(data => {
      // Identify user in widget
      window.thoughtbase.identify(data.token);
    });
  }
</script>

SSO Token Format

Your SSO token should be a JWT with the following payload:

{
  "userId": "user-id-from-your-system",
  "email": "user@example.com",
  "organizationId": "your-thoughtbase-org-id"
}

The token should be signed with your SSO secret using HS256 algorithm.

Backend Integration

You’ll need to create an endpoint in your backend to generate SSO tokens. Here’s an example using Node.js:

import { SignJWT } from "jose";
import express from "express";

const app = express();

app.post("/api/generate-sso-token", authenticateUser, async (req, res) => {
  const { user } = req; // Your authenticated user

  const secret = new TextEncoder().encode(
    process.env.THOUGHTBASE_SSO_SECRET // Your SSO secret from Thoughtbase
  );

  const token = await new SignJWT({
    userId: user.id,
    email: user.email,
    organizationId: process.env.THOUGHTBASE_ORG_ID,
  })
    .setProtectedHeader({ alg: "HS256" })
    .setIssuedAt()
    .setExpirationTime("1h")
    .sign(secret);

  res.json({ token });
});

Complete Integration Example

Here’s a complete example of integrating the widget with SSO:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Site</h1>
  
  <!-- Your custom feedback button -->
  <button id="feedback-btn">Give Feedback</button>
  
  <!-- Load widget script -->
  <script src="https://app.thoughtbase.app/widget.js"></script>
  
  <!-- Initialize widget -->
  <script>
    // Initialize widget with custom button
    window.thoughtbase.initWidget({
      organizationId: 'your-organization-id-here',
      selector: '#feedback-btn'
    });
    
    // Example: Identify user after login
    async function handleUserLogin(userId) {
      try {
        // Get SSO token from your backend
        const response = await fetch('/api/generate-sso-token', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ userId })
        });
        
        const { token } = await response.json();
        
        // Identify user in widget
        if (window.thoughtbase) {
          window.thoughtbase.identify(token);
        }
      } catch (error) {
        console.error('Failed to identify user:', error);
      }
    }
    
    // Call this when user logs in
    // handleUserLogin(currentUserId);
  </script>
</body>
</html>

Security Best Practices

Token Security

Never expose your SSO secret in client-side code
Generate tokens server-side only
Use appropriate token expiration times (recommended: 1 hour)
Validate user authentication before generating tokens

Secret Management

Store secrets securely: Use environment variables
Rotate secrets regularly: Change your SSO secret periodically

Next Steps

Learn about Advanced SSO Integration with metadata, avatars, and revenue tracking
Review the API Reference for detailed function documentation
Test your SSO integration in a development environment
Monitor token generation and usage