How to resolve warnings when Calling MSAL.js from Typescript

Question

I'm having some success in incorporating this authentication code (https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/1-Authentication/1-sign-in) into https://github.com/Azure-Samples/todo-csharp-sql-swa-func/tree/main/src/web/src.

I can now sign in and authenticate. However, I'm having some troubles with my code review because I'm getting warnings on account of the fact that I'm copying javascript code from jsx files to tsx files.

1. See https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/blob/main/1-Authentication/1-sign-in/SPA/src/index.js#L14 . When I copy and paste this code to a tsx file, VSCode and Web storm tell me PublicClientApplication is returning an object of type "any" but I get a warning (Unexpected any. Specify a different type @typescript-eslint/no-explicit-any) from https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/blob/main/1-Authentication/1-sign-in/SPA/src/App.jsx#L50 for having an argument of type "any". What can I do? What should I do?
2. Getting the account at https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/blob/main/1-Authentication/1-sign-in/SPA/src/index.js#L25 is a problem (an error) because there is no property called account. I ended up doing

const account = (event.payload as any).account;

and this works except for the warning "Unexpected any. Specify a different type @typescript-eslint/no-explicit-any"

Thanks!

Siegfried

Answer 1

You have configured eslint to print warnings for use of any. You fix it by replacing any with a valid type. I assume you meant to use AuthenticationResult. See ts example:

.

https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/a81fcef3d82523e03828d91bb0ee8d2ab2cc20d8/samples/msal-react-samples/typescript-sample/src/index.tsx#L22