​

Okta Integration

​

Prerequisites

• An Okta organization (production or preview)
• Admin access to create applications in Okta
• Access to the Char AI dashboard

​

Quick Links

​

Configuration Steps

1

Create an OIDC Application in Okta

1. Sign in to your Okta Admin Console
2. Navigate to Applications → Applications
3. Click Create App Integration
4. Select OIDC - OpenID Connect as the sign-in method
5. Select Single-Page Application as the application type
6. Click Next

2

Configure Application Settings

Configure your new application:

Setting	Value
App integration name	Char AI Widget (or your preferred name)
Grant type	Authorization Code (with PKCE)
Sign-in redirect URIs	Your application’s callback URL
Sign-out redirect URIs	Your application’s logout URL
Controlled access	Assign to appropriate groups or allow everyone

Click Save to create the application.

3

Note Your Client ID and Domain

After creating the application:

1. Copy the Client ID from the application’s General tab
2. Note your Okta domain (e.g., acme.okta.com or acme.oktapreview.com)

Find your Client ID in the Okta application settings

4

Configure Char AI

In the Char AI Dashboard:

1. Navigate to Settings → Integration
2. Under SSO Configuration, select Okta as the provider
3. Enter your Client ID from Step 3
4. Enter your Okta domain (e.g., acme.okta.com)
5. Click Test Connection to verify
6. Click Save Changes

​

Configuration Reference

​

Token Requirements

​

Example: Obtaining and Passing the Token

import OktaAuth from '@okta/okta-auth-js';
import { CharWidget } from '@char-ai/widget';

const oktaAuth = new OktaAuth({
  issuer: 'https://acme.okta.com',
  clientId: '0oa1b2c3d4e5f6g7h8i9',
  redirectUri: window.location.origin + '/callback',
});

// After authentication
const tokens = await oktaAuth.tokenManager.getTokens();

CharWidget.init({
  siteId: 'your-site-id',
  userToken: tokens.idToken.idToken,
});

import { useOktaAuth } from '@okta/okta-react';
import { CharWidget } from '@char-ai/widget';
import { useEffect } from 'react';

function App() {
  const { authState } = useOktaAuth();

  useEffect(() => {
    if (authState?.isAuthenticated && authState.idToken) {
      CharWidget.init({
        siteId: 'your-site-id',
        userToken: authState.idToken.idToken,
      });
    }
  }, [authState]);

  return <div id="char-widget" />;
}

​

Troubleshooting

​

Security Best Practices

• Use HTTPS for all redirect URIs
• Restrict application access to only the users/groups who need it
• Regularly rotate tokens by implementing proper session management
• Monitor Okta system logs for suspicious authentication attempts