### SDK Setup

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Basic setup of the Auth0 Vue SDK with essential configuration parameters.

```javascript
import { createAuth0 } from '@auth0/auth0-vue';

const app = createApp(App);

app.use(
  createAuth0({
    domain: '<AUTH0_DOMAIN>',
    clientId: '<AUTH0_CLIENT_ID>',
    authorizationParams: {
      redirect_uri: window.location.origin
    },
    useRefreshTokens: true,
    interactiveErrorHandler: 'popup'
  })
);
```

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

### Install Dependencies and Run Playground

Source: https://github.com/auth0/auth0-vue/blob/main/DEVELOPMENT.md

Commands to install dependencies and start the SDK playground application.

```bash
# Install dependencies
npm i

# Run the playground app
npm start
```

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

### MFA Setup with Refresh Tokens

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Example of configuring the Auth0 client to use refresh tokens, which is a prerequisite for MFA.

```js
import { createAuth0 } from '@auth0/auth0-vue';

const app = createApp(App);

app.use(
  createAuth0({
    domain: '<AUTH0_DOMAIN>',
    clientId: '<AUTH0_CLIENT_ID>',
    authorizationParams: {
      redirect_uri: window.location.origin
    },
    useRefreshTokens: true
  })
);

```

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

### Install Axios

Source: https://github.com/auth0/auth0-vue/blob/main/tutorial/vue2-api.md

Install the axios HTTP library.

```bash
npm install axios
```

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

### v1 SDK usage with createAuth0

Source: https://github.com/auth0/auth0-vue/blob/main/MIGRATION_GUIDE.md

Example of how the Auth0 SDK was configured in v1.

```typescript
app.use(
  createAuth0({
    domain: '<AUTH0_DOMAIN>',
    client_id: '<AUTH0_CLIENT_ID>',
    redirect_uri: '<MY_CALLBACK_URL>',
    audience: '<AUTH0_API_IDENTIFIER>'
  })
);
```

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

### Start the application

Source: https://github.com/auth0/auth0-vue/blob/main/tutorial/vue2-login.md

Command to start the Vue application.

```bash
npm run serve -- --port 3000
```

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

### Base URL Configuration (Options API)

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Provides an equivalent example to the Composition API for configuring a fetcher with a base URL using the Options API.

```html
<script>
  export default {
    data() {
      return {
        fetcher: this.$auth0.createFetcher({
          dpopNonceId: 'my-api',
          baseUrl: 'https://api.example.com',
        }),
      };
    },
    methods: {
      async getFoo() {
        return this.fetcher.fetchWithAuth('/foo'); // => https://api.example.com/foo
      },
      async getBar() {
        return this.fetcher.fetchWithAuth('/bar'); // => https://api.example.com/bar
      },
      async getXyz() {
        return this.fetcher.fetchWithAuth('/xyz'); // => https://api.example.com/xyz
      },
      async getFromOtherApi() {
        // If the passed URL is absolute, `baseUrl` will be ignored for convenience:
        return this.fetcher.fetchWithAuth('https://other-api.example.com/foo');
      },
    },
  };
</script>
```

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

### Install the SDK

Source: https://github.com/auth0/auth0-vue/blob/main/tutorial/vue2-login.md

Command to install the Auth0 SPA SDK for Vue.

```bash
npm install @auth0/auth0-spa-js
```

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

### Original fetch request

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

An example of a standard fetch request before using fetchWithAuth.

```javascript
const response = await fetch('https://api.example.com/foo', {
  method: 'GET',
  headers: { 'user-agent': 'My Client 1.0' },
});

console.log(response.status);
console.log(response.headers);
console.log(await response.json());
```

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

### v2 SDK usage with createAuth0 and authorizationParams

Source: https://github.com/auth0/auth0-vue/blob/main/MIGRATION_GUIDE.md

Example of the new configuration approach in v2 using authorizationParams.

```typescript
app.use(
  createAuth0({
    domain: '<AUTH0_DOMAIN>',
    clientId: '<AUTH0_CLIENT_ID>',
    authorizationParams: {
      redirect_uri: '<MY_CALLBACK_URL>',
      audience: '<AUTH0_API_IDENTIFIER>'
    }
  })
);
```

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

### Accessing ID Token Claims and Initiating Login (Options API)

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Example of accessing ID token claims and initiating login using the Options API.

```html
<template>
  <div>
    <h2>ID Token Claims</h2>
    <button @click="login">Log in</button>
    <pre>
      <code>{{ idTokenClaims }}</code>
    </pre>
  </div>
</template>
<script>
  export default {
    data: function () {
      return {
        idTokenClaims: this.$auth0.idTokenClaims
      };
    },
    methods: {
      login() {
        this.$auth0.loginWithRedirect();
      }
    }
  };
</script>
```

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

### Local Development Commands

Source: https://github.com/auth0/auth0-vue/blob/main/CONTRIBUTING.md

A list of npm commands for local development, including installing dependencies, starting the development server, and building distribution files.

```bash
npm install
npm start
npm run test
npm run test:watch
npm run test:integration
npm run test:watch:integration
npm run build
npm run test:es-check
npm run print-bundle-size
```

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

### Install with yarn

Source: https://github.com/auth0/auth0-vue/blob/main/README.md

Install the auth0-vue package using yarn.

```sh
yarn add @auth0/auth0-vue
```

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

### Configuring the SDK for API Calls

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Example of how to configure the Auth0 Vue SDK with an audience to call an API.

```javascript
import { createAuth0 } from '@auth0/auth0-vue';

const app = createApp(App);

app.use(
  createAuth0({
    domain: '<AUTH0_DOMAIN>',
    clientId: '<AUTH0_CLIENT_ID>',
    authorizationParams: {
      redirect_uri: '<MY_CALLBACK_URL>',
      audience: '<AUTH0_AUDIENCE>'
    }
  })
);

app.mount('#app');
```

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

### Install with npm

Source: https://github.com/auth0/auth0-vue/blob/main/README.md

Install the auth0-vue package using npm.

```sh
npm install @auth0/auth0-vue
```

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

### v1 buildLogoutUrl usage

Source: https://github.com/auth0/auth0-vue/blob/main/MIGRATION_GUIDE.md

Example of using buildLogoutUrl in v1, common with Ionic.

```typescript
const { buildLogoutUrl } = useAuth0();
const url = buildLogoutUrl();
await Browser.open({ url });
```

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

### v1 Client ID Configuration

Source: https://github.com/auth0/auth0-vue/blob/main/MIGRATION_GUIDE.md

Example of how the client ID was configured in v1 using `client_id`.

```typescript
app.use(
  createAuth0({
    client_id: '<AUTH0_CLIENT_ID>'
  })
);
```

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

### Main Vue Application Setup

Source: https://github.com/auth0/auth0-vue/blob/main/tutorial/vue2-login.md

This code demonstrates how to import and install the Auth0 authentication plugin in the main Vue application file.

```javascript
import Vue from 'vue';
import App from './App.vue';
import router from './router';

// Import the Auth0 configuration
import { domain, clientId } from '../auth_config.json';

// Import the plugin here
import { Auth0Plugin } from './auth';

// Install the authentication plugin here
Vue.use(Auth0Plugin, {
  domain,
  clientId,
  onRedirectCallback: appState => {
    router.push(
      appState && appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname
    );
  }
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

```

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

### MFA Handling Example

Source: https://github.com/auth0/auth0-vue/blob/main/docs/interfaces/Auth0VueClient.html

Example demonstrating how to handle MFA requirements using `getAccessTokenSilently` and the `mfa` client, including enrollment and challenge flows, and the importance of `checkSession()` and `try/catch` blocks for MFA errors.

```javascript
import { MfaRequiredError } from '@auth0/auth0-vue';
const { getAccessTokenSilently, mfa, checkSession } = useAuth0();
try {
  await getAccessTokenSilently();
} catch (e) {
  if (e instanceof MfaRequiredError) {
    if (e.mfa_requirements?.enroll?.length) {
      const factors = await mfa.getEnrollmentFactors(e.mfa_token);
      // ... show enrollment UI
    } else {
      const authenticators = await mfa.getAuthenticators(e.mfa_token);
      // ... show challenge UI, then:
      await mfa.verify({ mfaToken: e.mfa_token, otp: userCode });
      await checkSession(); // refresh isAuthenticated, user, etc.
    }
  }
}
```

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

### v2 Client ID Configuration

Source: https://github.com/auth0/auth0-vue/blob/main/MIGRATION_GUIDE.md

Example of how the client ID is configured in v2 using `clientId`.

```typescript
app.use(
  createAuth0({
    clientId: '<AUTH0_CLIENT_ID>',
  })
);
```

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

### fetchWithAuth usage with Composition API

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Example of using fetchWithAuth with the Composition API in Vue.js.

```html
<script>
  import { useAuth0 } from '@auth0/auth0-vue';

  export default {
    setup() {
      const { createFetcher } = useAuth0();

      return {
        fetchData: async () => {
          const fetcher = createFetcher({
            dpopNonceId: 'my_api_request',
          });

          const response = await fetcher.fetchWithAuth('https://api.example.com/foo', {
            method: 'GET',
            headers: { 'user-agent': 'My Client 1.0' },
          });

          console.log(response.status);
          console.log(response.headers);
          console.log(await response.json());
        },
      };
    },
  };
</script>
```

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

### fetchWithAuth usage with Options API

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Example of using fetchWithAuth with the Options API in Vue.js.

```html
<script>
  export default {
    methods: {
      async fetchData() {
        const fetcher = this.$auth0.createFetcher({
          dpopNonceId: 'my_api_request',
        });

        const response = await fetcher.fetchWithAuth('https://api.example.com/foo', {
          method: 'GET',
          headers: { 'user-agent': 'My Client 1.0' },
        });

        console.log(response.status);
        console.log(response.headers);
        console.log(await response.json());
      },
    },
  };
</script>
```

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

### Display the user profile (Composition API)

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

This example shows how to display the user's profile information in a Vue.js application using the Composition API and the reactive `user` property from `useAuth0`.

```html
<script>
  import { useAuth0 } from '@auth0/auth0-vue';

  export default {
    setup() {
      const { loginWithRedirect, user } = useAuth0();

      return {
        login: () => {
          loginWithRedirect();
        },
        user
      };
    }
  };
</script>
```

```html
<template>
  <div>
    <h2>User Profile</h2>
    <button @click="login">Log in</button>
    <pre>
        <code>{{ user }}</code>
      </pre>
  </div>
</template>
```

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

### Retrieving an Access Token and Making an API Request (Options API)

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Example of retrieving an Access Token using `getAccessTokenSilently` and setting it in the Authorization header for an API request, using the Options API.

```html
<script>
  export default {
    methods: {
      async doSomethingWithToken() {
        const token = await this.$auth0.getAccessTokenSilently();
        const response = await fetch('https://api.example.com/posts', {
          headers: {
            Authorization: `Bearer ${token}`
          }
        });
        const data = await response.json();
      }
    }
  };
</script>
```

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

### Example

Source: https://github.com/auth0/auth0-vue/blob/main/docs/interfaces/MfaApiClient.html

This example demonstrates how to handle an MfaRequiredError to initiate the MFA flow.

```typescript
try {
  await auth0.getTokenSilently({ authorizationParams: { audience: 'https://api.example.com' } });
} catch (e) {
  if (e instanceof MfaRequiredError) {
    // SDK automatically stores context for this mfaToken
    const authenticators = await auth0.mfa.getAuthenticators({ mfaToken: e.mfa_token });
    // ... complete MFA flow
  }
}
```

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

### Retrieving an Access Token and Making an API Request (Composition API)

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Example of retrieving an Access Token using `getAccessTokenSilently` and setting it in the Authorization header for an API request, using the Composition API.

```html
<script>
  import { useAuth0 } from '@auth0/auth0-vue';

  export default {
    setup() {
      const { getAccessTokenSilently } = useAuth0();

      return {
        doSomethingWithToken: async () => {
          const token = await getAccessTokenSilently();
          const response = await fetch('https://api.example.com/posts', {
            headers: {
              Authorization: `Bearer ${token}`
            }
          });
          const data = await response.json();
        }
      };
    }
  };
</script>
```

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

### Example: OTP challenge

Source: https://github.com/auth0/auth0-vue/blob/main/docs/interfaces/MfaApiClient.html

Example of initiating an OTP challenge for MFA.

```typescript
const challenge = await mfa.challenge({
  mfaToken: mfaTokenFromLogin,
  challengeType: 'otp',
  authenticatorId: 'otp|dev_xxx'
});// User enters OTP from their authenticator app
```

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

### Displaying ID Token Claims in Template

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Example of displaying ID token claims in the component's HTML template.

```html
<template>
  <div>
    <h2>ID Token Claims</h2>
    <button @click="login">Log in</button>
    <pre>
      <code>{{ idTokenClaims }}</code>
    </pre>
  </div>
</template>
```

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

### Accessing ID Token Claims (Composition API)

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Example of accessing ID token claims using the `idTokenClaims` property and initiating login with `loginWithRedirect`, using the Composition API.

```html
<script>
  import { useAuth0 } from '@auth0/auth0-vue';

  export default {
    setup() {
      const { loginWithRedirect, idTokenClaims } = useAuth0();

      return {
        login: () => {
          loginWithRedirect();
        },
        idTokenClaims
      };
    }
  };
</script>
```

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

### Log in to an organization

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Registering the plugin with the organization parameter to log in to a specific organization.

```javascript
app.use(
  createAuth0({
    domain: '<AUTH0_DOMAIN>',
    clientId: '<AUTH0_CLIENT_ID>',
    authorizationParams: {
      redirect_uri: '<MY_CALLBACK_URL>',
      organization: 'YOUR_ORGANIZATION_ID_OR_NAME'
    }
  })
);
```

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

### Protecting a route with multiple Vue applications

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

This example shows how to protect a route when using multiple Vue applications with different Auth0 configurations. It involves passing the Vue application instance to `createAuthGuard()`.

```jsx
import { createApp } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router';
import { createAuth0, createAuthGuard } from '@auth0/auth0-vue';
import App from './App.vue';
import Home from './components/Home.vue';
import Profile from './components/Profile.vue';

const app = createApp(App);
app.use(
  createRouter({
    linkActiveClass: 'btn-primary',
    routes: [
      {
        path: '/',
        name: 'home',
        component: Home
      },
      {
        path: '/profile',
        name: 'profile',
        component: Profile,
        beforeEnter: createAuthGuard(app)
      }
    ],
    history: createWebHashHistory()
  })
);
app.use(
  createAuth0({
    domain,
    clientId
  })
);
app.mount('#app');
```

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

### Example of openUrl usage with Capacitor Browser

Source: https://github.com/auth0/auth0-vue/blob/main/docs/interfaces/LogoutOptions.html

This example demonstrates using the `openUrl` function with Capacitor's `Browser.open` for handling redirects in a Capacitor environment.

```typescript
import { Browser } from '@capacitor/browser';await auth0.logout({
  async openUrl(url) {
    await Browser.open({ url });
  }
});
```

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

### getAccessTokenWithPopup Example

Source: https://github.com/auth0/auth0-vue/blob/main/docs/interfaces/Auth0VueClient.html

Example of how to get an access token using a popup.

```typescript
const token = await getTokenWithPopup(options);
```

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

### Manual DPoP Management (Composition API)

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Demonstrates how to manually manage DPoP proof generation and nonce updates using the Composition API.

```html
<script>
  import { useAuth0, UseDpopNonceError } from '@auth0/auth0-vue';

  export default {
    setup() {
      const { getAccessTokenSilently, getDpopNonce, setDpopNonce, generateDpopProof } = useAuth0();

      return {
        manualDpopRequest: async () => {
          try {
            // 1. Get access token
            const token = await getAccessTokenSilently();

            // 2. Get DPoP nonce for the API
            const nonce = await getDpopNonce('my-api');

            // 3. Generate DPoP proof
            const proof = await generateDpopProof({
              url: 'https://api.example.com/data',
              method: 'POST',
              accessToken: token,
              nonce,
            });

            // 4. Make request with DPoP headers
            const response = await fetch('https://api.example.com/data', {
              method: 'POST',
              headers: {
                Authorization: `DPoP ${token}`,
                DPoP: proof,
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({ data: 'example' }),
            });

            // 5. Update nonce if server provides a new one
            const newNonce = response.headers.get('DPoP-Nonce');
            if (newNonce) {
              await setDpopNonce(newNonce, 'my-api');
            }

            return response.json();
          } catch (error) {
            if (error instanceof UseDpopNonceError) {
              console.error('DPoP nonce validation failed:', error.message);
            }
            throw error;
          }
        },
      };
    },
  };
</script>
```

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

### v1 loginWithRedirect with redirectMethod

Source: https://github.com/auth0/auth0-vue/blob/main/MIGRATION_GUIDE.md

Example of using redirectMethod in v1 for loginWithRedirect.

```typescript
const { loginWithRedirect } = useAuth0();
await loginWithRedirect({
  redirectMethod: 'replace'
});
```

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

### Manual DPoP Management (Options API)

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Demonstrates how to manually manage DPoP proof generation and nonce updates using the Options API.

```html
<script>
  import { UseDpopNonceError } from '@auth0/auth0-vue';

  export default {
    methods: {
      async manualDpopRequest() {
        try {
          // 1. Get access token
          const token = await this.$auth0.getAccessTokenSilently();

          // 2. Get DPoP nonce for the API
          const nonce = await this.$auth0.getDpopNonce('my-api');

          // 3. Generate DPoP proof
          const proof = await this.$auth0.generateDpopProof({
            url: 'https://api.example.com/data',
            method: 'POST',
            accessToken: token,
            nonce,
          });

          // 4. Make request with DPoP headers
          const response = await fetch('https://api.example.com/data', {
            method: 'POST',
            headers: {
              Authorization: `DPoP ${token}`,
              DPoP: proof,
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ data: 'example' }),
          });

          // 5. Update nonce if server provides a new one
          const newNonce = response.headers.get('DPoP-Nonce');
          if (newNonce) {
            await this.$auth0.setDpopNonce(newNonce, 'my-api');
          }

          return response.json();
        } catch (error) {
          if (error instanceof UseDpopNonceError) {
            console.error('DPoP nonce validation failed:', error.message);
          }
          throw error;
        }
      },
    },
  };
</script>
```

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

### v1 buildAuthorizeUrl usage

Source: https://github.com/auth0/auth0-vue/blob/main/MIGRATION_GUIDE.md

Example of using buildAuthorizeUrl in v1, common with Ionic.

```typescript
const { buildAuthorizeUrl } = useAuth0();
const url = buildAuthorizeUrl();
await Browser.open({ url });
```

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

### Create a Sample Application

Source: https://github.com/auth0/auth0-vue/blob/main/tutorial/vue2-login.md

Commands to create a new Vue 2 application using the Vue CLI, add the router, and navigate into the project directory.

```bash
# Install the CLI
npm install -g @vue/cli

# Create the application using the Vue CLI.
# When asked to pick a preset, accept the defaults
vue create my-app

# Move into the project directory
cd my-app

# Add the router, as we will be using it later
# Select 'yes' when asked if you want to use history mode
vue add router
```

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

### v2 logout with openUrl

Source: https://github.com/auth0/auth0-vue/blob/main/MIGRATION_GUIDE.md

Example of replacing buildLogoutUrl in v2 using logout with an openUrl callback.

```typescript
const { logout } = useAuth0();

client.logout({
  async openUrl(url) {
    await Browser.open({ url });
  }
});
```

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

### v2 loginWithRedirect with openUrl

Source: https://github.com/auth0/auth0-vue/blob/main/MIGRATION_GUIDE.md

Example of replacing buildAuthorizeUrl in v2 using loginWithRedirect with an openUrl callback.

```typescript
const { loginWithRedirect } = useAuth0();

await loginWithRedirect({
  async openUrl(url) {
    await Browser.open({ url });
  }
});
```

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

### v2 logout with logoutParams

Source: https://github.com/auth0/auth0-vue/blob/main/MIGRATION_GUIDE.md

Example of the new logout method signature in v2 using logoutParams.

```typescript
await logout({
  clientId: '',
  logoutParams: {
    federated: true / false,
    returnTo: '',
    any_custom_property: 'value'
  }
});
```

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

### Options API for MFA

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

This script demonstrates how to use the Options API with `this.$auth0.mfa` for MFA operations, including fetching an MFA token, retrieving authenticators, and verifying OTP codes.

```html
<script>
  import { MfaRequiredError } from '@auth0/auth0-vue';

  export default {
    data() {
      return {
        mfaToken: null,
        authenticators: []
      };
    },
    methods: {
      async fetchToken() {
        try {
          await this.$auth0.getAccessTokenSilently({
            authorizationParams: { audience: 'https://api.example.com' }
          });
        } catch (e) {
          if (e instanceof MfaRequiredError) {
            this.mfaToken = e.mfa_token;
            if (e.mfa_requirements?.enroll?.length) {
              // User needs to enroll — show enrollment UI
            } else {
              // User is already enrolled — show challenge UI
              this.authenticators = await this.$auth0.mfa.getAuthenticators(e.mfa_token);
            }
          }
        }
      },
      async verifyOtp(otpCode) {
        await this.$auth0.mfa.verify({
          mfaToken: this.mfaToken,
          otp: otpCode
        });
        // Refresh Vue reactive state (isAuthenticated, user, etc.)
        await this.$auth0.checkSession();
      }
    }
  };
</script>
```

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

### Discover Enrollment Options

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

This script demonstrates how to fetch available MFA enrollment factors using the `mfa.getEnrollmentFactors` method.

```html
<script>
  import { useAuth0 } from '@auth0/auth0-vue';
  import { ref } from 'vue';

  export default {
    setup() {
      const { mfa } = useAuth0();
      const enrollmentFactors = ref([]);

      const loadEnrollmentOptions = async (mfaToken) => {
        enrollmentFactors.value = await mfa.getEnrollmentFactors(mfaToken);
        // e.g. [{ type: 'otp' }, { type: 'phone' }, { type: 'push-notification' }]
      };

      return { enrollmentFactors, loadEnrollmentOptions };
    }
  };
</script>
```

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

### POST/PUT/DELETE requests with Composition API

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Demonstrates how to create, update, and delete posts using the fetcher with the Composition API, including DPoP proofs and base URL configuration.

```html
<script>
  import { useAuth0 } from '@auth0/auth0-vue';

  export default {
    setup() {
      const { createFetcher } = useAuth0();

      const fetcher = createFetcher({
        dpopNonceId: 'my-api',
        baseUrl: 'https://api.example.com',
      });

      return {
        createPost: async (postData) => {
          const response = await fetcher.fetchWithAuth('/posts', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(postData),
          });
          return response.json();
        },
        updatePost: async (postId, postData) => {
          const response = await fetcher.fetchWithAuth(`/posts/${postId}`, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(postData),
          });
          return response.json();
        },
        deletePost: async (postId) => {
          await fetcher.fetchWithAuth(`/posts/${postId}`, {
            method: 'DELETE',
          });
        },
      };
    },
  };
</script>
```

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

### v2 loginWithRedirect with openUrl for custom redirect

Source: https://github.com/auth0/auth0-vue/blob/main/MIGRATION_GUIDE.md

Example of handling custom redirects in v2 using loginWithRedirect with an openUrl callback, replacing redirectMethod.

```typescript
const { loginWithRedirect } = useAuth0();
await loginWithRedirect({
  async openUrl(url) {
    window.location.replace(url);
  }
});
```

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

### POST/PUT/DELETE requests with Options API

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Demonstrates how to create, update, and delete posts using the fetcher with the Options API, including DPoP proofs and base URL configuration.

```html
<script>
  export default {
    data() {
      return {
        fetcher: this.$auth0.createFetcher({
          dpopNonceId: 'my-api',
          baseUrl: 'https://api.example.com',
        }),
      };
    },
    methods: {
      async createPost(postData) {
        const response = await this.fetcher.fetchWithAuth('/posts', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(postData),
        });
        return response.json();
      },
      async updatePost(postId, postData) {
        const response = await this.fetcher.fetchWithAuth(`/posts/${postId}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(postData),
        });
        return response.json();
      },
      async deletePost(postId) {
        await this.fetcher.fetchWithAuth(`/posts/${postId}`, {
          method: 'DELETE',
        });
      },
    },
  };
</script>
```

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

### Multiple API Endpoints (Options API)

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Presents the Options API equivalent for managing multiple API endpoints with distinct fetchers.

```html
<script>
  export default {
    data() {
      return {
        internalApi: this.$auth0.createFetcher({
          dpopNonceId: 'internal-api',
          baseUrl: 'https://internal.example.com',
        }),
        partnerApi: this.$auth0.createFetcher({
          dpopNonceId: 'partner-api',
          baseUrl: 'https://partner.example.com',
        }),
      };
    },
    methods: {
      async fetchInternalData() {
        const response = await this.internalApi.fetchWithAuth('/data');
        return response.json();
      },
      async fetchPartnerData() {
        const response = await this.partnerApi.fetchWithAuth('/resources');
        return response.json();
      },
      async fetchAllData() {
        const [internal, partner] = await Promise.all([
          this.internalApi.fetchWithAuth('/data'),
          this.partnerApi.fetchWithAuth('/resources'),
        ]);
        return {
          internal: await internal.json(),
          partner: await partner.json(),
        };
      },
    },
  };
</script>
```

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

### generateDpopProof Example

Source: https://github.com/auth0/auth0-vue/blob/main/docs/interfaces/Auth0VueClient.html

Example of how to generate a DPoP proof JWT.

```typescript
const proof = await generateDpopProof({
  url: 'https://api.example.com/data',
  method: 'GET',
  accessToken: token
});
```

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

### Multiple API Endpoints (Composition API)

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Illustrates how to create and manage separate fetchers for different API endpoints, ensuring independent nonce management for each.

```html
<script>
  import { useAuth0 } from '@auth0/auth0-vue';

  export default {
    setup() {
      const { createFetcher } = useAuth0();

      // Create separate fetchers for different APIs
      const internalApi = createFetcher({
        dpopNonceId: 'internal-api',
        baseUrl: 'https://internal.example.com',
      });

      const partnerApi = createFetcher({
        dpopNonceId: 'partner-api',
        baseUrl: 'https://partner.example.com',
      });

      return {
        fetchInternalData: async () => {
          const response = await internalApi.fetchWithAuth('/data');
          return response.json();
        },
        fetchPartnerData: async () => {
          const response = await partnerApi.fetchWithAuth('/resources');
          return response.json();
        },
        fetchAllData: async () => {
          const [internal, partner] = await Promise.all([
            internalApi.fetchWithAuth('/data'),
            partnerApi.fetchWithAuth('/resources'),
          ]);
          return {
            internal: await internal.json(),
            partner: await partner.json(),
          };
        },
      };
    },
  };
</script>
```

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

### Example: SMS challenge

Source: https://github.com/auth0/auth0-vue/blob/main/docs/interfaces/MfaApiClient.html

Example of initiating an SMS challenge for MFA.

```typescript
const challenge = await mfa.challenge({
  mfaToken: mfaTokenFromLogin,
  challengeType: 'oob',
  authenticatorId: 'sms|dev_xxx'
});console.log(challenge.oobCode); // Use for verification
```

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

### Challenge Flow - Recovery Code

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

This code demonstrates how to use a recovery code to verify MFA and includes a warning to save the new recovery code if one is provided.

```html
<script>
  import { useAuth0 } from '@auth0/auth0-vue';
  import { ref } from 'vue';

  export default {
    setup() {
      const { mfa, checkSession } = useAuth0();
      const recoveryCode = ref('');

      const verifyRecoveryCode = async (mfaToken) => {
        const tokens = await mfa.verify({
          mfaToken,
          recoveryCode: recoveryCode.value
        });
        // Auth0 rotates the recovery code on use — save the replacement or the
        // user will be locked out if they need to fall back again.
        if (tokens.recovery_code) {
          console.warn('Save your new recovery code:', tokens.recovery_code);
        }
        // Refresh Vue reactive state (isAuthenticated, user, etc.)
        await checkSession();
      };

      return { recoveryCode, verifyRecoveryCode };
    }
  };
</script>
```

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

### Base URL Configuration (Composition API)

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Demonstrates how to configure a fetcher with a base URL to simplify API requests to a specific domain. It also shows that absolute URLs are not affected by the baseUrl.

```html
<script>
  import { useAuth0 } from '@auth0/auth0-vue';

  export default {
    setup() {
      const { createFetcher } = useAuth0();

      const fetcher = createFetcher({
        dpopNonceId: 'my-api',
        baseUrl: 'https://api.example.com',
      });

      return {
        getFoo: async () => fetcher.fetchWithAuth('/foo'), // => https://api.example.com/foo
        getBar: async () => fetcher.fetchWithAuth('/bar'), // => https://api.example.com/bar
        getXyz: async () => fetcher.fetchWithAuth('/xyz'), // => https://api.example.com/xyz

        // If the passed URL is absolute, `baseUrl` will be ignored for convenience:
        getFromOtherApi: async () => fetcher.fetchWithAuth('https://other-api.example.com/foo'),
      };
    },
  };
</script>
```

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

### skipRedirectCallback Example

Source: https://github.com/auth0/auth0-vue/blob/main/docs/interfaces/Auth0PluginOptions.html

Example demonstrating how to use `skipRedirectCallback` to prevent the SDK from handling certain URLs.

```typescript
createAuth0({}, {  skipRedirectCallback: window.location.pathname === '/other-callback'})
```

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

### Session Transfer Token Query Parameter Example

Source: https://github.com/auth0/auth0-vue/blob/main/docs/interfaces/Auth0VueClientOptions.html

Example of how to configure the sessionTransferTokenQueryParamName option when creating the Auth0 client.

```javascript
const auth0 = await createAuth0Client({  domain: '<AUTH0_DOMAIN>',  clientId: '<AUTH0_CLIENT_ID>',  sessionTransferTokenQueryParamName: 'session_transfer_token'});
```

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

### Example of openUrl usage with window.location.replace

Source: https://github.com/auth0/auth0-vue/blob/main/docs/interfaces/LogoutOptions.html

This example shows how to use the `openUrl` function to handle the redirect yourself by using `window.location.replace`.

```typescript
await auth0.logout({  openUrl(url) {    window.location.replace(url);  }});
```

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

### Custom Token Exchange (Options API)

Source: https://github.com/auth0/auth0-vue/blob/main/EXAMPLES.md

Alternative implementation of Custom Token Exchange using the Options API.

```html
<script>
  export default {
    methods: {
      async exchangeToken(externalToken) {
        try {
          await this.$auth0.loginWithCustomTokenExchange({
            subject_token: externalToken,
            subject_token_type: 'urn:your-company:legacy-system-token',
            audience: 'https://api.example.com/',
            scope: 'openid profile email'
          });
        } catch (e) {
          console.error('Token exchange failed:', e);
        }
      }
    }
  };
</script>
```