metosin / reitit

A fast data-driven routing library for Clojure/Script

Home Page:https://cljdoc.org/d/metosin/reitit/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Incorrectly/missing parsing of query params when using fragments in frontend

jacobemcken opened this issue · comments

Given an URL like the following, reitit finds a query param called test:
http://localhost:3449/#/query-params-test?test=something

While given an URL like the following reitit does not recognize any query params even though it finds the correct route:
http://localhost:3449/?test=something#/query-params-test

The second URL (with fragment last) ☝️ seems to be the correct URL syntax to specify both query params and fragment.

I've created a test application based on your re-frame example here, to make it easy to verify:
jacobemcken@abdf659

Where I took the following screenshot of the console log:
console log

Context for me stumbling over this:
I'm trying to integrate with Auth0, where upon authentication the user is redirected back to a URL of my choosing. I my case http://localhost:3449/#/login. Auth0 appends two query params needed for further integration, and places these correctly (as far as I can tell) before the fragment:
http://localhost:3449/?code=YoaUzwCiscepZoi1&state=Z3K0NFVaSnM2UWd%2BQTZxZXVtN25LQmhYYnRyZzM5WnFKMTItLzBIVjVaMQ%3D%3D#/login

But now reitit cannot see them 😞

If you use Html5History, this should work.

The way fragment router work, it only considers the part after # and nothing before that. Sure it is valid URL, but from point of fragment router, the query parameters don't exist.

Your backend would see the query string in the second case. (And the part after # is not passed to server at all.)

If you use Html5History, this should work.

It does work, but I would like to use fragments to only need to worry about index.html on the server.

I also use Auth0 for authentication by redirecting to Auth0 which then redirects back to /#/login...

My problem is that Auth0 doesn't care that I decided my application is using fragments, hence Auth0 uses the URL:

http://localhost:3449/?code=YoaUzwCiscepZoi1&state=Z3K0NFVaSnM2UWd%2BQTZxZXVtN25LQmhYYnRyZzM5WnFKMTItLzBIVjVaMQ%3D%3D#/login

I guess a note about "real" query params are being ignored and inaccessible in "fragment mode" would not hurt to be mentioned in the documentation... but it might also be such a rare case that closing this issue is the better solution.