Why is `getAccessTokenSilently` telling the app I am logged out when fails?

Help
, ,
1

I am using the Vue SDK and I have the following…

      createAuth0({
        domain: import.meta.env.VITE_AUTH_ID,
        client_id: import.meta.env.VITE_CLIENT_ID,
        redirect_uri: `${window.location.origin}`,
        useRefreshTokens: true,
      }),
      let token;
      try {
        token = await getAccessTokenSilently({ });
      } catch (err) {
        console.warn(err);
        token = await getAccessTokenWithPopup({ });
      }

The problem is when the top one fails then it acts as if it logged out even when the popup one succeeds. How do I avoid that?

By logout I mean it rerenders and Vue recognizes isAuthenticated as false

const { loginWithRedirect, user, isAuthenticated } = useAuth0();
    <pre v-if="isAuthenticated">
        <code>{{ user }}</code>
    </pre>
    <pre v-else>
      <button @click="login">Log in</button>
    </pre>
2

If I add the audience and scope to the client config…

app.use(
    createAuth0({
      domain: "...",
      client_id: "...",
      audience: "https://earth-838.me.dev/go",
      scope: "access:go access:node",
      redirect_uri: window.location.origin,
      useRefreshTokens: true,
    }),
);

It works for the one audience but it doesn’t work for the other audience (https://earth-838.me.dev/node). I can’t find a way to add multiple audiences to the param.

So this works…

token = await getAccessTokenSilently({
  audience: "https://earth-838.me.dev/go"
  scope: "access:go"
})

But not this…

token = await getAccessTokenSilently({
  audience: "https://earth-838.me.dev/node"
  scope: "access:node"
})
3

So I noticed this…

But I am not sure what a logical API is, does that mean I just use one API (audience) for the entire app? Is there a way to authenticate multiple times with multiple audiences?