SPA Email Domain Whitelist Error Handling

[DougW]

Greetings!

I am working with a new auth0 implementation using VueJS as the SPA framework following the getting started instructions. I have added the “email domain whitelist” rule with the intention of preventing sign-ups from non-approved domains.

Upon signing up with a non-approved email domain, the authorization rule fails and returns to the application’s base URL as follows: https://localhost:<PORT>/?error=unauthorized&error_description=Access%20denied.&state=<STATE> and keeps looping the page reload for some reason and adding more auth0 cookies. I have narrowed this to the authGuard (implemented per the instructions listed above), but I can’t yet explain this behavior.

In another post, I read, “in case there is an unexpected error in the authentication process, forward it to the callback URL so the application can handle it.”. I’m not sure how to properly configure the application for this, nor am I sure if / how to use the generic “error pages”. Could someone shed a little light on this issue?

Thanks!

[supun]

Hey @DougW!

Welcome to Auth0 community! It seems like the error which is thrown from the Rule, and it is sent back to your application’s callback URL. Now that the error is handed over to the application, we need to set up how it’s handled. That’s where I believe the application is stuck.

While I try to reproduce this error, can you share a code snippet where you handle the callback? That would be helpful to pinpoint the issue.

Thanks.

[DougW]

It appears you were correct, I needed to handle the error in my application. Also, I was missing the redirect_uri parameter from the .loginWithRedirect() method in authGaurd.js:

authService.loginWithRedirect({
  appState: { targetUrl: to.fullPath },
  redirect_uri: 'https://localhost:8080/error',
});

[konrad.sopala]

Glad you have it working now @DougW!