function AuthButton({
  authURL,
  authToken,
  label = 'Authorize',
  onAuthComplete,
}) {
  /** @type {{ current: AuthWindow|null }} */
  const authWindow = useRef(null);

  const authorize = useCallback(async () => {
    if (authWindow.current) {
      authWindow.current.focus();
      return;
    }

    authWindow.current = new AuthWindow({ authToken, authUrl: authURL });

    try {
      await authWindow.current.authorize();
      onAuthComplete();
    } finally {
      authWindow.current.close();
      authWindow.current = null;
    }
  }, [authToken, authURL, onAuthComplete]);

  // Close auth window if component is unmounted.
  useEffect(() => {
    return () => {
      authWindow.current?.close();
    };
  }, []);

  return (
    <LabeledButton onClick={authorize} variant="primary">
      {label}
    </LabeledButton>
  );
}
/**
 * Button that prompts the user to authorize the Hypothesis LMS app to access
 * their data in the LMS (or another service).
 *
 * This component is typically shown to the user when an attempt to fetch data
 * from the LMS via an LMS-specific API fails, requiring the user to complete
 * an OAuth or OAuth-like authentication flow before the attempt can proceed.
 *
 * @param {AuthButtonProps} props
 */
Button that prompts the user to authorize the Hypothesis LMS app to access
their data in the LMS (or another service).

This component is typically shown to the user when an attempt to fetch data
from the LMS via an LMS-specific API fails, requiring the user to complete
an OAuth or OAuth-like authentication flow before the attempt can proceed.


Button that prompts the user to authorize the Hypothesis LMS app to access their data in the LMS ( or another service ) . This component is typically shown to the user when an attempt to fetch data from the LMS via an LMS - specific API fails requiring the user to complete an OAuth or OAuth - like authentication flow before the attempt can proceed .
function AuthButton({
  authURL,
  authToken,
  label = 'Authorize',
  onAuthComplete,
}) {
  const authWindow = useRef(null);
  const authorize = useCallback(async () => {
    if (authWindow.current) {
      authWindow.current.focus();
      return;
    }
    authWindow.current = new AuthWindow({ authToken, authUrl: authURL });
    try {
      await authWindow.current.authorize();
      onAuthComplete();
    } finally {
      authWindow.current.close();
      authWindow.current = null;
    }
  }, [authToken, authURL, onAuthComplete]);
  useEffect(() => {
    return () => {
      authWindow.current?.close();
    };
  }, []);
  return (
    <LabeledButton onClick={authorize} variant="primary">
      {label}
    </LabeledButton>
  );
}
function AuthButton ( { authURL , authToken , label = 'Authorize' , onAuthComplete , } ) { const authWindow = useRef ( null ) ; const authorize = useCallback ( async ( ) => { if ( authWindow . current ) { authWindow . current . focus ( ) ; return ; } authWindow . current = new AuthWindow ( { authToken , authUrl : authURL } ) ; try { await authWindow . current . authorize ( ) ; onAuthComplete ( ) ; } finally { authWindow . current . close ( ) ; authWindow . current = null ; } } , [ authToken , authURL , onAuthComplete ] ) ; useEffect ( ( ) => { return ( ) => { authWindow . current ?. close ( ) ; } ; } , [ ] ) ; return ( < LabeledButton onClick = { authorize } variant = "primary" > { label } < / LabeledButton > ) ; }
Button that prompts the user to authorize the Hypothesis LMS app to access
 their data in the LMS (or another service).
Button that prompts the user to authorize the Hypothesis LMS app to access their data in the LMS ( or another service ) .
/** @type {{ current: AuthWindow|null }} */ // Close auth window if component is unmounted.