Error TS2339: The attribute 'scope' is not found in the 'JwtPayload' data type

Encountering an error in my IntelliJ IDE while trying to utilize decodedJwt.scope.

The specific error message reads: Property 'scope' is not available on type 'JwtPayload'. Suggestions offered by IntelliJ include: sub, aud, exp, iat, jti, iss, and nbf.

loadProfile(data: any) { 
    this.isAuthenticated = true;  
    this.accessToken = data['access-token']; 
    let decodedJwt = jwtDecode(this.accessToken);
    this.username = decodedJwt.sub; 
    this.roles = decodedJwt.scope;  
    window.localStorage.setItem("jwt-token", this.accessToken);
}

Prior usage of decodedJwt.scope was successful, but it has abruptly disappeared. Seeking advice from those who may have encountered this issue before or know how to rectify it.

angulartypescriptjwtnpm-package

Answer №1

The JWTPayload class does not have a scope property.

One suggested approach is to create a custom class (Auth0JwtPayload) that includes the scope property. Then, you can decode the JWT by calling jwtDecode and specifying the type as Auth0JwtPayload.

interface Auth0JwtPayload extends JWTPayload {
  scope: string;
}

let decodedJwt: Auth0JwtPayload = jwtDecode<Auth0JwtPayload>(this.accessToken);

Answer №2

It seems that the most recent update of the jwt-decode library no longer includes the scope property. I found success using version jwt-decode@^3.1.2.

<blink>
      authenticateUser(data: any) {
        this.isUserLoggedIn=true;
        this.token = data['access-token'];
        let decodedToken: any =  jwtDecode(this.token);
        this.username = decodedToken.sub;
        this.userType = decodedToken.scope;
        window.localStorage.setItem("auth-token", this.token);
    
      }
</blink>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to set up a background process within electron that captures a screenshot of the entire desktop?

I'm currently working on a Desktop application using Angular2 and Electron that captures screenshots of the entire desktop and saves them to a specified path on my PC. The code for capturing screenshots is implemented in the app.component.ts file, but ...

angularelectronbackground-process

Working with VsCode, @angular/cli, and implementing Bing Maps v8 typings

I am completely baffled by the challenges of getting everything to work harmoniously. My current version setup includes: VsCode v1.13.1 node v6.9.1 npm v5.1.0 @angular/cli v1.2.0 @angular v4.0.0 bingmaps v1.0.14 typescript v2.4.1 typings v2.1.1 Despite ...

angularnpmangular-clibing-mapstypescript-typings

Updating a behavior object array in Angular 5 by appending data to the end

After creating a service to share data across my entire application, I'm wondering if it's possible to append new data to an array within the userDataSource. Here is how the service looks: user.service userDataSource = BehaviorSubject<Array& ...

javascriptangulartypescript

Trigger an Angular2 component function from an HTML element by simply clicking a button

I'm just starting out with TypeScript and Angular2 and encountering an issue when trying to call a component function by clicking on an HTML button. When I use the **onclick="locateHotelOnMap()"** attribute on the HTML button element, I receive this ...

javascriptangularjsangulartypescript

"Utilizing React, implementing JWT/Cookie authentication, and setting up

As I continue to develop a web application, I have successfully implemented JWT authentication where the server generates the token and sends it to the client in an HttpOnly cookie. However, managing the authentication state during navigation has presented ...

reactjsauthenticationjwtnavigationclient

Is it possible to maintain component data in Angular while also incorporating dynamic components?

All the code you need can be found here: https://stackblitz.com/edit/angular-keep-alive-component?file=src/app/app.component.ts Is it possible to maintain the state of entered values when switching components? I am currently utilizing dynamic component r ...

javascriptangulartypescript

I am curious about the types of props for the methods within the 'components' object in react-markdown

Having some trouble using 'react-markdown' in NextJs 13 with typescript. TypeScript is showing errors related to the props of the 'code' method, and after searching online, I found a solution that involves importing 'CodeProps&apos ...

typescriptnext.jsreact-markdown

What causes the form to consistently show as invalid once it has been submitted?

register.html : <form [formGroup]="signupForm" (submit)="onSubmit()" class="form-detail"> <h2>Registration Form</h2> <div class="form-row-total"> <div class="form-row"> <in ...

htmlangulartypescript

Access the document within the Angular Material File Selection feature

I have implemented a Material file selection feature in my project. The code snippet below shows how I am doing it: <label for="uploadPicture" class="upload-file"> <mat-icon>add_a_photo</mat-icon> </label> <input type="file" ...

angulartypescriptangular-material

Discover the method of sending individual row data to a component using *ngFor in Angular 4

I need assistance with Angular as I am not very experienced in it. Here is the HTML code that I have: <tbody> <tr *ngFor="let data of employeeFilterLists"> <td>{{data.Code}}</td> <td (clic ...

angularngfor

React's memo and/or useCallback functions are not functioning as anticipated

Within my Home Component, there is a state called records, which I utilize to execute a records.map() and display individual RecordItem components within a table. function Home() { const [records, setRecords] = useState<Array<RecordType>>(l ...

javascriptreactjstypescriptreact-hooks

Angular2 and ES6 Promise in JavaScript - tackling the issue of undefined variables

I am working with an array of objects like the one shown below: let PAGES = [ new BasePage( 'home', 'test') ]; let pagesPromise = Promise.resolve(PAGES); My goal is to retrieve a BasePage object by calling the following met ...

javascripttypescriptangularecmascript-6

How to Change the Checked State of a Checkbox in React Material UI

I am faced with a situation where I have multiple checkboxes that are used to toggle table columns on and off. The code snippet demonstrates how it looks: const [fields, setFields] = useState<Set<string>>(new Set(["name"])); const ...

reactjstypescriptmaterial-ui

How can I include environment variables in an npm package and make modifications to it within an Azure build pipeline?

I recently developed an npm package that connects to various APIs on the backend. The package currently has hardcoded URLs to access these APIs. However, we often find ourselves needing to update these URLs to point to a different API version, which result ...

npmazure-devopsnpm-package

Example of Signature in TypeScript Function Declaration

While going through this documentation, I found myself puzzled by the concept of having a parameter that can be both an object and a function in JavaScript. type DescribableFunction = { description: string; (a: any): boolean; }; function doSomething( ...

typescript

What is the best approach to limit the return type of a function in JSX?

Is it possible to create a function where the return type should be a specific JSX type? For instance: const setHosting : <GitlabLogo> | <GithubLogo> = (h: Hosting) => ??? In this case, the return type must either be <GitlabLogo> or ...

reactjstypescriptjsx

What is the best way to merge two approaches for tallying items within each category?

I have an Angular 8 application that includes two methods for displaying the number of items in each category. These items are retrieved from the back-end and are categorized as follows: <mat-tab> <ng-template mat-tab-label> ...

javascriptangulartypescriptrefactoring

The password field value in an Angular form is not defined

After making some modifications to a sign-in template that worked perfectly before, I encountered an error when trying to submit the signup form. The error message reads as follows: ERROR TypeError: Cannot read property 'value' of undefined Here ...

angularangular-forms

What is the best way to trigger a function in React when a constant value is updated?

In my React application, I have 3 components. The parent component and two child components named EziSchedule and EziTransaction. Each component fetches its own data from an API. The data to display in the EziTransaction child component depends on the reco ...

reactjstypescriptreact-table

Error in Angular multiselect dropdown: Unable to retrieve the length of undefined property

counter: number = 0; getDatatypes(){ if(this.counter == 0) { if(this.appId != 0) { if(undefined != this.datatypes && this.datatypes.length) for (let i = 0; i < this.datatypes.length; i++) { this.ap ...

javascriptangularjsangular