### Install Globus SDK for JavaScript

Source: https://github.com/globus/globus-sdk-javascript/blob/main/README.md

Install the SDK using npm. This command is used to add the Globus SDK to your project dependencies.

```sh
npm install @globus/sdk
```

--------------------------------

### Install Canary Build

Source: https://github.com/globus/globus-sdk-javascript/blob/main/README.md

Install a canary build of the Globus SDK from npm using the `@canary` tag. These builds are from the `main` branch and are useful for testing the latest changes.

```sh
npm install @globus/sdk@canary
```

--------------------------------

### Interact with Transfer API v2 Bookmarks

Source: https://github.com/globus/globus-sdk-javascript/blob/main/documents/patterns.md

This snippet demonstrates how to interact with the v2 Bookmarks API within the Transfer service. It covers fetching all bookmarks, getting a specific bookmark, creating, updating, and removing bookmarks.

```typescript
import { transfer } from '@globus/sdk';

await transfer.v2.bookmarks.getAll();
await transfer.v2.bookmarks.get({ bookmark_id: '...' });
await transfer.v2.bookmarks.create({ request: { data: { name, endpoint_id, path } } });
await transfer.v2.bookmarks.update({ bookmark_id: '...', request: { data: { name } } });
await transfer.v2.bookmarks.remove({ bookmark_id: '...' });
```

```typescript
// Service-specific imports are also available.
import { bookmarks } from '@globus/sdk/tranfer/v2';
import { getAll } from '@globus/sdk/tranfer/v2/bookmarks';
```

--------------------------------

### Implement Sign-In and Sign-Out UI Logic

Source: https://github.com/globus/globus-sdk-javascript/blob/main/e2e/www/umd-authorization.html

Sets up event listeners for sign-in and sign-out buttons. The sign-in button initiates the login process, while the sign-out button revokes tokens and updates the UI.

```javascript
const UI = {
  SIGN_IN: document.getElementById('sign-in'),
  SIGN_OUT: document.getElementById('sign-out'),
  USER_INFO: document.getElementById('user-information'),
};

UI.SIGN_IN.addEventListener('click', () => {
  manager.login();
});

UI.SIGN_OUT.addEventListener('click', () => {
  manager.revoke();
  UI.USER_INFO.innerText = '';
  UI.SIGN_IN.style.display = 'block';
  UI.SIGN_OUT.style.display = 'none';
});
```

--------------------------------

### Initialize Globus SDK and UI Elements

Source: https://github.com/globus/globus-sdk-javascript/blob/main/examples/basic/index.html

Sets up references to UI elements and configures the Globus logger. Ensure your HTML has elements with IDs: 'sign-in', 'sign-out', 'user-information', and 'ls-response'.

```javascript
const UI = {
  SIGN_IN: document.getElementById('sign-in'),
  SIGN_OUT: document.getElementById('sign-out'),
  USER_INFO: document.getElementById('user-information'),
  LS_RESPONSE: document.getElementById('ls-response'),
};
globus.logger.setLogger(console);
globus.logger.setLogLevel('debug');
```

--------------------------------

### Initialize Authorization Manager and Handle Redirect

Source: https://github.com/globus/globus-sdk-javascript/blob/main/e2e/www/umd-authorization.html

Creates an authorization manager instance with specified client ID, redirect URI, and refresh token usage. It then handles the code redirect to complete the authentication flow.

```javascript
const manager = globus.authorization.create({ client: '938f3dce-6782-40e7-872d-2ef94c7b24e7', redirect: 'example://redirect', useRefreshTokens: true, });
manager.handleCodeRedirect();
```

--------------------------------

### Import Globus SDK (CommonJS)

Source: https://github.com/globus/globus-sdk-javascript/blob/main/UPGRADING.md

Import the Globus SDK using the main entry point for CommonJS environments.

```javascript
const sdk = require('@globus/sdk');
```

--------------------------------

### Handle Initial Authentication State

Source: https://github.com/globus/globus-sdk-javascript/blob/main/e2e/www/umd-authorization.html

Checks if the user is currently authenticated and updates the UI accordingly. If authenticated, it displays user information and the sign-out button; otherwise, it shows the sign-in button.

```javascript
if (manager.authenticated) {
  UI.USER_INFO.innerText = JSON.stringify(manager.user, null, 2);
  UI.SIGN_OUT.style.display = 'block';
} else {
  UI.SIGN_IN.style.display = 'block';
}
```

--------------------------------

### Import Globus SDK Explicitly (CommonJS)

Source: https://github.com/globus/globus-sdk-javascript/blob/main/UPGRADING.md

Import the Globus SDK explicitly using the CommonJS entry point for CommonJS environments.

```javascript
const sdk = require('@globus/sdk/cjs');
```

--------------------------------

### Configure AuthorizationManager with localStorage

Source: https://github.com/globus/globus-sdk-javascript/blob/main/UPGRADING.md

To opt-in to `localStorage` for token storage in v5, provide `localStorage` as the `storage` configuration option when creating the `AuthorizationManager`.

```ts
authorization.create({
  // ...
  storage: localStorage,
});
```

--------------------------------

### Import CommonJS Namespace

Source: https://github.com/globus/globus-sdk-javascript/blob/main/README.md

Explicitly import a CommonJS entrypoint using the `cjs` namespace. This provides an alternative way to import CommonJS modules.

```js
const transfer = require('@globus/sdk/cjs').transfer;
// or, import { transfer } from '@globus/sdk/cjs';
```

--------------------------------

### Import ESM Module

Source: https://github.com/globus/globus-sdk-javascript/blob/main/README.md

Import specific functions from the SDK using ESM syntax. This is suitable for modern JavaScript environments that support ES modules.

```js
import { transfer } from '@globus/sdk';
import { GCS } from '@globus/sdk/constants';
```

--------------------------------

### Configure AuthorizationManager with Custom Storage

Source: https://github.com/globus/globus-sdk-javascript/blob/main/UPGRADING.md

Implement the `Storage` interface for custom token storage mechanisms. Provide an instance of your custom storage class to the `AuthorizationManager`'s `storage` option.

```ts
class MyCustomStorage implements Storage {};

authorization.create({
  // ...
 storage: new MyCustomStorage();
});
```

--------------------------------

### Include UMD Distribution via Script Tag

Source: https://github.com/globus/globus-sdk-javascript/blob/main/README.md

Include the UMD distribution of the SDK in web applications by referencing it as a script tag. This makes the SDK available globally as the `globus` variable.

```html
<script src="https://unpkg.com/@globus/sdk/dist/umd/globus.production.js"></script>
```

--------------------------------

### Update Services Import Path

Source: https://github.com/globus/globus-sdk-javascript/blob/main/UPGRADING.md

Update import paths for services by removing the 'esm/lib' segment.

```diff
-import { endpointManager } from '@globus/sdk/esm/lib/services/transfer';
+import { endpointManager } from '@globus/sdk/services/transfer';
```

--------------------------------

### Update TokenLookup to TokenManager Import

Source: https://github.com/globus/globus-sdk-javascript/blob/main/UPGRADING.md

In v5, the `TokenLookup` class has been renamed to `TokenManager`. Update your import statements to use the new class name.

```diff
-import { TokenLookup } from '@globus/sdk/core/authorization/TokenLookup';
+import { TokenManager } from '@globus/sdk/core/authorization/TokenManager';
```

--------------------------------

### Import CommonJS Module

Source: https://github.com/globus/globus-sdk-javascript/blob/main/README.md

Import specific functions from the SDK using CommonJS syntax. This is intended for Node.js applications and environments that support the `require` statement.

```js
const { transfer } = require('@globus/sdk');

```

--------------------------------

### Update Core Errors Import Path

Source: https://github.com/globus/globus-sdk-javascript/blob/main/UPGRADING.md

Adjust import paths for core errors by removing the 'cjs/lib' segment.

```diff
-import { isConsentRequiredError } from "@globus/sdk/cjs/lib/core/errors";
+import { isConsentRequiredError } from "@globus/sdk/core/errors";
```

--------------------------------

### Update Timer Create Method Call

Source: https://github.com/globus/globus-sdk-javascript/blob/main/UPGRADING.md

Following the renaming of the timer service to `timers` in v6, the `create` method call needs to be updated to reflect the new import path and structure.

```diff
-import { timer } from '@globus/sdk';
-timer.create({ /* ... */ });
+import { timers } from '@globus/sdk';
+timers.timer.create({ /* ... */ });
```

--------------------------------

### Handle OAuth Code Redirect and Authenticated State

Source: https://github.com/globus/globus-sdk-javascript/blob/main/examples/basic/index.html

Processes the OAuth redirect to exchange the authorization code for tokens. If authenticated, it updates the UI with user info, hides the sign-in button, shows the sign-out button, and performs a file listing.

```javascript
manager.handleCodeRedirect({ shouldReplace: false }).then(() => {
  if (!manager.authenticated) {
    UI.SIGN_IN.style.display = 'block';
    return;
  }
  const url = new URL(window.location.href);
  url.searchParams.delete('state');
  url.searchParams.delete('code');
  history.pushState({}, document.title, url);
  UI.USER_INFO.innerText = JSON.stringify(manager.user, null, 2);
  UI.SIGN_OUT.style.display = 'block';
```

--------------------------------

### Configure Globus AuthorizationManager

Source: https://github.com/globus/globus-sdk-javascript/blob/main/examples/basic/index.html

Creates an AuthorizationManager for tracking user authorization state, typically stored in localStorage. Requires your Globus Application client ID, redirect URL, and necessary scopes.

```javascript
const COLLECTION = 'COLLECTION_ID';
const manager = globus.authorization.create({
  client: 'GLOBUS_APPLICATION_ID',
  redirect: window.location.origin + window.location.pathname,
  scopes: 'urn:globus:auth:scope:transfer.api.globus.org:all',
  useRefreshTokens: true,
});
```

--------------------------------

### Search Endpoints using Transfer API

Source: https://github.com/globus/globus-sdk-javascript/blob/main/documents/patterns.md

Use this snippet to search for endpoints via the Transfer API. It demonstrates passing query parameters and custom headers, and allows for providing options to the underlying fetch call.

```typescript
import { transfer } from "@globus/sdk";
const result = await (
  await globus.transfer.endpointSearch(
    {
       query: { filter_fulltext: "Globus Tutorial" },
       headers: {
         Authorization: "Bearer MY_ACCESS_TOKEN",
       },
    },
    {
      fetch: {
        // Provide parameters to the underlying `fetch` call.
        // https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters
        options: {
          priority: "high"
        },
      },
    }
  )
).json();
```

--------------------------------

### Bind UI Events for Sign-In and Sign-Out

Source: https://github.com/globus/globus-sdk-javascript/blob/main/examples/basic/index.html

Attaches event listeners to UI buttons to trigger Globus login and logout flows. The sign-out handler also resets the UI and user information.

```javascript
UI.SIGN_IN.addEventListener('click', async () => {
  await manager.login();
});
UI.SIGN_OUT.addEventListener('click', async () => {
  await manager.revoke();
  UI.USER_INFO.innerText = '';
  UI.SIGN_IN.style.display = 'block';
  UI.SIGN_OUT.style.display = 'none';
  UI.LS_RESPONSE.innerText = '';
});
```

--------------------------------

### Rename Timer Service to Timers

Source: https://github.com/globus/globus-sdk-javascript/blob/main/UPGRADING.md

In v6, the `@globus/sdk/services/timer` module has been renamed to `@globus/sdk/services/timers`. Update your import statements accordingly.

```diff
-import { timer } from '@globus/sdk';
+import { timers } from '@globus/sdk';
```

--------------------------------

### Update Compute Types Import from @globus/types to @globus/sdk

Source: https://github.com/globus/globus-sdk-javascript/blob/main/UPGRADING.md

When migrating from v5 to v6, update import statements for compute types. Remove the `@globus/types` package and import types directly from `@globus/sdk`.

```diff
-import type { components, operations } from '@globus/types/compute';
import {type OpenAPI } from '@globus/sdk/services/compute';
// OpenAPI.components === components
// OpenAPI.operations === operations
```

--------------------------------

### Update CommonJS Services Import Path

Source: https://github.com/globus/globus-sdk-javascript/blob/main/UPGRADING.md

Update CommonJS import paths for services by removing the 'cjs/lib' segment.

```diff
-import { endpointManager } from '@globus/sdk/cjs/lib/services/transfer';
+import { endpointManager } from '@globus/sdk/services/transfer';
```

--------------------------------

### Manage Authorization with AuthorizationManager

Source: https://github.com/globus/globus-sdk-javascript/blob/main/documents/patterns.md

Utilize the AuthorizationManager to handle access tokens and the authorization process when making service method calls. This snippet demonstrates its integration with a service method.

```typescript
import { transfer, authorization } from "@globus/sdk";
const manager = authorization.create({ ... });
const result = await (
  await globus.transfer.endpointSearch(
    {
       query: { filter_fulltext: "Globus Tutorial" },
       manager
    }
  )
).json();
```

--------------------------------

### Fetch Single Flow using Flows API

Source: https://github.com/globus/globus-sdk-javascript/blob/main/documents/patterns.md

This snippet shows how to fetch a single flow from the Flows API using its ID. Ensure you have the correct flow ID to retrieve the specific flow.

```typescript
import { flows } from '@globus/sdk';
const result = await (await flows.flows.get('452bbea3-5e3b-45a5-af08-50179839a4e8')).json();
```

--------------------------------

### Update Transfer Endpoint Types Import

Source: https://github.com/globus/globus-sdk-javascript/blob/main/UPGRADING.md

For v6 migration, update the import path for `EndpointDocument` from the deprecated global `Globus` namespace to the specific service module within `@globus/sdk`.

```diff
-Globus.Transfer.EndpointDocument
import type { EndpointDocument } from '@globus/sdk/services/transfer/service/endpoint';
```

--------------------------------

### Perform Globus Transfer ls Operation

Source: https://github.com/globus/globus-sdk-javascript/blob/main/examples/basic/index.html

Makes an authenticated `ls` call to a Globus Collection using the access token from the AuthorizationManager. Displays the raw JSON response or handles potential errors.

```javascript
globus.transfer.fileOperations
  .ls(COLLECTION, {
    headers: {
      Authorization: `Bearer ${manager.tokens.transfer.access_token}`,
    },
  })
  .then((response) => response.json())
  .then((json) => {
    UI.LS_RESPONSE.innerText = JSON.stringify(json, null, 2);
    const isError = globus.errors.isErrorWellFormed(json);
    if (isError) {
      manager.handleErrorResponse(json, false).then((handler) => {
        const btn = document.createElement('button');
        btn.innerText = 'Handle';
        btn.onclick = handler;
        document.body.appendChild(btn);
      });
    }
  });
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.