DRF backend, separate frontend

Hi all

I’m looking to build an API which will feed a website (and maybe mobile app). I wanted to use DRF for the backend API and then have a separate frontend (likely SPA like react). I’m new to Django so checking out guides/tutorials and most seem to either embed react into a template (not what I want to do as I want to do SSR easily) or have separate backend and use token auth and just save it in local storage (which i obviously can’t do).

What’s the usual way to authenticate a separate frontend from a django backend on different domains? Looking around I’ve seen discussion of using a HTTPOnly cookie etc but no definitive guidance which covers both CSRF and XSS etc. Any advice would be appreciated. Thanks.

Honestly, you can design the folder structures however you want, in my opinion, because you’ll likely be running your frontend and backend on separate servers and using CORS headers to properly send the data back and forth.

Personally, I tend to have separate frontend and backend folders just for code organization, especially because I use CORS headers with Django and React.

Here’s the documentation for installing and using CORS headers with Django:

Thanks @Suttonium. Is the approach taken in this guide standard for separate environment front/backend? (non-JWT and on app . domain . com and api . domain . com as the article describes)

Especially the part about having an endpoint for getting the CSRF token for an authenticated user.

Some clarification please.

So if I have:

  1. DRF application running on api.domain
  2. React SPA being served (likely node.js) from app.domain which consumes the DRF.

I can set cors on the django app so that the brwoser doesnt block calls from the SPA to the API as they are not being served from the same domain. Thats fine.

What about in terms of authentication. If i use token auth, I dont seem to have an easy way to secure the JWT. If i store in HTTPOnly cookie then I cant find anything in the DRF which will pull that out as it expects it in the authentication header? local storage and normal cookie are obviously not safe.

So what options do I have? How do people usually authenticate from a django rest API to a separate front end on a different domain?

Sorry! I usually only check the forum at work and I left early yesterday.

I’ve had success using JWT authentication between Django and React. I believe I used this tutorial to successfully authenticate using JWT:

It goes pretty in-depth regarding how the JWT is stored and how sessions are managed.

Keep in mind, this may not solve your “safe” issue (I think this tutorial stores the JWT in localStorage), but I definitely think this can steer you down the right track.

Thanks for the quick reply @Suttonium

I had actually found that one already, but hit a wall as it was local storage again… but i will read again to be sure.

One quick sanity check…as im very new to web.

Can I use django’s session authentication across domains? i.e. make API call to django/DRF login view/endpoint with credentials and have the session cookie return. I suppose if i can I might need to pull out the session ID and/or CSRF token from the cookie and include in further posts (or is it HTTPOnly?)… but does the DRF/django allow for this in the scenario when not on the same domain as above?

I believe so, but I could be wrong.

What I’m thinking is this:

Whenever you use DRF to login, a response of some kind has to be returned. This response can be created on the backend to fit your needs (using serializers and the Response object imported from DRF) and can be caught in the SPA.

Does that make sense?

It does.

Ill setup a little test env and see if I can work out how it all fits together and what gets sent back on a login.

Thanks Suttonium