creating catch-all url() entry using regex

Question

So had zero issues with my Django and React URL routing in dev, but now that I am trying to move to production, running into all kinds of issues.

Yes, I suck when it come to regex. It looks like a cat walked on a keyboard. Definitely something I need to sit down and commit to learning.

In dev, my catch-all was just the following which worked perfectly:

url(r'', TemplateView.as_view(template_name='index.html')),

In production, I got Uncaught SyntaxError: Unexpected token <. This, as it was explained to me, had to do with JS being caught in the url instead of index.html and that the JS needed to "pass through". I was told to try:

url(r'^$', TemplateView.as_view(template_name='index.html')),

This worked. The web application loaded and I was able to navigate.

Another problem came up, however, when it came to verification emails links. I am running into issues with Page not found (404) which, again, wasn't an issue in my dev setup.

The email links look like the following:

https://test.example.com/auth/security_questions/f=ru&i=101083&k=6d7cd2e9903232a5ac28c956b5eded86c8cb047254a325de1a5777b9cca6e537

What I get back is this:

Page not found (404) Requested URL: http://test.example.com/auth/security_questions/f%3Dru&i%3D101083&k%3D6d7cd2e9903232a5ac28c956b5eded86c8cb047254a325de1a5777b9cca6e537/

My react routes are the following:

<App>
    <Switch>
        <Route exact path='/auth/security_questions/f=:f&i=:id&k=:key' component={SecurityQuestions} />
        <Route exact path='/auth/*' component={Auth} />
        <Route exact path='/' component={Auth} />
    </Switch>
</App>

This should render /auth/security_questions/... route.

My urls.py is the following:

urlpatterns = [
    # API authentication entry point   
    url(r'^api/auth/', include('authentication.urls', namespace='signin')),

    # Any requets that come through serve the index.html
    # url(r'^$', TemplateView.as_view(template_name='index.html')),

] + static(settings.STATIC_URL, 
document_root=settings.STATIC_ROOT)

Also, the authentication.urls:

urlpatterns = [
    url(r'^security_questions/', SecurityQuestionsAPIView.as_view(), name='security_questions'),
]

It seems like Django is trying to handle the routing, there obviously isn't a route that matches, when really it should just render index.html and let react-router-dom take over to send requests to the API from the FE. Thus, it seems I need to make a catch-all that lets JS through.

I came across this question which seemed relevant: react routing and django url conflict. So I added the following so that I have a / catch and then "everything-else" catch-all.

# match the root
url(r'^$', TemplateView.as_view(template_name='index.html')),
# match all other pages
url(r'^(?:.*)/?$', TemplateView.as_view(template_name='index.html')),

Still won't render the verification links. Tried a few other variations for the last-catch all URL:

Django route all non-catched urls to included urls.py

url(r'^', TemplateView.as_view(template_name='index.html')),

Results in Uncaught SyntaxError: Unexpected token <

django catching any url?

url(r'^.*', TemplateView.as_view(template_name='index.html')),

See the preceding.

So going to dig into Django, regex, and try to sort this out, but in the mean time...

What am I doing wrong here?

I am. All of the routes that start with `r'^api/'` are entry points. — cjones, Jun 29 '18 at 22:17
then react has no business catching this one... it is an unauthenticated call of a backend api. from there you redirect to the landing page that is handled by react (and depending on your use-case, you might want to get username/password to make sure the right user clicked on the email) — Oerd, Jun 29 '18 at 22:58
Not sure I'm following or seeing how this would resolve the issue. This URL is part of the password reset process. They enter the email on the account, that is matched to DB, if match is found it emails this link to the email match in DB, the URL contains the unique id and key for that user, when they click the link, the FE starts to load, parses the URL for the unique id and key, sends that to the API to verify it, if it is verified, FE finishes loading and sends the security questions they need to answer. If they answer correctly, the can set new password. Is this not standard? — cjones, Jun 29 '18 at 23:07
So the answering of their security questions is essentially verifying the "right user clicked on the email". If the can't answer those, they can't set a new password even if they have unauthorized access to the email. — cjones, Jun 29 '18 at 23:12
well, I am assuming your FE is a single page application. From what I know, there is no "starts to load, stops and talks to backend, then finishes loading". Either it has loaded (knows everything it can do) or it hasn't... in the latter case the FE won't know to talk to the backend unless it has loaded completely, — Oerd, Jun 29 '18 at 23:16

score 1 · Accepted Answer · answered Jul 02 '18 at 18:23

Ok, was almost there. I modified:

url(r'^(?:.*)/?$', TemplateView.as_view(template_name='index.html')),

To this:

url(r'^(?:.*)/$', TemplateView.as_view(template_name='index.html')),

Which prevented the Uncaught SyntaxError: Unexpected token < error. It would load parts of the web application, but not in its entirety. That issue was due to URL-encoding so I had to clean up the formats of my URLs. Question I had about it here:

Prevent URL encoding that is removing equals signs from URL

Now everything seems to be loading correctly.

creating catch-all url() entry using regex

1 Answers1