Invalid CSRF token error ( symfony 5 ) with VueJs frontend

Question

I am having trouble in making authentication work using an external frontend ( vue ) with my symfony app. The main problem is the "Invalid CSRF token" error. I have a login form in vue which sends an object containing the username, password, and the csrf token ( which I get from symfony tokengenerator ). I have a custom authenticator where I create the user passport and add the token to it.

public function authenticate(Request $request): PassportInterface
    {
        $username = $request->request->get('username', '');

        $request->getSession()->set(Security::LAST_USERNAME, $username);
        $this->logger->info('The token is', [$request->get('_csrf_token')]);
        $passport =  new Passport(
            new UserBadge($username),
            new PasswordCredentials($request->request->get('password', '')),
        );
        $passport->addBadge(new CsrfTokenBadge('authenticate', $request->get('_csrf_token'))); 
        return $passport;
    }

It makes it through to the AuthenticationManager.php, where it enters the executeAuthenticator method. The error comes after the CheckPassportEvent is dispatched, from CSRFProtectionListener. It fails on the if (false === $this->csrfTokenManager->isTokenValid($csrfToken)).

I have tried to get the tokenmanager instance inside of my authenticator and create the token there and add it to the passport.

$token = $this->csrfTokenManager->getToken('authenticate'); $passport->addBadge(new CsrfTokenBadge($token->getId(), $token->getValue()));

This lets me get past the authentication, but immediately afterwards, when it redirects to the next path, it gives me an error "Access denied, the user is not fully authenticated; redirecting to authentication entry point.". After some debugging, it seems that the token storage is empty ( the token is saved to the storage when the getToken() method is called ).

When I do the authentication with the twig template, it works flawlessly. How exactly {{ csrf_token('authenticate') }} makes and handles the token I do not understand. Any input would be appreciated.

jDoe · Accepted Answer · 2021-08-09 11:23:49Z

0

You have to pass the Authenticationintention as a string. In your example its "authenticate".

$passport->addBadge(new CsrfTokenBadge(' ---> authenticate <--- ', $request->get('_csrf_token')));

To check it you should use a code like this:

if (false === $this->csrfTokenManager->isTokenValid(new CsrfToken('authenticate' $YOUR_TOKEN_HERE))

or from a controller:

$this->isCsrfTokenValid('authenticate', $YOUR_TOKEN_HERE)
enter code here

answered Aug 9, 2021 at 11:23

jDoe

1237 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Testonjumbk Over a year ago

When I do it by default with ->get('_csrf_token') the isTokenValid returns me always false. In my controller, i send the token to vue with following code : ` public function GenerateToken() { $token = $this->tokenGenerator->generateToken(); return new Response(json_encode($token)); } `

Testonjumbk Over a year ago

So if I generate the token in the backend, send it to vue and then submit it with the form, the isTokenValid method returns me always false ( even if I implement randomize like in the token manager ). If I generate the token in the authenticator, the the login works, but making any request to any other controller will return me an error that the user is not fully authenticated, which seems to happen because it cannot find the user's session ( returns null ).

jDoe Over a year ago

Do you really use symfony version 5? Your code especially the part where you are gathering the Services (no dep injection) seems very outdated.

jDoe · Accepted Answer · 2021-08-09 17:25:05Z

0

In Symfony 5 you should work with the CSRF Protection like this: In Twig, you can generate a CSRF Token with the "csrf_token" method. This Method is described here https://symfony.com/doc/current/security/csrf.html#generating-and-checking-csrf-tokens-manually.

You can validate the token in a controller using the "isCsrfTokenValid" function which lives in the controller class which you are extending.

Check this for more information: https://symfony.com/doc/4.4/security/csrf.html#generating-and-checking-csrf-tokens-manually

I think the problem is that youre using a new Symfony version but using old practicies.

answered Aug 9, 2021 at 17:25

jDoe

1237 bronze badges

1 Comment

Testonjumbk Over a year ago

Like I've said in my question, I have no problem running it with twig. But I want it to work with my VueJs frontend which is on a different server. I could not find any relevant guides that address this problem in symfony 5.

Collectives™ on Stack Overflow

Invalid CSRF token error ( symfony 5 ) with VueJs frontend

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related