### Automated Setup for Multi-Wallet Menu Project (Shell)

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

This snippet provides shell commands to quickly clone the multi-wallet menu example project from GitHub, navigate into its directory, and run an automated setup script. This method requires DFX 0.15.1+ and Node 18 + NPM to be pre-installed and configured.

```bash
git clone https://github.com/cp-daniel-mccoy/multi-wallet-menu.git
cd multi-wallet-menu
npm run setup
```

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

### Manual Setup for Multi-Wallet Menu Project (Shell)

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

This snippet offers a sequence of manual shell commands for setting up the multi-wallet menu project if the automated setup fails. It includes installing Node.js dependencies, fixing audit issues, starting a clean DFX replica in the background, deploying canisters, and then stopping the replica.

```bash
npm install
npm audit fix
dfx start --clean --background
dfx deploy
dfx stop
```

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

### Basic Setup for Multi-Wallet Support

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

Initial setup for supporting multiple wallets, including importing necessary functions and types from `ic-auth`, defining canister ID and whitelist, and creating a basic asynchronous login handler.

```typescript
import { PlugLogin, StoicLogin, NFIDLogin, IdentityLogin, Types } from 'ic-auth';

const canisterID = "oyjva-2yaaa-aaaam-qbaya-cai";
const whitelist = ["oyjva-2yaaa-aaaam-qbaya-cai"];

const handleLogin = async() => {
    const userObject = await PlugLogin(whitelist);
    console.log(userObject);
    // Handle code will go here...
}
```

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

### Install IC-Auth NPM Package

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

Instructions to install the `ic-auth` package using npm and fix any audit issues, preparing the development environment.

```shell
npm install ic-auth && npm audit fix
```

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

### Polyfill Buffer and Global for Dfinity Agent Compatibility

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/index.html

This JavaScript snippet provides necessary polyfills for the 'Buffer' and 'window.global' objects. It is explicitly stated as a requirement for the '@dfinity/agent' library, indicating it resolves a dependency or compatibility issue within a browser environment by making these objects globally accessible.

```JavaScript
import { Buffer } from "buffer"
window.global = window
window.Buffer = Buffer
```

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

### Run Multi-Wallet Menu Project in Development Mode (Shell)

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

This shell command initiates a local development instance of the multi-wallet menu project using Vite. This mode is suitable for active development and provides features like hot module reloading.

```bash
npm run dev
```

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

### Run Multi-Wallet Menu Project in Production Mode (Shell)

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

This shell command serves a compiled build of the multi-wallet menu project, typically used for testing the production-ready version on a dedicated server. It assumes the project has already been built.

```bash
npm run serve
```

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

### Handle Single Wallet Login with Plug

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

Shows how to create an asynchronous function to handle a user login specifically with Plug wallet. It includes defining a whitelist of canister IDs required by Plug and logging the returned UserObject.

```typescript
const whitelist = ["oyjva-2yaaa-aaaam-qbaya-cai"];

const handleLogin = async() => {
    const userObject = await PlugLogin(whitelist);
    console.log(userObject);
    // Handle code will go here...
}
```

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

### Attach Multi-Wallet Login Handler to UI Buttons (JavaScript/JSX)

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

This JavaScript/JSX snippet demonstrates how to create a simple UI menu with buttons, each triggering a specific multi-wallet login method (Plug, Stoic, NFID, Identity) using an asynchronous `handleLogin` function. It assumes `handleLogin` is already defined to manage different wallet inputs.

```js
<div className="myLoginMenu">
    <button onClick={async() => await handleLogin("Plug")}>Plug</button>
    <button onClick={async() => await handleLogin("Stoic")}>Stoic</button>
    <button onClick={async() => await handleLogin("NFID")}>NFID</button>
    <button onClick={async() => await handleLogin("Identity")}>Identity</button>
</div>
```

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

### Create Actor for Canister Calls with IC-Auth

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

Demonstrates how to use the `UserObject` to create an actor for interacting with Internet Computer canisters. It shows importing `HelloIDL` and `CreateActor`, then making a sample call to a 'hello' function on a specified canister.

```typescript
import { PlugLogin, StoicLogin, NFIDLogin, IdentityLogin } from 'ic-auth';
import { HelloIDL, CreateActor } from 'ic-auth';

const canisterID = "oyjva-2yaaa-aaaam-qbaya-cai";
const whitelist = ["oyjva-2yaaa-aaaam-qbaya-cai"];

const handleLogin = async() => {
    const userObject = await PlugLogin(whitelist);
    console.log(userObject);
    const actor = await CreateActor(userObject.agent!, HelloIDL, canisterID);
    const result = await actor.hello();
    console.log(result);
    // Handle code will go here...
}
```

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

### Import Wallet Providers for IC-Auth

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

Demonstrates how to import specific wallet provider login functions (PlugLogin, StoicLogin, NFIDLogin, IdentityLogin) from the `ic-auth` package into a TypeScript file, which is the first step in building a custom login UI.

```typescript
import { PlugLogin, StoicLogin, NFIDLogin, IdentityLogin } from 'ic-auth';
```

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

### Attach Login Handler to HTML Button

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

Illustrates how to attach the `handleLogin` function to an HTML button's `onClick` event, enabling user interaction to trigger the login process.

```html
<button onClick={handleLogin}>Login</button>
```

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

### Modify Login Handler for Multiple Wallets

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

Expands the login handler to support multiple wallet providers by accepting a `provider` string argument. It uses conditional logic to call the appropriate login function (Plug, Stoic, NFID, Identity) and then creates an actor for canister interaction.

```typescript
import { PlugLogin, StoicLogin, NFIDLogin, IdentityLogin, Types } from 'ic-auth';
import { HelloIDL, CreateActor } from 'ic-auth';

const canisterID = "oyjva-2yaaa-aaaam-qbaya-cai";
const whitelist = ["oyjva-2yaaa-aaaam-qbaya-cai"];

const handleLogin = async(provider: string) => {
    let userObject: Types.UserObject = {
        principal: "Not Connected.",
        agent: undefined,
        provider: "N/A"
    };
    if (provider === "Plug") {
        userObject = await PlugLogin(whitelist);
    } else if (provider === "Stoic") {
        userObject = await StoicLogin();
    } else if (provider === "NFID") {
        userObject = await NFIDLogin();
    } else if (provider === "Identity") {
        userObject = await IdentityLogin();
    }
    console.log(userObject);
    const actor = await CreateActor(userObject.agent!, HelloIDL, canisterID);
    const result = await actor.hello();
    console.log(result);
    // Handle code will go here...
}
```

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

### IC-Auth UserObject Type Definition

Source: https://github.com/id-daniel-mccoy/ic-auth/blob/main/README.md

Defines the structure of the `UserObject` returned after a successful login. This object contains the user's principal, an HttpAgent instance for canister interactions, and the name of the provider used for login.

```APIDOC
type UserObject = {
    principal: string,
    agent: HttpAgent,
    provider: string
}
```

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