Invalid CSRF token using flag.link_builder service (Flag module)

Question

I have a REST route that returns a list of user accounts. I have a flag setup called 'following' as you can follow and unfollow other members. In my REST route, I use:

$flag_link = \Drupal::service('flag.link_builder')->build('user', $member->id(), 'following');

which generates the link correctly as far as I can tell. In my javascript object I can see the link that was created. This is an example of the JS object of a user that I use on the front end:

0:
  flag_link:
    #access: true
    #action: "flag"
    #attached: {placeholders: {…}, library: Array(1)}
    #attributes: {title: "", href: "/flag/unflag/following/3?destination&token=LEfyLe9PPaQfgNNRSXUA82k4SVHQGRmBEI0adgBva9g", class: Array(1)}
    #cache: {contexts: Array(1), tags: Array(0), max-age: -1}
    #flag: {id: "following", label: "Following"}
    #flaggable: {}
    #theme: "flag"
    #title: {#markup: "Follow this person"}
  id: "3"
  name: "ronnie"
  url: "/user/3"

When I go to click the link it 403 forbiddens with the message message: "'csrf_token' URL query argument is invalid."

The HTML I am outputting is:

<div class="flag">
  <a href="/flag/unflag/following/3?destination&token=LEfyLe9PPaQfgNNRSXUA82k4SVHQGRmBEI0adgBva9g" class="use-ajax" rel="nofollow">Unfollow this person</a>
</div>

Any idea what I am doing wrong?

Here is a screen shot of my request when I click the anchor

Answer 1

I created an example. You can check it and find the solution there.

https://github.com/Mykola-Veryha/ajax-flag-link