Unable to authenticate with sample Angular app

Good afternoon,

I’ve created an Auth0 application and then cloned this angular sample application: auth0-angular-samples/Sample-01 at main · auth0-samples/auth0-angular-samples · GitHub. After I renamed auth_config.json.example to auth_config.json, and added my domain, clientId, and audience (from the Auhth0 dashboard), added my API audience in the environments.ts file, and set the value ‘http://localhost:4200’ to Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins sections in the Auth0 dashboard. Then, I started the dev servers (with npm run dev), and accessed the application. After clicking on the login button, and entered the credentials for an existing account, I wasn’t able to login (see screenshots). I noticed that the /oauth/token request is returning a 401 (see screenshots), with the response ‘access_denied, not authorized’, even though I didn’t tamper and of the login logic in the app. Moreover, I noticed in the app logs dashboard 2 logs that occurred at the exact time I attempted to login (see screenshot). The first log refers to a successful login, related to my application, however, the second one is unsuccessful and unrelated to my application. Why does the login process behave like this, initiating 2 requests? Could someone please explain why the login process is not working properly and how can I fix it? I need to implement Auth0 in another app, and the documentation was not helpful. I would really appreciate your help! Thank you in advance!

With respect,
Mathias

Hi @mathias-onu,

Welcome to the Auth0 Community!

I understand you are getting an Unauthorized error in your Angular Sample app. I just cloned that same project and was able to login. I think this is a simple configuration issue. Can you kindly provide me the name of your tenant so I can take a look?

Regarding the two log events on login, this is expected behavior. There is a Successful Login and (usually) a Successful Exchange. The Successful Exchange log indicates that there was a successful exchange of an authorization code for an Access Token. This is how the Authorization Code Flow works.

Relevant documentation:

Best,

Mary Beth

Hello! Thanks for taking the time to reply. I got an answer, in the meantime, from Auth0 support, and the problem was a setting in the Auth0 dashboard, regarding Token Endpoint Authentication Method. This must be changed to none for SPAs. To change the value of the Token Endpoint Authentication Method field please follow these steps:

  • Navigate to the Application Settings in the Dashboard
  • Look for Application Type under Application Properties
  • Change your application type to Regular Web Application and Save Changes
  • Navigate to the newly visible Credentials tab
  • Set the Authentication Method under Application Authentication to None and click Save
  • Go back to the Application Type section and change it back to Single-Page Application

Thanks!

1 Like

Hi @mathias-onu,

Great!! I’m happy to hear Support was able to help resolve this issue. I’ve marked your reply as the solution to help any future viewers.

Have a great day!

Best,

Mary Beth

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.