Repository: freeCodeCamp/freeCodeCamp
File: client/src/components/settings/exam-token.tsx (TypeScript)

Code before:
import { generateExamToken } from '../../utils/ajax';

function ExamToken(): JSX.Element {
  const [examToken, setExamToken] = useState('');
  const [examTokenError, setExamTokenError] = useState('');

  const [recentlyGenerated, setRecentlyGenerated] = useState(false);
  const [generatedExamToken, setGeneratedExamToken] = useState(false);

  const [copySuccess, setCopySuccess] = useState('');
  const [copyError, setCopyError] = useState('');

  const debouncedSetRecentlyGenerated = () => {
    setRecentlyGenerated(true);
    setTimeout(() => setRecentlyGenerated(false), 10000);
  };
  const { t } = useTranslation();

  const getToken = async () => {
    try {
      const response = await generateExamToken();

      const {
        data: { data: token }
      } = response;
      setExamToken(token.examEnvironmentAuthorizationToken);
      setExamTokenError('');
    } catch (e) {
      setExamTokenError(t('exam-token.error'));
    }

    debouncedSetRecentlyGenerated();
  };

  return (
    <FullWidthRow>
      <Modal
        open={generatedExamToken}
        onClose={() => {
          setGeneratedExamToken(false);
          setCopySuccess('');
          setCopyError('');
        }}
      >
        <Modal.Header>{t('exam-token.exam-token')}</Modal.Header>
        <Modal.Body>
          {examToken && (
            <p style={{ wordBreak: 'break-word' }}>
              {t('exam-token.your-exam-token', {
                token: examToken
              })}

Review comment (security):
```suggestion
      const {
        data: {
          data: { examEnvironmentAuthorizationToken }
        }
      } = response;
      setExamToken(examEnvironmentAuthorizationToken);
```

Code after:
import { generateExamToken } from '../../utils/ajax';

function ExamToken(): JSX.Element {
  const [examToken, setExamToken] = useState<string | null>(null);
  const [examTokenError, setExamTokenError] = useState<string | null>(null);

  const [recentlyGenerated, setRecentlyGenerated] = useState(false);

  const [copySuccess, setCopySuccess] = useState<string | null>(null);
  const [copyError, setCopyError] = useState<string | null>(null);

  const { t } = useTranslation();

  const getToken = async () => {
    try {
      const response = await generateExamToken();

      const {
        data: {
          data: { examEnvironmentAuthorizationToken }
        }
      } = response;
      setExamToken(examEnvironmentAuthorizationToken);
      setExamTokenError('');
    } catch (e) {
      setExamTokenError(t('exam-token.error'));
    }

    setRecentlyGenerated(true);
    setTimeout(() => setRecentlyGenerated(false), 10000);
  };

  return (
    <FullWidthRow>
      <Modal
        open={!!examToken}
        onClose={() => {
          setExamToken(null);
          setCopySuccess(null);
          setCopyError(null);
        }}
      >
        <Modal.Header>{t('exam-token.exam-token')}</Modal.Header>
        <Modal.Body>
          {examToken && (
            <p style={{ wordBreak: 'break-word' }}>
              {t('exam-token.your-exam-token', {
                token: examToken
              })}
            </p>
          )}