Closed ocni-dtu closed 2 years ago
JonasKs
commented
2 years ago Can you de-code your token at https://jwt.io and show me how it looks? If you're not comfortable posting that information online, you can send it to me at jonas.svensson@intility.no.
Also, your react frontend is set up exactly as the OpenAPI app registration?
ocni-dtu
commented
2 years ago Sure here is a ~link to the token~(Removed by @JonasKs)
It says it cannot verify the signature.
Yes, the Azure setup should be the same:
JonasKs
commented
2 years ago Your tokens aud(audience) is for Microsoft Graph and not your backend application. So audience verification fails.
Can you provide some react code so I can see how it has been configured? Could it be that it fetches multiple tokens(maybe silently) and you’re using the wrong one?
If not, could you click login and copy the Azure URL you’re signing in from/redirected to?
JonasKs
commented
2 years ago On a side note: I'm not a frontend developer, but could it be an idea to switch to @azure/msal-react instead of using @azure/msal-browser?
ocni-dtu
commented
2 years ago Thanks for the help @JonasKs! So it turns out that I fucked up 🤦 The mistake was in the React code. Anyways I'm just going to explain below for anyone in the future.
// main.tsx
import { MsalProvider } from "@azure/msal-react";
import { msalInstance } from "./features/utils/aad";
ReactDOM.render(
<React.StrictMode>
<MsalProvider instance={msalInstance}>
<App />
</MsalProvider>
</React.StrictMode>,
document.getElementById("root")
);// features/utils/aad.tsx
import {
Configuration,
RedirectRequest,
PublicClientApplication,
EventMessage,
EventType,
AuthenticationResult,
} from "@azure/msal-browser";
export const msalConfig: Configuration = {
auth: {
clientId: import.meta.env.VITE_AAD_CLIENT_ID as string,
authority: `https://login.microsoftonline.com/${import.meta.env.VITE_AAD_TENANT_ID}`,
redirectUri: "http://localhost:3000/login",
},
cache: {
cacheLocation: "sessionStorage",
storeAuthStateInCookie: false,
},
};
export const msalInstance = new PublicClientApplication(msalConfig);
msalInstance.addEventCallback((event: EventMessage) => {
if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
const payload = event.payload as AuthenticationResult;
const account = payload.account;
msalInstance.setActiveAccount(account);
}
});
// MSAL.js v2 exposes several account APIs, logic to determine which account to use is the responsibility of the developer
const account = msalInstance.getAllAccounts()[0];
export const accessTokenRequest = {
scopes: [`api://${import.meta.env.VITE_AAD_APP_CLIENT_ID}/user_impersonation`],
account: account,
};The issue was that I had my accessTokenRequest without the id of the backend app registration
export const accessTokenRequest = {
scopes: [`user_impersonation`],
account: account,
};Glad you figured it out, and thanks for providing an example for future reference.
Have a good week 😊
Describe the bug
Hey all, Thanks for a great library! I have with success implemented the auth workflow with FastAPI and OpenAPI following your documentation I have a React frontend that needs to talk to the FastAPI backend and I have trouble getting it to work. I use the
"@azure/msal-browser"package to get the access token in React, but when I send it in the header to FastAPI I get the following error:I have followed the same steps as for OpenAPI to setup my React SPA in Azure.
To Reproduce
Stack trace