auth0/auth0-vue

Vue SDK Doesn't Handle Org Invitation Redirects

jdscolam opened this issue · 5 comments

jdscolam commented

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 receiving a routed callback with an organization invitation (e.g. https://127.0.0.1:8080/invitations?invitation={code}&organization{code}) the auth0.loginWithRedirect({organization: 'code', invitation: 'code'}) does not properly redirect to the invitation acceptance flow, therefore you need to manually drive to that URL. In addition the redirect after acceptance doesn't automatically get turned into a login by the Vue Auth0 SDK.

Reproduction

  1. Create an Auth0 SPA app with organizations enabled and the login url set to an https localhost (e.g. https://127.0.0.1:port/invitations)
  2. Install the Vue Auth0 sample app and add a new route to handle the invitation redirects
  3. Add a new Vue component to receive the redirect and check to make sure that organization and invitation are sent on the query string
  4. Attempt to use auth0.loginWithRedirect({...}) to pass the invitation and organization
  5. Notice that the redirect is sent to the login flow not the invitation acceptance flow
  6. When manually directing to the authorize/ endpoint notice how the login flow does not complete

Additional context

No response

auth0-vue version

2.2.0

Vue version

3.0.0

Which browsers have you tested in?

Chrome, Other

frederikprijck commented

Hello,

Can you please try

auth0.loginWithRedirect({ 
  authorizationParams: { 
    organization: 'code', 
    invitation: 'code',
  }
})

With v2 of the SDK (which you are using), any property that needs to get sent to Auth0 has to be put in the authorizationParams.

Relevant docs: https://auth0.github.io/auth0-vue/interfaces/AuthorizationParams.html

Let me know if that helps.

jdscolam commented

Yup, that worked, thank you!

That being said it's REALLY poorly documented. Would you please update the Vue.js docs to cover the invitation flow/scenario?

Also, please allow the Application Login URI to be https://localhost... for dev purposes. Having to workaround with an IP is a nightmare.

frederikprijck commented

Thanks, we will update the docs to improve this.

Regarding localhost, that works. I work and test using localhost everyday, not using any ip such as 127.0.0.1, so no idea why that wouldnt work for you.

If you are referring to this field:

image

I leave this empty for all my testing, yet am able to use localhost fine.

Regardless, not something our SDK controls.

jdscolam commented

@frederikprijck Sad to say when I delete that entry I get the following error when creating an invitation: "A default login route is required to generate the invitation url. For more information, see https://auth0.com/docs/universal-login/configure-default-login-routes"

frederikprijck commented

Oh, apologies. It is in fact required for invitations I believe yes., but not for general login, my bad.

I would recommend providing product feedback over here, as this is not something we control from our SDK side.

  • 👍1