How to use with Vue app

[zenit70]

I followed the guide, installed the extension on Ketcloak v18 Quarkus and then, using Curl, requested the generation of a magic link that has allowed me to access the account-console client with the new user.

Now I'm trying to use a magic link to access a Vuejs application, but I'm not able to authenticate a new user.

In Keycloak I created and configured a new client for the Vue application and requested a magik link with parameters like these:

{
    "email":"magik@link.com",
    "client_id":"test.app",
    "redirect_uri":"http://localhost:8099/purchase",
    "expiration_seconds":3600,
    "force_create":true,
    "update_profile":false,
    "send_email":false
}

The response contains a magic link like this:

{
    "user_id": "50000949-d032-4e04-bf98-5a1ed24a3862",
    "link": "http://0.0.0.0:8900/realms/test/login-actions/action-token?key=eyJhbGciOiJIUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICI5NDM3YTU5YS03ZWEzLTRjMjktODM5ZS02YjM1YTIxN2ZmNTEifQ.eyJleHAiOjE2NTY0MTA3MDgsImlhdCI6MTY1NjQwNzEwOCwianRpIjoiNzhlOTM3MGEtY2VmYi00YWRlLWE1N2YtMzg5NzNjNjA5ZmJmIiwiaXNzIjoiaHR0cDovLzAuMC4wLjA6ODkwMC9yZWFsbXMvY29tbWVyY2lvIiwiYXVkIjoiaHR0cDovLzAuMC4wLjA6ODkwMC9yZWFsbXMvY29tbWVyY2lvIiwic3ViIjoiNTAwMDA5NDktZDAzMi00ZTA0LWJmOTgtNWExZWQyNGEzODYyIiwidHlwIjoiZXh0LW1hZ2ljLWxpbmsiLCJhenAiOiJ0ZXN0LmVkZWxpdmVyeS5hcHAiLCJub25jZSI6Ijc4ZTkzNzBhLWNlZmItNGFkZS1hNTdmLTM4OTczYzYwOWZiZiIsInJkdSI6Imh0dHA6Ly9sb2NhbGhvc3Q6ODA5OS9wdXJjaGFzZSJ9.cFFQW5m5IsuD_uVFZKiH88WR4lTe55AnbixxTdzi7hA&client_id=test.app",
    "sent": false
}

In the Vue application I use the Javascript adapter to authenticate the user, first I create a new Keycloak instance and then call the init method. After clicking the magic link and being redirected to the correct page, the Javascript adapter fails to authenticate and does not contain the token.

The to parameter of the route contains these values:

{
   "query":{
     "session_state":"49cc8580-81a0-433c-9bfd-4af8de180a3e",
      "code":"4daa9305-08c0-4712-8d37-5fa6e80b59b9.49cc8580-81a0-433c-9bfd-4af8de180a3e.d7e9ea85-90ff-475c-aa84-fa8cded4ebe8"
  }
}

Could you help me understand how to use magic link with Vue application?

Does the Keycloak client or javascript library need any special configuration?

Thanks

[xgp]

@zenit70 Thanks for the thorough explanation. In order to see what is happening, I'd need to see the full trace of the network calls. Is it possible to export a HAR?

[zenit70]

@xgp Thank you for your response and interest, I attach the HAR file

network_calls.zip

[xgp]

I'm unable to repro. I used the vue app in the Keycloak examples, and the magic link login worked fine. https://www.keycloak.org/securing-apps/vue

[zenit70]

Thanks