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!

7

Hi @shepa006, welcome to the Auth0 Community!

Could you please double-check that your SSH agent is using your SSH key and try cloning the repository again?

The repository is public and is under the auth0-developer-hub organization, so you should be able to clone it. This GitHub - auth0-developer-hub/spa_angular_typescript_hello-world: Angular/TypeScript: Basic User Authentication Code Sample is the link to the repository.

Please be sure that you check out the starter branch to follow along with this guide.
I apologize, we forgot to share in this forum that we updated the guide. So yes, the guide is up to date and uses the new version v2 of the Auth0 Angular SDK.

If you have any problems or questions, feel free to reach out via this forum.

2 Likes