auth0/auth0-vue

Using user+organization flow (Both) - can't get data about the organization

avivday2 opened this issue · 6 comments

Checklist

  • The issue can be reproduced in the auth0-vue sample app (or N/A).
  • I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
  • I have looked into the API documentation and have not found a suitable solution or answer.
  • I have searched the issues and have not found a suitable solution or answer.
  • I have searched the Auth0 Community forums and have not found a suitable solution or answer.
  • I agree to the terms within the Auth0 Code of Conduct.

Description

When using the "Both" flow for personal accounts and organizations, no data about the current selected "org" or "personal account" is being attached, no way to know what the user chose.
Tried to add some info in Flows, but no luck as well.

Reproduction

  1. Choose "Both flow"
  2. Check out user or idTokenClaims to see no data about org

Additional context

No response

auth0-vue version

2.2.1

Vue version

3.3.4

Which browsers have you tested in?

Chrome

Thanks for reaching out @avivday2!

When testing this against the local playground in the repo, I'm able to see the org_id claim in the payload when I select to authenticate using an organization, and it is not present when selecting a person account.

Are you able to reproduce this using either the playground or the vue sample with the same client id?

Hi @ewanharris thanks for answering!
Well, I can reproduce it on the vue sample when I use onBeforeMount in the App.vue and then I use

const accessToken = await auth0.getAccessTokenSilently();

I do it in my app to save the access token, and attach it to the API calls.
So my api expecting an "Authorization" header with a Bearer token.

Is there a better way to achieve what I am trying to do?

In the sample app, there is no actions made to a protected API - so it never use the access token, tried to check cookies/localstorage and I can't seem to find it.

Can you help me please?

P.S
It seems timing issue, until the first "token" call is not done, when trying to get the user it just don't get it with the org. But it shows other info.

Thanks!

Quick update,
It shows the org,
but
const accessToken = await auth0.getAccessTokenSilently();
returns with no org.
I checked the payload of the token - and it's without any org id.

Well, I found a solution.
I am not sure it's the best possible solution but I just watched the auth0.isLoading and auth0.isAuthenticted:

watch(
  [() => auth0.isLoading, () => auth0.isAuthenticated],
  ([isLoading, isAuthenticated]) => {
    console.log("got here", isLoading.value, isAuthenticated.value);
    if (!isLoading.value && isAuthenticated.value) {
      // perform getAccessTokenSilently here
    }
  },
  { immediate: true, deep: true },
);

Now, it waits for it to stop load and authenticate me before requesting an access token.

Seems legit for this issue.

@ewanharris I still wonder, the way I get access token, save it to localstorage and attach it to my next api call, is this a legit way to do it? You suggest something else?

@avivday2, waiting for at least isLoading to be true before retrieving the token should be good as that will ensure that the SDK has fully loaded before attempting any interactions. isAuthenticated should not be necessary, but it should avoid any login_required errors being thrown from getAccessTokenSilently.

The sample repository contains a Calling an API Sample that retrieves an access token and calls an API if that is useful.

Closing, as it looks like it's answered. Can always reopen if needed, just let us know!