import { useAuth0 } from '@auth0/auth0-react';
import { CharWidget } from '@char-ai/widget';
import { useEffect } from 'react';

function App() {
  const { isAuthenticated, getIdTokenClaims } = useAuth0();

  useEffect(() => {
    if (isAuthenticated) {
      getIdTokenClaims().then((claims) => {
        if (claims) {
          CharWidget.init({
            siteId: 'your-site-id',
            userToken: claims.__raw,
          });
        }
      });
    }
  }, [isAuthenticated, getIdTokenClaims]);

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

// pages/api/token.js - API route to get token server-side
import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';

export default withApiAuthRequired(async function token(req, res) {
  const { accessToken } = await getAccessToken(req, res, {
    scopes: ['openid', 'profile', 'email'],
  });
  res.json({ accessToken });
});

// Client-side component
import { useUser } from '@auth0/nextjs-auth0/client';
import { CharWidget } from '@char-ai/widget';
import { useEffect } from 'react';

export default function App() {
  const { user } = useUser();

  useEffect(() => {
    if (user) {
      fetch('/api/token')
        .then((res) => res.json())
        .then(({ accessToken }) => {
          CharWidget.init({
            siteId: 'your-site-id',
            userToken: accessToken,
          });
        });
    }
  }, [user]);

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