spotnice.blogg.se

1. #DJANGO REST FRAMEWORK REACT HOW TO#
2. #DJANGO REST FRAMEWORK REACT FULL#
3. #DJANGO REST FRAMEWORK REACT CODE#

Client-side flow in your React front-endĪfter you've installed the package in your React app, the only thing that you need to do is to use their main component in your Login page. If you decide to deploy your app, you just need to add another origin and set the live app URL. Change this corresponding to your specific environment. Note: For local React development, the default server port is 3000. There's actually a single thing that you need to do and this is to set your front-end application URL(s) in the Authorized JavaScript origins in your Google application settings: Google Application Setupīefore setting up this flow, you'll need to configure your Google OAuth2 application properly. We're aiming for the same result after all. If you don't want to add more dependencies to your project, consider using the vanilla Google implementation instead. Overall, all of these React implementations are just developer-friendly wrappers around Google's gapi. We've used react-google-login for this example. There are a couple of good React implementations already. Here is a simple diagram that illustrates these steps:

That's why we decided to use the Google OAuth2 provider for our examples. We cannot think of a platform that we've used recently where we couldn't log in using a Google account. Logging users in using OAuth2 is a common thing for most websites nowadays. You can check it here if you've found it useful ✌️ Before we start: OAuth2

#DJANGO REST FRAMEWORK REACT CODE#

The Django code follows our Django Styleguide. We assume that you're familiar with them.

We use Django REST Framework (DRF) for our APIs and React in the front-end. Follow these steps if you don't have one already. You'll need to set up your own Google Account and OAuth2 application. We recommend checking this one from Google. There are a lot of good articles on the topic so check them out if you want to understand the flow better. We won't go into details about the OAuth2 flow itself. If you've found this useful, don't forget to give us a ⭐. It's deployed here so you can give it a try before diving into the blog post.

#DJANGO REST FRAMEWORK REACT FULL#

In this blog post, we'll show you the Client-side Google OAuth2 flow.Īll of the code examples and the full implementation from this article are placed in this GitHub repository. After all, we hope that having the code in place will be helpful to all of you 🙌. In this and in our next article, we will go through the full implementation of both of the flows, explaining the differences between them and highlighting the important points.

They look similar in the first place but they have some fundamental differences. There are 2 different flows that you can take - client-side & server-side.

#DJANGO REST FRAMEWORK REACT HOW TO#

We decided to write this blog post for a single reason - give you a practical example of how to implement an OAuth2 flow on your own. We've written a new version of this article, that you can find here - Adding Google login to your existing Django and Django Rest Framework applications ⚠️ Heads up ⚠️ This article is now outdated.