The Complete Guide to Angular User Authentication with Auth0

Blog Discussions
44

I am running angular and express in wsl2. My browser is Chromium Edge in my windows computer.

45

Hi, @dan-auth0 @konrad.sopala Could anyone help me ? Thank you!

46

Hi, wondering if there are any updates regarding role-based access control for Angular?

1 Like
47

Tagging @dan-auth0 for visibility

49

I am looking to explore how we could use Auth0 Fine-Grained Authorization for this :slight_smile: Check out the Dev Preview, please:

2 Likes
52

(post deleted by author)

54

Hi! Thanks for the tutorial, it helps a lot in understanding the process with Angular. So I tried to get this going using standalone components. I’m quite new to Angular and so I couldn’t succeed… I think the critical part which is not working is the initialization of the AuthModule. I fired it in main.ts via:

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(AppRoutingModule),
    importProvidersFrom(BrowserAnimationsModule),
    importProvidersFrom(HttpClientModule),
    importProvidersFrom(
      AuthModule.forRoot({
        ...environment.auth,
        httpInterceptor: {
          ...environment.httpInterceptor,
        },
      })
    ),
  ],
});

In the app.component the definition looks like this:

@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
  imports: [CommonModule, MaterialModule, RouterModule, AuthModule],
})
export class AppComponent {
  constructor(public auth: AuthService) {}
  onLogin() {
    this.auth.loginWithRedirect();
  }
  onLogout() {
    this.auth.logout();
  }

}

The interesting, not working part is in the app.component.html:

  <button (click)="onLogin()">Login</button>
  <button (click)="onLogout()">Logout</button>
  <ul *ngIf="auth.user$ | async as user">
    <li>{{ user.name }}</li>
    <li>{{ user.email }}</li>
  </ul>

So here is what happens: Pressing the Login-Button => everything works. I get redirected to Auth0 and login. BUT it is not possible to show the information provided with user.email etc.

Any help is very much appreciated!!!

55

Hello! Welcome to the Auth0 Community. Thanks for investing time on reading that blog post. We have created a new developer guide that covers how to implement Auth0 with Angular Standalone components:

I recommend following that guide, please, as the “Complete Guide” has been deprecated.

Please let me us know if you have any further questions after checking out that new guide.

1 Like
57

Access to XMLHttpRequest at ‘https://dev-czlgesp1zy1yek0c.us.auth0.com/samlp/gsW1fyYHQ45kyKeEZPz9p4QVAUrnykvf?SAMLRequest=hZJRb9MwFIX%2FSuT3JE4Td57VVioraBUDsrUbYi%2FIdW5aq44dfJ1C%2BusJKUjjgfF6fY59vnM9Q9mYViy7cLAP8K0DDNGPxlgU48GcdN4KJ1GjsLIBFEGJzfLDnZgkVLTeBaecIS8srzskIvignSXRejUnX3m%2B40CrPK6A13Ex5TyWbJLFLC9qxnfFNZOcRE%2FgcfDMyXDFYETsYG0xSBuGEZ3kMZ3GOd3SqWBMsKuEs6tnEq0GFm1lGJ2HEFoUaVrBKVZnswdss3Of9XCkKukwkUMBNFGuSUfudI%2Bfs7r%2FcntfsGP%2FHt4%2Bl%2Bfrtrh%2FWj562x9PNYnK3%2FBvtK203b%2FOvbuIUNxut2VcftpsSbT808WNs9g14DfgT1rB48PdJe8Q1zglzcFhEJxymiK6VCoki9mvlGJswi%2F%2Bl3WWvlTPLhv%2FOGRcr0pntOqjd843MvwbIUuycaKruB6lorPYgtK1hmogMcZ9v%2FEgA8xJLQ0CSReXV%2F%2F%2BWouf’ (redirected from ‘http://localhost:3000/api/message’) from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

hi team,

kindly please try to help me .when i working with SAML authentication using with IDP as autho and SP is samltool.com.my frontend application is Angular and my backend is Node.js.when i calling the backend from Angular. iam getting above error(cors policy error).i tried too many different ways. i fedup to solve this error.please try to give me reply. tqs team.

58

Is the project running on localhost:3000 using Auth0 to secure it as well? If so, is it using SAML or OIDC? My guess is the “messages” API is secured by OAuth and you need to do two things:

  1. Modify the messages API to allow cross-origin requests from localhost:4200.
  2. Change your Angular frontend to use OIDC instead of SAML. Use the access token retrieved to talk to your backend.
1 Like
60

Hey @dan-auth0, I am using implicit flow for the authentication purpose in angular to but I am not getting a refresh token using that flow or using the checkSession method my access token is not renewing automatically in the background so because of that after the access token expires all APIs are failing and giving 401 error.

I want to generate a new access token before the token expires so my api calls will not fail.
So can you provide some solution on this?