Maintaining App Roles in both SPA and API about ms-identity-javascript-angular-tutorial

[BGajda13]

I'm facing the same problem.

I haven't found any other better option than reading roles in App from access_token...

[Thnslj]

I'm facing the same problem.

I haven't found any other better option than reading roles in App from access_token...

Hi @BGajda13 . I also asked the same question here, but still not a good solution: AzureAD/microsoft-authentication-library-for-js#4389

---

When are you reading the access_token? Do you immediately after login get an access_token and look in it? or do you try to call your api, then first then get the access_token?

[bastek338]

Hi @Thnslj, we use React in our project, but maybe this approach will work for you as well.

import { useMsal } from '@azure/msal-react'
import { loginRequest } from '@shared/auth/authConfig' // loginRequest contains { scopes: [YOUR_SCOPE] }
import jwt_decode from 'jwt-decode'

const useGetTokenHook = () => {
 
   const { instance, accounts, inProgress } = useMsal()

    const getToken = async () => {
        try {
            const response = await instance.acquireTokenSilent({
                ...loginRequest,
                account: accounts[0],
            })
            const decodeToken: any = jwt_decode(response.accessToken)
        } catch (error) {
            console.error(error)
        }
    }

    useEffect(() => {
        if (inProgress === 'none' && accounts.length > 0) {
           getToken()
        }
    }, [inProgress, accounts, instance])
}

However, it is still reading the roles from access_token

You can find more in these sources

https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/acquire-token.md
https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md

If you want send some information to your API every time you make request i recommend put logic from getToken() for example in axios interceptors

Another example might be reading token from localStorage, so you don't need call API every time. We rely on the library for this.

    const { instance } = useMsal()

    const localStorageAccessTokenKey = Object.keys(
        (instance as any).browserStorage.browserStorage.windowStorage
    ).find((key) => key.includes('accesstoken')) as string

    const accessToken: any = JSON.parse(
        window.localStorage.getItem(localStorageAccessTokenKey) as string
    )?.secret

    const decodeToken: any = jwt_decode(accessToken)
    const accountRoles = decodeToken.roles

It is still a workaround, but we don't have to ask for the token every time

[github-actions]

This issue has not seen activity in 14 days. If your issue has not been resolved please leave a comment to keep this open. It will be closed in 7 days if it remains stale.

[github-actions]

This issue has been closed due to inactivity. If this has not been resolved please open a new issue. Thanks!