Problem: Not redirecting to Auth0 signup when using invitation

Get Help
,
1

Hi everyone,

We’re encountering an issue with our frontend Auth0 integration and would appreciate any insights.

Frontend setup:

  • Vue 3 SPA
  • Using @auth0/auth0-spa-js

Routing:

  • /login – redirects to Auth0 login
  • /signup – redirects to Auth0 signup
  • /callback – handles the Auth0 redirect after login/signup

Browser tested: Chrome (regular + incognito)

Problem:
When accessing our app via an invite link, the app is supposed to route to /signup, which then triggers a redirect to Auth0 with invitation and organization parameters. However, instead of doing this, it redirects directly to the callback route (/workspaces), even if the user is not yet authenticated.

Example of Invite URL:

https://app.example.com/signup?invitation=INVITE_CODE&organization=ORG_ID

fyi: Accessing /signup without the queryparams does redirect to auth0 signup form.

Code sample of the signup page:

		async onSignup() {
			const url = new URL(location.href);
			const qParams = url.searchParams;
			const organization = qParams.get('organization') || '';
			const invitation = qParams.get('invitation') || '';
			const callback = '/workspaces';
			AuthPlugin.loginWithRedirect({
				appState: { target: callback },
				authorizationParams: {
					scope: 'openid profile',
					prompt: 'login',
					screen_hint: 'signup',
					organization,
					invitation,
					redirect_uri: `${window.location.origin}${callback}`
				}
			});
		}

Auth0 Log

  • Error: invalid invitation ticket (client_id mismatch)
  • Indicates the client_id in the invite might not match the one used in the redirect.
{
  "description": "invalid invitation ticket (client_id mismatch)",
  "client_id": "XXX",
  "client_name": "XXX,
  "user_agent": "Chrome 135.0.0 / Mac OS X 10.15.7",
  "details": {
    "body": {},
    "qs": {
      "client_id": "XXX",
      "scope": "openid profile email",
      "audience": "XXX",
      "redirect_uri": "/workspaces",
      "prompt": "login",
      "screen_hint": "signup",
      "organization": "XXX",
      "invitation": "XXX",
      "response_type": "code",
      "response_mode": "query"
    },
    "error": {
      "message": "invalid invitation ticket (client_id mismatch)",
      "oauthError": "invalid_request",
      "type": "request-error"
    }
  },
  "auth0_client": {
    "name": "auth0-spa-js",
    "version": "2.1.3"
  },
  "$event_schema": {
    "version": "1.0.0"
  },
  "tenant_name": "personalai",
  "isMobile": false
}

Does anybody have any idea how to fix it?

3

Hi @imran.khan

Welcome to the Auth0 Community!

I believe the issue resides in the fact that you are trying to redirect the user to a /signup? endpoint instead of an /authorize? or a valid invite link.

You would need to generate an organization invite link via the Management API which would look something like this:

https://{{AUTH0_DOMAIN}}/authorize?
response_type=code&connection={{CON_ID}}&
client_id={{CLIENT_ID}}&
redirect_uri={{REDIRECT_URI}}&
invitation={{INVITATION_ID}}&
organization={{ORG_ID}}1X&organization_name={{ORG_NAME}}

If an invited used does not yet exist, they will be asked to create a password in order to signup:

image
image856×1642 74 KB

If you want to redirect to a specific signup page including an organization invite, you would need to follow the steps above or enable automatic membership for the organization whenever a user signs up.

If you have any other questions, let me know!

Kind Regards,
Nik

1 Like