Sign In Sign Up
Bruce

How can I implement OAuth2 in React?

I want to implement OAuth2 passport authentication in my SPA with a Django backend using the django-oauth-toolkit.

Are there any libraries that have already done this? Do you have any good directions to point me to?

Thanks for your help :)

0 Likes 2 Comments
abuuzayr

hey @bcye! I havent touched Django in a while but have you seen this tutorial before?

It appears to explain only the Django part, however, but it also does explain the OAuth flow that should happen on the front end.

For the React part, since its standard OAuth flow:

1) hit the auth endpoint with API key & secret 2) retrieve the access token from the response 3) use the access token for authenticated access to your API 4) get a refresh token if it expires..

.. I think there isn't a library to handle the flow, but you will just need to add the access token to the Authorization header as Bearer <access token..> when you make your API calls to your backend.

Hope this helps, let me know if it doesn't.

0 Likes
Bruce Author

Yeah I was kinda curious if there was a library that abstracts the standard OAuth flow to a few nice to use hooks, since it seems to me that it is a pretty common issue. I guess I'll just need to build it myself, I guess it's not that hard.

0 Likes
abuuzayr

@bcye You're right! Someone tried and left a note when deprecating the library. Not entirely sure what he meant but its probable that you could still use it or even tweak it to your requirements.

0 Likes
Bruce Author

@abuuzayr thanks, I guess I will just roll my own, doesn't sound too hard, a few API requests.

0 Likes
Bruce Author

Hey @abuuzayr , so I have looked into OAuth2 now and set up an integration with Django. I went for a resource owner password flow, as my SPA isn't a third party but my own. Would you say this is the right flow. I should add that my SPA is my OAuth client (as it's a static site), so it is the one which receives the refresh and auth token. My server serves both OAuth and the Rest API, which is in turn protected by the OAuth tokens.

Here's where I am stuck:

  1. Am I using the right auth flow? I've read about the implicit flow, but I don't quite fully understand it.
  2. Should I store the refresh and auth token in localStorage, cookies? I have read on other sites I should store them in an https cookie to prevent certain attacks. How would I access them then from my JS to authenticate requests via the Authentication: Bearer?
0 Likes
Bruce Author

@sergio, would you be willing share a bit on how you implemented it with Makerlog?

0 Likes

Please sign in to leave a comment.