Auth0 SDK for Vue

Auth0-Vue v2 no longer supports Internet Explorer 11 (IE11) because the underlying Auth0-SPA-JS library has removed all IE11-specific polyfills to reduce bundle size by 60%.

If your application must support older browsers (like IE11, Opera Mini, or specific mobile browsers) that require the following features, you must manually include them in your application:

• AbortController
• Promise
• Core-js (for string/startsWith, string/includes, set, symbol, array/from, array/includes)
• fast-text-encoding (for TextEncoder and TextDecoder)
• unfetch (for fetch)

When implementing methods that mutate authentication state, you must route the operation through the __proxy() method. This ensures that isAuthenticated, user, and idTokenClaims are updated correctly and that any errors are captured into the error ref. Bypassing __proxy() will result in stale reactive state and unhandled errors.

// ✅ Good: state is refreshed and errors are captured
async loginWithPopup(options?: PopupLoginOptions) {
  return this.__proxy(() => this._client.loginWithPopup(options));
}

// ❌ Bad: reactive state stays stale; error ref never updates
async loginWithPopup(options?: PopupLoginOptions) {
  return this._client.loginWithPopup(options);
}

All public state on Auth0Plugin must be defined as a Vue Ref<T> to ensure template reactivity. Using primitive types instead of Ref will prevent Vue components from automatically updating when authentication state changes.

// ✅ Good: ensures components re-render when state changes
public isAuthenticated: Ref<boolean> = ref(false);

// ❌ Bad: components will not update when this value changes
public isAuthenticated: boolean = false;

The Auth0Plugin uses a __proxy() mechanism to ensure that any method mutating authentication state also refreshes reactive properties like isAuthenticated, user, and idTokenClaims, and captures errors into the error ref.

If you are extending the plugin or implementing new auth methods, ensure they call __proxy() after state mutations. If you call this._client directly without __proxy(), the reactive state will remain stale and Vue components will not re-render.

Exceptions: loginWithRedirect and logout (when not using openUrl) do not require __proxy() because they either navigate away or complete inline.

When using useAuth0() in child components via Vue's provide/inject pattern, methods can lose their this context. While the Auth0Plugin automatically binds its prototype methods, you must avoid defining new methods as arrow-function class fields (e.g., myMethod = () => ...).

Arrow-function class fields are assigned to the instance rather than the prototype, which bypasss the automatic binding mechanism and will cause errors when the method is called from an injected reference.

The SDK is built using Vue's reactive API. When accessing SDK properties (like user) outside of a component's setup() or lifecycle hooks, you must unwrap the reactive values.

Use Vue's toRaw function to get the underlying object, and access the value via .value if it is a Ref.

const user = toRaw(auth0.user).value;
console.log(user.name);

Step-Up Authentication is a low-code way to handle MFA. Instead of building custom UI, you can configure the SDK to automatically open a Universal Login popup when MFA is required.

To use this, set interactiveErrorHandler: 'popup' in your createAuth0 configuration. When getAccessTokenSilently() encounters an MFA requirement, it will trigger the popup. Once the user completes MFA in the popup, the token is returned to your code transparently.

Possible Errors: If the popup fails, getAccessTokenSilently will throw:

• PopupOpenError
• PopupCancelledError
• PopupTimeoutError

app.use(
  createAuth0({
    domain: '<AUTH0_DOMAIN>',
    clientId: '<AUTH0_CLIENT_ID>',
    useRefreshTokens: true,
    interactiveErrorHandler: 'popup'
  })
);

Auth0-Vue v2 separates SDK configuration properties from properties sent to Auth0. Properties intended for Auth0 (like redirect_uri or audience) must now be placed inside the authorizationParams object. This affects the following methods:

• loginWithRedirect
• loginWithPopup
• getAccessTokenWithPopup
• getAccessTokenSilently

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

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