I am building an application that a user can receive an access to by an internal worker. This works using a magic link, where the user will receive a one time link to authenticate in the app. Now I want the application to be secured with 2FA, so I decided that the link should also include a totp secret code in the form of a QR code that can be scanned. This will prompt an authenticator app (eg. Google Authenticator) to store the secret and generate TOTP codes. The web app (that is isntalled via angular PWA) will be mainly used on tablets and phones.
Now, the idea is that if a user wants to do some important operation in the app, or has somehow lost their session cookie and wants to re-authenticate(something like "forgot your password?" functionality), instead of using the magic links, they can simply use their totp code from the authenticator app to authenticate themselves. Because the user needs the phone (something they have) and the means to access the phone (fingerprint, face id, code), can this be considered inherently 2FA?
I have a few concerns about this. Let's say the user's unlocked device gets stolen. Then the attacker has gained the access to the app, because the application and the authenticator app is on the same device, and authenticators don't ask for the phone passcode when opening the app. But let's say an attacker somehow gets access to the user's session cookie, then they should not be able to access the app if it asks for the totp code, because the attacked doesn't have the device that the totp code in generated on.
So my question is, does this solution with totp code actually offer a true 2FA protection? Or would a simple passwordless magic link implementation offer the same level of protection. I would greatly appreciate any insights on best practices or suggestions for this authentication setup.