TypeError with CacheLocation

[jodonnell]

Describe the bug
I followed the documentation,
const config = {
auth: {
authority: (process.env.REACT_APP_AUTHORITY as string),
clientId: (process.env.REACT_APP_AAD_APP_CLIENT_ID as string),
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: true
},
};

and got a TypeError

Argument of type '{ auth: { authority: string; clientId: string; }; cache: { cacheLocation: string; storeAuthStateInCookie: boolean; }; }' is not assignable to parameter of type 'Configuration'.
Types of property 'cache' are incompatible.
Type '{ cacheLocation: string; storeAuthStateInCookie: boolean; }' is not assignable to type 'CacheOptions'.
Types of property 'cacheLocation' are incompatible.
Type 'string' is not assignable to type '"sessionStorage" | "localStorage" | undefined'. [2345]

I fixed it by import CacheLocation and casting my string
cacheLocation: ("localStorage" as CacheLocation),

[AndrewCraswell]

Could you share your tsconfig.json and your TypeScript version? I'm not seeing the same TypeError be thrown so I'd like to replicate the environment as close as possible to test again.

[jodonnell]

version 3.4.5

{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "noUnusedLocals": true, "jsx": "preserve", "baseUrl": "src" }, "include": [ "src" ] }

[skyshine999]

I am also facing same issue, can you help me how can i resolve cacheLocaation error

const config = {
auth: {
authority: 'https://login.microsoftonline.com/',
clientId: '3324324324g-4233-54545-2345a-3453453d’,
redirectUri: ’sampleApp://sample.apps.ap'
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: true
}
};

const authenticationParameters = {
scopes: [
'https://graph.microsoft.com/user.read'
]
}

export default class App extends Component {

loginCallback(){

}
logoutCallback(){

}
printAccountInfo(){

}

render() {
return (
<AzureAD
provider={
new MsalAuthProviderFactory(config, authenticationParameters, LoginType.Popup)
}
unauthenticatedFunction={this.loginCallback}
authenticatedFunction={this.logoutCallback}
accountInfoCallback={this.printAccountInfo}
/>

);

}
}

[jodonnell]

import { CacheLocation } from "react-aad-msal";
cacheLocation: ("localStorage" as CacheLocation),

this works. i think this is because type widening, the cacheLocation key "localStorage" is widenened to type string so you need to force the cast to be of CacheLocation. I'm no expert though!

[AndrewCraswell]

After a bit of investigation, it seems all the types involved are defined on msal, so I believe this issue originates from there. I myself do not get any of these errors, so it's a little strange to me. Can anyone repro this issue by just running the sample?

I think at the least it's fair to update the documentation since there's clearly an issue being experienced.

This should be a good first issue to fix unless someone can submit a fix for it I will see if I can find some time in the next few weeks. I'll be out of town frequently though so it will be delayed.

[AndrewCraswell]

I included the changes to the documentation described in this issue with my latest PR (#107) since I was editing the docs anyway. This isn't a resolution, but hopefully, it will help others who are implementing this component for the first time.

[jodonnell]

Hi @AndrewCraswell , this definitely seems like type widening to me, as this also works for me:

  const cacheLocation: 'localStorage' = 'localStorage';
  const config = {
    auth: {
      authority: (process.env.REACT_APP_AUTHORITY as string),
      clientId: (process.env.REACT_APP_AAD_APP_CLIENT_ID as string),
    },
    cache: {
      cacheLocation,
      storeAuthStateInCookie: true,
    },
  };

https://mariusschulz.com/blog/literal-type-widening-in-typescript

this also works for me

  const config = {
    auth: {
      authority: (process.env.REACT_APP_AUTHORITY as string),
      clientId: (process.env.REACT_APP_AAD_APP_CLIENT_ID as string),
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: true,
    } as const,
  };

as described here
microsoft/TypeScript#29510

[jodonnell]

the documentation looks good to me, but i suppose you could take your pick from these alternative syntaxes as well. personally i don't think i see any clarity benefits of one over another.

[jodonnell]

enum CacheStorage {
  LocalStorage = "localStorage",
  SessionStorage = "sessionStorage"
}
........
  const config = {
    auth: {
      authority: (process.env.REACT_APP_AUTHORITY as string),
      clientId: (process.env.REACT_APP_AAD_APP_CLIENT_ID as string),
    },
    cache: {
      cacheLocation: CacheStorage.LocalStorage,
      storeAuthStateInCookie: true,
    },
  };

that also works for me, so i suppose you could export this enum for usage, this definitely has a clarity benefit, but then you need to redefine this on top of msal's definition.

i think ideally the msal author might add this.

[AndrewCraswell]

Yeah, I'm just hesitant to redefine the CacheStorage since that type comes directly from MSAL. Having a second definition could trip people up, since depending on the one they use the functionality will be different. The best case would be for MSAL library to convert their type to an enum as it should have been from the beginning.

[jodonnell]

seems like at some point this will make it through to msal
AzureAD/microsoft-authentication-library-for-js#851

[sameerag]

Merged to dev today, we are releasing a patch sometime soon, the release should have this fix. We appreciate the contribution @jodonnell, Thankyou.