Angular By Example: Authentication Essentials

Developer Hub
, ,
1

This Angular guide will help you learn how to secure an Angular application using Observables and HTTP Interceptors. You’ll learn how to use Angular along with the Auth0 Angular SDK to implement user authentication, route protection, and access protected data from external APIs.

2 Likes
2

on section " Add User Sign-Up to Angular", there is a problem with the “screen_hint” property for “this.auth.loginWithRedirect”:

Error: src/app/shared/components/buttons/signup-button.component.ts:18:5 - error TS2345: Argument of type '{ appState: { target: string; }; screen_hint: string; }' is not assignable to parameter of type 'RedirectLoginOptions<AppState>'.
  Object literal may only specify known properties, and 'screen_hint' does not exist in type 'RedirectLoginOptions<AppState>'.

Here the versions currently being used at package.json:

"dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@auth0/auth0-angular": "^2.0.0",
    "axios": "^0.27.2",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },

This probably can be resolved by using this block instead of the documented?:

handleSignUp(): void {
    this.auth.loginWithRedirect({
      appState: {
        target: '/profile',
      },
      authorizationParams: {
        screen_hint: 'signup'
      }
    });
  }
1 Like
3

on section “Add User Logout to angular”, there is a problem with the “returnTo” property for the “this.auth.logout”:

Error: src/app/shared/components/buttons/logout-button.component.ts:18:24 - error TS2345: Argument of type '{ returnTo: string; }' is not assignable to parameter of type 'Omit<LogoutOptions, "onRedirect">'.
  Object literal may only specify known properties, and 'returnTo' does not exist in type 'Omit<LogoutOptions, "onRedirect">'.

Here the versions currently being used at package.json:

"dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@auth0/auth0-angular": "^2.0.0",
    "axios": "^0.27.2",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },

This can probably be resolved by using this block instead of the documented?:

handleLogout(): void {
    this.auth.logout({ 
      logoutParams: {
        returnTo: this.doc.location.origin
      }
    });
  }
1 Like
5

Hello, Diego!

Thanks for following the guide and joining the Auth0 Community. There was a recent change on the SDK to another major version. We are working on updating the guide to support this new version.

You can solve this issue on the meantime by installing the Auth0 Angular SDK using this command:

npm install --save @auth0/auth0-angular@v1

We’ll update this forum as soon as the guides are updated. Thanks for your feedback!