Angular/TypeScript Authentication: Basic Access Control

Developer Hub
, , ,
1

This code sample demonstrates how to implement authentication in an Angular Single-Page Application (SPA) using the Auth0 Angular SDK.

2

After upgrading to new versions, nothing worked anymore.
I have now made 2 tutorials. Once the tutorial with Lumen as API and once with Angular as frontend.
When I now want to access the API with the Angular frontend, I get the error:
The JWT string must contain two dots

I have no idea where to start troubleshooting now. Is it a setting in Angular or is it the backend?

PHP: “auth0/auth0-php”: “^8.0”,
Angular: “@auth0/auth0-angular”: “^2.0.1”,

1 Like
3

Hello, Peter. Welcome to the Auth0 Community. When you set up the Angular code sample, did you set it up using the section to connect to an external API?

It sounds that you may be missing the Audience value to generate the JWT access token that your Lumen backend can use.

1 Like
4

I suspect the middleware in lumen is not correct. In the Auth0 example there is a different approach. Until now, there was always a middleware file for Lumen that worked for me. Now I can’t find anything.
My Angular project can access the Auth0 Lumen project. Actually I should use the necessary parameters.

5

Hello, @PeterSteiner. Welcome to the Auth0 Community. As @dan-auth0 mentioned, this is related to a missing configuration for the Audience value in the Angular application. Could you please try the following:

  1. Check out the basic-authentication-with-api-integration branch for the Angular code sample. This branch has the setup to get an access token from Auth0 that you can use to communicate with the API server.
  2. Ensure you have followed the steps in this section to connect the Angular project to the API server.

With this, you should be able to call the API server from the Angular application and get the relevant messages from the API.

If you made some changes to the Angular code sample or wanted to try something custom within that code sample. I suggest taking a look at the Call a Protected API from Angular section from the Angular Authentication By Example guide we have for Angular that explains more in detail the setup to connect with a protected API that uses Auth0.

Please let us know if this works well for you or if you need further assistance. We’re happy to help.

6

i have the following status:
angular can register with lumen.
Version at lumen: “auth0/auth0-php”: “^7.9”,

Lumen with the 8’s Branch does not work.
Unfortunately I can’t find a simple example for Lumen (php)

7

Hey @PeterSteiner, I’m sorry that isn’t working for you yet.

I want to clarify which version of Lumen you are using, and if you’re trying to adapt your Lumen’s API or using the Lumen/PHP code sample we’ve created to accomplish a custom implementation.

The Lumen code sample we’ve created uses the following main tooling versions:

  • Lumen v9.0.4
  • PHP v8.1.12
  • Auth0 PHP SDK v8.2.1, that requires PHP v8.0+

Unfortunately, the current version of the Auth0 PHP SDK only supports major versions than PHP v8.0+ since lower versions are no longer maintained by PHP.

Please, let us know so we can help you troubleshoot this issue.

8

Hi Developers,

I have integrated Angular with FastAPI using Auth0 and for the start it is working perfectly fine.

But, now I want to render different menu options in the front end depending on the type of user (i.e. admin, manager, user etc.).

So, how can I setup different role based screens in Angular when user login. Because I am not getting the details of menu permission list even though I tried to console it.

Can you help me with it?

PS: API’s are working fine with scope/permission based authentication. How to render screen on the basis of Role is the current concern.

Thanks and Regards,
Sachin.