ThoughtSpot For Developers•3mo ago

rajatgupta - Hi team, I am facing 401 Auth issu...

Hi team, I am facing 401 Auth issue while trying to access embedded liveboard. The initial embed SDK auth calls are successful and I receive SDK_SUCCESS but later on the following calls start to fail:

https://simpplr-dev.thoughtspot.cloud/callosum/v1/session/isactive
https://simpplr-dev.thoughtspot.cloud/prism/preauth/info 
https://simpplr-dev.thoughtspot.cloud/prism/?op=GetPersonalisedViews

https://simpplr-dev.thoughtspot.cloud/callosum/v1/session/isactive
https://simpplr-dev.thoughtspot.cloud/prism/preauth/info 
https://simpplr-dev.thoughtspot.cloud/prism/?op=GetPersonalisedViews

Can someone please help? Added code in thread

9 Replies

rajatguptaOP•3mo ago

We wrap ThoughtspotWrapper (which takes a flag for starting init call) over our routes:

<ThoughtSpotWrapper
isAppReadyForThoughtSpot={isAppReadyForThoughtSpot}>
Routes...
</ThoughtSpotWrapper>

<ThoughtSpotWrapper
isAppReadyForThoughtSpot={isAppReadyForThoughtSpot}>
Routes...
</ThoughtSpotWrapper>

import {
  getAuthTokenWithSecret,
  useThoughtSpotInit,
} from '../hooks/useThoughtSpotInit';


export const ThoughtSpotWrapper = ({
  children,
  isAppReadyForThoughtSpot,
}: any) => {
  const { isThoughtSpotInitialized } = useThoughtSpotInit(
    isAppReadyForThoughtSpot
  );
  return (
    <>
      {children}
    </>
  );
};

import {
  getAuthTokenWithSecret,
  useThoughtSpotInit,
} from '../hooks/useThoughtSpotInit';


export const ThoughtSpotWrapper = ({
  children,
  isAppReadyForThoughtSpot,
}: any) => {
  const { isThoughtSpotInitialized } = useThoughtSpotInit(
    isAppReadyForThoughtSpot
  );
  return (
    <>
      {children}
    </>
  );
};

```
import { useState, useEffect } from 'react';
import { AuthStatus, AuthType, init } from '@thoughtspot/visual-embed-sdk';

export const getAuthTokenWithSecret = async () => {
  const endpoint =
    'ENDPOINT';

  const data = {
    username: 'USERNAME',

    secret_key: 'SECRET_KEY',
  };

  const headers = {
    Accept: 'application/json',
    'X-Requested-By': 'ThoughtSpot',
    'Content-Type': 'application/json',
  };

  try {
    const response = await fetch(endpoint, {
      method: 'POST',
      headers,
      body: JSON.stringify(data),
    });
    const j = await response.json();
    return j.token;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
};

export const useThoughtSpotInit = (shouldInitialize = false) => {
  const [isThoughtSpotInitialized, setIsThoughtSpotInitialized] =
    useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    if (!shouldInitialize) {
      return;
    }
    const initializeThoughtSpotSDK = async () => {
      setIsLoading(true);

      try {
        console.log('<---- Starting ThoughtSpot SDK initialization');
        const ee = init({
          thoughtSpotHost: 'HOST',
          authType: AuthType.TrustedAuthTokenCookieless,
          getAuthToken: getAuthTokenWithSecret,
          callPrefetch: true,
        });
        if (ee) {
          ee.on(AuthStatus.SDK_SUCCESS, () => {
            setIsThoughtSpotInitialized(true);
            setIsLoading(false);
            console.log('<---- SDK Success');
          });
        }
      } catch (err) {
        console.error('<---- SDK initialization failed:', err);
          setError(err as Error);
          setIsLoading(false);
    
      }
    };

    initializeThoughtSpotSDK();

  }, [shouldInitialize]);

  return { isThoughtSpotInitialized, isLoading, error };
};

```
import { useState, useEffect } from 'react';
import { AuthStatus, AuthType, init } from '@thoughtspot/visual-embed-sdk';

export const getAuthTokenWithSecret = async () => {
  const endpoint =
    'ENDPOINT';

  const data = {
    username: 'USERNAME',

    secret_key: 'SECRET_KEY',
  };

  const headers = {
    Accept: 'application/json',
    'X-Requested-By': 'ThoughtSpot',
    'Content-Type': 'application/json',
  };

  try {
    const response = await fetch(endpoint, {
      method: 'POST',
      headers,
      body: JSON.stringify(data),
    });
    const j = await response.json();
    return j.token;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
};

export const useThoughtSpotInit = (shouldInitialize = false) => {
  const [isThoughtSpotInitialized, setIsThoughtSpotInitialized] =
    useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    if (!shouldInitialize) {
      return;
    }
    const initializeThoughtSpotSDK = async () => {
      setIsLoading(true);

      try {
        console.log('<---- Starting ThoughtSpot SDK initialization');
        const ee = init({
          thoughtSpotHost: 'HOST',
          authType: AuthType.TrustedAuthTokenCookieless,
          getAuthToken: getAuthTokenWithSecret,
          callPrefetch: true,
        });
        if (ee) {
          ee.on(AuthStatus.SDK_SUCCESS, () => {
            setIsThoughtSpotInitialized(true);
            setIsLoading(false);
            console.log('<---- SDK Success');
          });
        }
      } catch (err) {
        console.error('<---- SDK initialization failed:', err);
          setError(err as Error);
          setIsLoading(false);
    
      }
    };

    initializeThoughtSpotSDK();

  }, [shouldInitialize]);

  return { isThoughtSpotInitialized, isLoading, error };
};

Liveboard component: I am able to see onLoad event logs

import {
  LiveboardEmbed,
  useEmbedRef,
  EmbedEvent,
} from '@thoughtspot/visual-embed-sdk/react';
export const Liveboard = () => {
  const embedRef = useEmbedRef<typeof LiveboardEmbed>();

  const onLoad = () => {
    console.log('<--- LiveboardEmbed onLoad fired', EmbedEvent.Load);
  };
  const onLiveboardRendered = () => {
    console.log('<--- LiveboardEmbed onLiveboardRendered fired');
  };

  const onError = (error: any) => {
    console.error('<--- LiveboardEmbed onError:', error);
  };

  return (
    <>
      <PageTitle name="liveboard" text={'liveboard-embed'} />
      <PageContainer>
        <LiveboardEmbed
          ref={embedRef}
          liveboardId=""
          fullHeight
          onLoad={onLoad}
          onLiveboardRendered={onLiveboardRendered}
          onError={onError}
        />
      </PageContainer>
    </>
  );
};

import {
  LiveboardEmbed,
  useEmbedRef,
  EmbedEvent,
} from '@thoughtspot/visual-embed-sdk/react';
export const Liveboard = () => {
  const embedRef = useEmbedRef<typeof LiveboardEmbed>();

  const onLoad = () => {
    console.log('<--- LiveboardEmbed onLoad fired', EmbedEvent.Load);
  };
  const onLiveboardRendered = () => {
    console.log('<--- LiveboardEmbed onLiveboardRendered fired');
  };

  const onError = (error: any) => {
    console.error('<--- LiveboardEmbed onError:', error);
  };

  return (
    <>
      <PageTitle name="liveboard" text={'liveboard-embed'} />
      <PageContainer>
        <LiveboardEmbed
          ref={embedRef}
          liveboardId=""
          fullHeight
          onLoad={onLoad}
          onLiveboardRendered={onLiveboardRendered}
          onError={onError}
        />
      </PageContainer>
    </>
  );
};

shikharTS•3mo ago

By default we have a 5 minute time for token validity. After how much time do you usually see this 401? You can increase the time in the body of the getAuthTokenWithSecret call..

sandeep•3mo ago

Hello @rajatgupta : Set autoLogin: true in the init block of the Visual Embed SDK. This ensures that when the current token expires, the SDK will automatically generate a new token internally, preventing 401 errors due to session or token expiration. This is the recommended way to keep users logged in without manual intervention, as the SDK will handle both token expiry and idle session timeouts automatically when autoLogin is enabled Refer to https://developers.thoughtspot.com/docs/trusted-auth-sdk#_session_length for more details

Front-end trusted authentication integration

Front-end trusted authentication integration using Visual Embed SDK

rajatguptaOP•3mo ago

this is happening within a minute; I tried increasing the validity time but still faced the same issue I have now set autoLogin: true but still facing the same issue

rajatguptaOP•3mo ago

This is my CSP visual embed host list incase it's relevant to the issue

rajatguptaOP•3mo ago

Could it be a liveboard permission issue? I have tried accessing a liveboard which my user only has created but still the same issue.

shikharTS•3mo ago

Can you DM me the HAR file with the error? I am not able to understand if it is a permission issue or a auth issue. Has the issue been happening consistently after a minute, doesn't matter the liveboard you are viewing?

rajatguptaOP•3mo ago

Yes, it is happening consistently. I have tried changing the liveboard as well. DM'ing HAR file. Also, note that when I login into the cluster separately and then try to access the pinboard then it's fine.

shikharTS•3mo ago

I see you have created a support ticket for this as well. Lets discuss on that. We should not be getting this issue..

Gaming

Programming

rajatgupta - Hi team, I am facing 401 Auth issu...

Did you find this page helpful?