'Invalid or expired key" error with custom VerifyEmailView (headless)

[engin-can]

Hi, I am stuck on email verification with headless allauth because I keep getting the following error.
Any idea why this is happening or how I can debug this?

Error

key Nw%3A1sLaEh%3AWtUjtejNZfRiIzToz70cLlGU1DJtgeG4B8er0asRIlQ
input <tr>
    <th><label for="id_key">Key:</label></th>
    <td>
      <ul class="errorlist"><li>Invalid or expired key.</li></ul>
      <input type="text" name="key" value="Nw%3A1sLaEh%3AWtUjtejNZfRiIzToz70cLlGU1DJtgeG4B8er0asRIlQ" required id="id_key">
      
        
      
    </td>
  </tr>
Bad Request: /vault/browser/v1/auth/email/confirm
[24/Jun/2024 03:19:34] "GET /vault/browser/v1/auth/email/confirm HTTP/1.1" 400 117

My custom VerifyEmailView

class CustomEmailConfirmationView(VerifyEmailView):
    def get(self, request, *args, **kwargs):
        key = request.headers.get("x-email-verification-key", "")
        input = self.input_class({"key": key})

        print("key", key)
        print("input", input)

        if not input.is_valid():
            return ErrorResponse(request, input=input)
       ...
       ...

Email

Hello from example.com!

You're receiving this email because user test2 has given your email address to register an account on dearx.com.

To confirm this is correct, go to http://localhost:10000/account/activate/Nw%3A1sLaEh%3AWtUjtejNZfRiIzToz70cLlGU1DJtgeG4B8er0asRIlQ

Thank you for using example.com!
example.com

[pennersr]

When you print the key, I still see a %3A in there. That suggests that there is something going wrong in the encoding/decoding. Perhaps your frontend is double encoding it, or not sure. In any case, check that.

[engin-can]

Yup, you were right.
const token = decodeURIComponent(params.token as string); in next.js did the trick. Thanks!