Stateless Authentication: Integrating JWT for Google API in React and Django Rest Framework (Part — 1)
Outline
In this blog, I will share my experience and provide a tutorial on integrating JWT authentication into my web app using the Google API. This will be a three-part series. First, I will cover the theoretical aspects of the topic, and then we will dive into the hands-on tutorial.
Some of the main packages I will be using include:
- Google API
- Django Rest Framework
- Django Rest Framework SimpleJWT
- Django CORS Headers
- Django Dot Env
- React
- React OAuth Google
Please note that I will be skipping some basic steps, such as creating the initial app setup, to keep the tutorial concise and focused.
What and Why of JWT?
Among the various authentication methods, JWT is a relatively new way of authenticating or authorizing the integrity of requests. In my opinion, one of the main aspects that attracted me to the concept of JWT is its stateless behavior.
JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object.
By stateless behavior, I mean that you don’t need to query the database to verify if a request is valid. This characteristic makes JWTs powerful and truly stateless. Once a token is signed and created, the web application can validate the token based on its signature without querying the database to check if the request is legitimate. This is particularly beneficial for large-scale applications.
However, it is equally important to understand the disadvantages of JWTs. One notable disadvantage is the difficulty in invalidating or revoking validated tokens. While there are methods to achieve token invalidation, it is not as straightforward as other types of authentication (e.g., token-based authentication).
For more on JWT visit official introduction on here.
Google API
Google APIs are a set of application programming interfaces (APIs) developed by Google that allow us to communicate with Google Services and other applications. These APIs provide access to a wide range of Google services, including Google Maps, Google Drive, Google Calendar, and more. We will make use of these API to login users in our app.
We will:
- Go to Google Cloud Console
- Select Project or create new one from top left corner near logo
- On the consent screen we will fill app_name, user_support_email, developer_contact_email. We will leave other fields empty for the local environment. You can update the form later on if you need as well. You could add few emails for test_email. Other than that you can continue with just next.
- Now we can create a new OAuth client ID from the same dropdown like below. You can use other platform if you are developing mobile app or tablet applications.
- Note Authorized js origin is for the uri from where your google button will be rendered. That is, front-end url (our react server). Whereas, Authorized redirect uri is for our Django server.
- After that, you should be able to get the Client ID and Client secret. You can copy them and set in your environment or .env file. Or you can download the json file as well just from the download icon.
Now we have setup a basic structure to start with the project. We will start with Django back-end in the next section. Please feel free to comment you have any questions or suggestions. Thank you for reading through !!!