The happy flow: A user logs in.
I have a react application that requires users to log in with active the directory. I am using the msal-react package. When the user opens my website, he ends on a log-in screen, clicks the login button, and the following code works wonders:
const { instance } = useMsal();
await instance.loginRedirect(authRequest);
Voilà and I am done. Now any time I need a new token, I can use the acquireTokenSilent() method, and I can see account information from my instance.getAccount() method.
Where problems arise: Public QR codes.
I want a person to be able to scan a QR code, and land on a particular page. All my back-end calls still require an Azure access_token, so my idea is the following:
- I’ve created a “public” user with a very strong password and practically no permissions.
- I’ve properly encrypted and encoded the login credentials for this user into MY_BASE64_TOKEN
- After scanning qr code, the user lands on https://frontend.com?t={MY_BASE64_TOKEN}.
- The frontend calls the backend like so https://mybackend.com/api/auth?myToken={MY_BASE64_TOKEN}
- The backend decrypts the password, calls azure ROPC login, and returns an azure_access token to the frontend.
- CHALLENGE: I now have access tokens in my frontend. Hurrah! But it would be so nice if I could now use all my msal logic. This way, tracking active accounts and acquiring new tokens would already be handled for me. If there was a method like msalInstance.setAccountByJwtToken(access_token), or something, then everything could be set. As far as I understand it, the only way for msal to set the account is to force a user through a login flow.
Am I making this too difficult? Or is there a simply approach I am overlooking?
I’ve read the documentation figured I could maybe trick msal into thinking I’ve already logged in. My idea was that I could retrieve the information about my account, and then call msalInstance.setAccount(myAccount), then set the JWT token in the cache, and then call acquireTokenSilently, but I couldn’t get it to work.