The Complete Guide to Angular User Authentication with Auth0

robertino.calcaterra · October 9, 2020, 4:09pm

Learn how to add user authentication to Angular using Observables and HTTP Interceptors.
Read more…

Brought for you by @dan-auth0

robertino.calcaterra · October 9, 2020, 6:16pm

What are you thoughts guys? Share it in the comments!

domfarr · October 15, 2020, 6:43am

Excellent post; well laid out; easy to follow; detailed where needed to be.

I tripped up in only 1 place:
When configuring the .env file in the express sample API, added the AUTH0_ISSUER_URL, the URL much have a trailing forward slash [/]. If this is missing then the check-jwt constant creates malformed URL. This will result in a 60 second timeout to Auth0.


Error: connect ETIMEDOUT 92.242.132.24:443
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1145:16) {
  errno: -60,
  code: 'ETIMEDOUT',
  syscall: 'connect',
  address: '92.242.132.24',

Missing forward slash
https://[tentan].auth0.com.well-known/jwks.json

With forward slash GOOD
https://[tentan].auth0.com/well-known/jwks.json

Hope this helps.

konrad.sopala · October 15, 2020, 9:17am

Thanks for sharing that with the rest of community!

dan-auth0 · October 15, 2020, 11:34am

Howdy, Dom! Thank you for reading the blog post and your feedback

That’s correct, the entire issuer URL must be used as present in the code snippet from the “Quickstart > Node.js” codebox:

Without the trailing slash, it fails. Since this often trips people, I am going to add a note warning the reader to ensure the trailing slash is present. Thank you!

lugax16 · October 24, 2020, 5:36pm

i am getting this error WARNING in ./node_modules/@auth0/auth0-angular/fesm2015/auth0-auth0-angular.js 49:26-44 "export 'ɵɵdefineInjectable' was not found in '@angular/core'.Actually it is warning but it prevent my app to run…i am assuming this might be version issue.Can anyone please help?Below are other details…

   "@auth0/auth0-angular": "^1.2.0",

Angular CLI: 7.3.10
Node: 12.18.4
OS: win32 x64
Angular: 7.2.16```

dan-auth0 · October 25, 2020, 7:53pm

Hello. Thank you for joining the Auth0 community. Can you try the options given in this StackOverflow question, please?

It seems the error you are getting is related to conflicting package versions.

lugax16 · October 25, 2020, 10:19pm

I did try above stackoverflow question…it seems your auth0 Angular SDK works with Angular 10 and I am using angular 7.Do you have the SDK which is compatible with Angular 7?

dan-auth0 · October 28, 2020, 12:00pm

Let me check with the SDK dev team if there is a minimum required Angular version for the Auth0 Angular SDK

dan-auth0 · October 28, 2020, 12:52pm

I checked with the team and the README for the Auth0 Angular SDK states that:

A library for integrating Auth0 into an Angular 9+ application.

Sorry about that. I’ll update the blog post to highlight the supported versions.

For Angular versions below 9, you can use the Auth0 SPA SDK:

Please let us know if you have any questions implementing Auth0 in your Angular apps using the Angular SPA SDK in a new topic here:

We do encourage customers to update to Angular 9 or higher when possible as the long term support (LTS) for Angular 7 has ended and LTS for Angular 8 ends in Nov 28, 2020.

TaxPayer · October 30, 2020, 11:35pm

@dan-auth0, thanks for the article. I tried to find some article on how to build a custom AuthGuard, but couldn’t find one.

Current AuthGuard only protects routes from unauthenticated users, but let’s say I’d like an AuthGuardAdmin that would check for unauthenticated users and authenticated users with an admin role (or any other valid logic). Is there a way to extend AuthGuard to build that custom route guard?

Thanks,
Rod

dan-auth0 · November 2, 2020, 2:44pm

Howdy, Rodrigo! Thanks for reading the post. That’s one of the most important follow-ups I am looking to create for the React, Angular, and Vue guides: Role-Based Access Control. I got it working for React but I have not tried yet with Angular. I’ll keep this thread updated when new articles come out. Perhaps someone else here has some insight on a strategy to use for that too.

TaxPayer · November 2, 2020, 9:52pm

@dan-auth0 Thanks for the feedback. I’ll take a look at the repo and see if I can figure out some ideas on that.

Regards,
Rod

konrad.sopala · November 30, 2020, 8:24am

Let us know if you have any other questions down the road!

phortonssf · December 10, 2020, 12:32am

I am using the new angular auth0 SDK everything works great as far as authentication and the guards. The one issue I run into is when using the redirect_uri that has an angular route on the end of my base url.
When using the
Auth0-Angular-Sample
After adding http://localhost:4200/profile as my redirect uri in the auth.config.json and on auth0 allowed redirects.

For example after a successful login with Auth0 I am redirected to

localhost:4200/profile?code=…&state=…

The above url will load then it appears angular is immediately redirecting to my baseurl, localhost:4200. I have made no changes other than adding “http://localhost:4200/profile” to my redirect uri in auth.config.json.

Is this a bug or working properly in that angular-sdk will not redirect to a route within the SPA? If not a bug what is the proposed solution another redirect from localhost:4200, if logged in go to /profile? Thank you.

dan-auth0 · December 10, 2020, 10:53pm

Hello Thanks for reading the blog post. Could you please describe step by step what’s your desired user experience? What is the flow that you want to accomplish, please?

phortonssf · December 11, 2020, 5:58pm

Desired result the user logins and I can direct them to something other than the base domain upon a succesful login, localhost:4200/profile vs localhost:4200 Currently, adding a route to the end of the redirectUri does not work as expected.

To duplicate, the issue in the Auth0-Angular-Sample Repo,
Set the redirectUri to localhost:4200/profile in the environment.ts upon successful login the browser will redirect to as intended.
localhost:4200/profile?code=…&state=…
However, it immediately navigates back to localhost:4200.

My question is, is that behavior a bug or working as intended? If working as intended, what is the recommended solution to navigate the user to a route within the angular app?
Thank you.

dan-auth0 · December 16, 2020, 2:15pm

Gotcha! I want to update the tutorials with how to do just that. I was discussing this behavior with one of our SDK engineers last month and coming up with the best way to implement that.

I am finishing up a few projects for Q4 end of year, I can’t make any promise that I’ll get to update the tutorial, but I can do my best to share a code sample with you. Would that work?

phortonssf · December 16, 2020, 9:07pm

Thank you for the response.
My primary concern is if that is a bug vs the intended behavior. If you have a recommended approach to achieve the desired behavior I am open to that. I don’t need the actual code implementation or demo just a recommendation on a technique. As of now my current approach is to have a guard to redirect if they are authenticated on the base domain.

dan-auth0 · January 4, 2021, 10:27pm

Howdy, Peter! I just got back from holiday break I’ll allocate some time this week to look into this