Rendering the QR Code

Hey Octavio,

Oh, so the QR code is not updated? I suppose you're using that scheb/2fa-qr-code we show in this video? It seems it was discontinued. From the package docs I see it suggest to use scheb_two_factor.security.totp_authenticator service instead, along with endroid/qr-code for QR code generation. See this specific section in docs: https://github.com/scheb/2fa/blob/6.x/UPGRADE.md#scheb2fa-qr-code-package

I would suggest you to go that new way instead for more robust flow, that way I bet you will control when to update your TOTP secret and the QR code.

Cheers!

Hey Victor,

I am using scheb_two_factor.security.totp_authenticator service, along with endroid/qr-code. Let me show you my code.

 #[Route('/authenticate/2fa/enable', name: 'app_2fa_enable')]
    #[IsGranted('IS_AUTHENTICATED_FULLY')]
    public function enable2fa(TotpAuthenticatorInterface $totpAuthenticator, EntityManagerInterface $entityManager)
    {
        $user = $this->getUser();
        if (!$user->isTotpAuthenticationEnabled()) {
            $user->setTotpSecret($totpAuthenticator->generateSecret());

            $entityManager->flush();
        }

        return $this->render('security/enable2fa.html.twig');
    }

    #[Route('/authentication/2fa/qr-code', name: 'app_qr_code')]
    #[IsGranted('ROLE_USER')]
    public function displayGoogleAuthenticatorQrCode(TotpAuthenticatorInterface $totpAuthenticator)
    {
        $writer = new PngWriter();

        $qrCodeContent = $totpAuthenticator->getQRContent($this->getUser());
        $qrCode = new QrCode($qrCodeContent);


        $result = $writer->write($qrCode);


        return new Response($result->getString(), 200, ['Content-Type' => 'image/png']);
    }

The versions I'm working with are "endroid/qr-code": "^6.0", "scheb/2fa-bundle": "^7.11" and "scheb/2fa-totp": "^7.11". Apart from the versions and the code shown, the other thing different from the video is that I added a property to the user of isTotpEnabled and use it in isTotpAuthenticationEnabled(), as the video suggested.

As I said in my first post, everything works fine, except that if the user goes to another page or logout, without confirming the 2fa enable, and tries to enable 2fa again; the rendered twig template shows the past QR code. But, if I refresh the page, it shows the QR with the updated secretTotp.

Hey Octavio,

Oh, OK. So, do you use the "Go Back" button in the browser when you return to the page with the stale QA code? It sounds like a possible browser cache of an image. I wonder if you have the stale image even if you click links on your website? Like what about the scenario:

1. You open the homepage
2. Click on the link that leads to the "enable 2FA" page to see the QR code
3. Wait for a few minutes
4. Click on the homepage
5. And click on the link that leads to the "enables 2FA" page again

Will you have the past QR code? I mean, it's difficult to see if it's the same or a different because of minor QR code changes. Do you have any errors with it? Did you try to scan it and use the actual TOTP code to confirm enabling? did you see any errors?

Could you teporarily dump that $qrCodeContent? Is it really the same hash you see on the 2st and 5th steps?

Cheers!

Victor,

Yes, I have the stale image even if I click on my website. And to verify the QR code does not coincide with the hash, I scan the QR code to verify is the stale QR code and check Doctrine's database to verify that the user has a different hash in the 5th step. I also tried to scan that code and confirm the enabling of 2fa, but it obviously doesn't work; the code that Authy gives me, doesn't let me sign in.

I just dumped the $qrCodeContent and is not the same hash on the 2st and 5th steps.

Hey Octavio,

Hm, good debugging work! So, it seems like the image was somehow cached by the browser, and I suppose the $qrCodeContent dump confirms it. As of a quick solution, I may think of do not regenerate the hash i.e. if the $totpSecret was already set - do not regenerate it. It should fix the problem with stale image, because the image should be still valid this way.

Otherwise, you should somehow force browser to udpate the image properly. I wonder if you just add the timestamp to the image URL, so that the URL was something like this /authentication/2fa/qr-code?t=12345678, i.e. in the place where you generate the image we can do it by passing extra params: path('app_qr_code', {'t': 'now'|date('U')}) - it will be like a unique hash. So this way the URL will be slightly different every second which should push the browser to refresh the image properly.

Or probably it can be done with some proper cache headers in the response of that QR code image. But I think the timestamp solution might be enough and pretty robust for browsers.

Cheers!

Hey @Ryan-L!

Other Ryan here! Hmm, this looks like no fun! It's odd... when you say

composer require "endroid/qr-code:^3.0"

That should allow ANY version of version 3 to be installed - the last version being 3.9.7, which DOES support Symfony 5 (the version of Symfony used in this tutorial). But, perhaps there were other errors below - and I'm just focusing on this top one too much. For example, if you're using Symfony 6 code (vs the code from this actual tutorial), try this instead:

composer require endroid/qr-code

That'll install the newer version 4 of the library, which works with Symfony 6. There may be some changes, but I don't see anything too major.

Let me know if this helps!

Hey elkuku!

Sorry for the slow reply - but happy new year :).

Why is the method that displays the QR code named displayGoogleAuthenticatorQrCode()

Lol, that's a good question! I'm pretty sure the answer to this is...l Ryan copying and pasting from the docs at some point 🤣

I am back to this course to learn about 2FA - It might be worth updating it to SF6 and all the new attributes stuff :)

Definitely - we need to finish out the Symfony 6 course (Doctrine relations, forms and security) as early as we can this year. It's hard to look at annotations once you get used to attributes!

Cheers!

Hi @gazzatav! I hit the same roadblock that you. I'm using PHP 8.2. What I did was

use Endroid\QrCode\QrCode;

...


/**
 * @Route("/authentication/2fa/qr-code", name="app_qr_code")
 * @IsGranted("ROLE_USER")
 */
public function authenticatorQrCode(TotpAuthenticatorInterface $totpAuthenticator)
{
    $qrCodeContent = $totpAuthenticator->getQRContent($this->getUser());
    $result = new QrCode($qrCodeContent);
    
    return new Response($result->writeString(), 200, ['Content-Type' => 'image/png']);
}

It seems that in the latest version 3 of Endroid\QrCode the class Endroid\QrCode\Builder\Builder was replaced by Endroid\QrCode\QrCode. After I had made the modifications above, everything worked fine for me.

I hope this will help others facing the same roadblock.
Cheers!

Reading the endroid documentation, here is code that works with Symfony 6 and PHP 8.1 (and the scan results in a validation code):

public function displayGoogleAuthenticatorQrCode(TotpAuthenticatorInterface $totpAuthenticator)
    {
        $qrCodeContent = $totpAuthenticator->getQRContent($this->getUser());
        $writer = new PngWriter();
        $foregroundColor = new Color(0, 0, 0);
        $backgroundColor = new Color(255, 255, 255);
        $labelText = 'Scan this image';
        $labelFont = new OpenSans(20);
        $labelAlignment = LabelAlignment::Center;
        $labelMargin = new Margin(20,5,20,5);
        $labelColor = $foregroundColor;
        $qrSize = 300;
        $builder = new Builder($writer,[],false,$qrCodeContent,new Encoding('UTF-8'),ErrorCorrectionLevel::Low,$qrSize,10,RoundBlockSizeMode::Margin,$foregroundColor,$backgroundColor,$labelText,$labelFont,$labelAlignment,$labelMargin,$labelColor);
        $result = $builder->build();
        return new Response($result->getString(), 200, ['Content-Type' => 'image/png']);
    }

Thanks @Francois This endroid/qr-code library has evolved fast and has a lot of major versions with changes.

If using 3.0 as shown in the video/script, the code is actually (as @Webcu shows above):

namespace App\Controller;

use Endroid\QrCode\QrCode;
// ...

class SecurityController extends BaseController
{
    // ...

    /**
     * @Route("/authentication/2fa/qr-code", name="app_qr_code")
     * @IsGranted("ROLE_USER")
     */
    public function displayGoogleAuthenticatorQrCode(TotpAuthenticatorInterface $totpAuthenticator)
    {
        $qrCodeContent = $totpAuthenticator->getQRContent($this->getUser());
        $qrCode = new QrCode($qrCodeContent);

        return new Response($qrCode->writeString(), 200, ['Content-Type' => 'image/png']);
    }
}

I've update the script to this and the video should be updated soon!

I take that back:
Endroid requires php: ^7.4||^8.0
So no builder class installed. Off to the ppa.

Oh dear, I upgraded to php 8.1 and now I'm in all sorts of other pain :(

Hey Gary,

I'm happy to see you were able to figure out the problem related to uninstalled package!

Hm, I see this course should work on PHP 8.1, are you having any issues running our course code on PHP 8.1? Or is it something related to your laptop?

Cheers!

Hi @victor , cannot get the qr-code at all. When I try to go to /authentication/2fa/qr-code I end up at /2fa which appears to be the route for the authentication form in the scheb/2fa-bundle. Debug:router shows a route '2fa_login' that I did not make. Grepping for that route, I find:
vendor/scheb/2fa-bundle/Resources/views/Authentication/form.html.twig: {{ provider }}
Any ideas how to configure this so it doesn't hi-jack my path when I type in /authentication/2fa/qr-code manually?

@vvictor , Update: I have seen a qr code but it had no secret in the content - kind of defeats the purpose. The login route is redirected to the path 2fa. 2fa is an entry in the firewall which seems to direct to itself so the login and qr code entry can never be completed. The 2fa path problem comes from the scheb/2fa package and is not of my making.

Hey Gary,

Let me clarify some things, did you download the course code and started from the start/ directory? Are you still on PHP 8.1? And if so, how did you make to install the package on PHP 8.1?

Cheers!

Hi Victor,

I downloaded the course files which I diffed/merged with my application which I've kept all the way from 'Charming Development'.

Now php8.1 is installed and working fine. The problem with that (in case anybody else gets stuck) was that after upgrading, php7.2 modules still hang around and need to be purged, though even that is not enough, as if you have a server running it can be holding on to its modules and you need to disable them so that you can purge them. Then there were new php modules to install like php8.1-gd for drawing the qr code. Then there is the simple matter of restarting the symfony server so that it has access to the new modules. (This seemed to be necessary, perhaps you could clarify, does the symfony server have all needed modules loaded in memory?)

In case it helps anyone else these are the php 8.1 modules I have installed (on Ubuntu - but the names should give a clue):

php8.1-apcu [installed by me]
php8.1-bz2 [installed by me]
php8.1-cli [installed by me]
php8.1-common [installed by me]
php8.1-curl [installed by me]
php8.1-gd [installed by me]
php8.1-mbstring [installed by me]
php8.1-opcache [installed by default]
php8.1-pgsql [installed by me]
php8.1-readline [installed by default]
php8.1-xml [installed by me]
php8.1-zip [installed by me]

For this project I have managed to uninstall packages that were deprecated and install more up-to-date packages ('composer update' will not do exactly the right thing!). I was stuck for a while getting pagerfanta to work but that's fine now. The docs for pagerfanta were a bit confusing because the link for the symfony framework on the babdev site took me to a github page instead of the babdev page for symfony. There is a link on the github page which does take you to the symfony framework page but then you get all sorts of confusion:
babdev/pagerfanta is deprecated, pagerfanta/pagerfanta has everything and pagerfanta has native support for twig. I eventually figured out I needed not just pagerfanta/pagerfanta but babdev/pagerfanta-bundle for symfony support and pagerfanta/twig for twig support. Actually you don't need pagerfanta/pagerfanta at all you can install what you need such as pagerfanta/core, pagerfanta/twig and pagerfanta/doctrine-orm-adapter.

I have watched ahead and I now see that the 2fa path and template are used re-purposed towards the end of the course. I can generate a qr-code image and to stop 2fa from taking over I just need to remove the secret from the database.

Cheers

Hey Gary,

Yeah, it sounds correct, you have to restart the server every time you installed a new PHP module (or remove it). So you did it correct.

About what modules are required? Good question! Symfony has a special tool for checking them, you can use Symfony CLI to check it with:

$ symfony check:requirements

It will show you if you're missing required modules, or recommended modules. You have to install all the required modules, but you can ignore recommended ones to run the Symfony project. Though, it's better to install recommended as well as it may improve your Symfony app.

What about the php8.1-gd - it's a PHP image library... So yes, it might be required for generating QR codes. What about others modules - well, it depends in your specific project. But you don't have to install all of them, Instead, install them by request, i.e. when you get an error that you need some new module - just install it and restart the web server. So, first of all, stick to recommendations of that "check:requirements" command

I hope this helps!

Cheers!

Yes, symfony check:requirements is a good tip. Errors about missing modules aren't always easy to read! At least I can go back and try the apcu lesson from way back. I couldn't do that with php7.2, or I didn't because it was experimental or something. Would it be useful to share my lock files so that you can see the versions installed to run on php8.1?

Hey Gary,

You can try to share, but it might be too long message for Disqus, lock files have really a lot of text. If you really want to share with others your lock file - I'd recommend you to create a Gist here https://gist.github.com/ and share the link to it - that would be the best.

Cheers!

Thanks ❤️