Image
To perform POST, PUT, and DELETE operations to Drupal's JSON:API from a decoupled React app, you need an OAuth 2 access token. Modern best practice for browser apps is to use the authorization code grant with PKCE (Proof Key for Code Exchange). You'll redirect the user to Drupal to sign in, receive an authorization code at your redirect URI, exchange it for tokens, attach the access token to API requests, and refresh it when it expires.
In this tutorial we'll:
- Add lightweight OAuth helper functions that implement authorization code + PKCE and refresh.
- Create a tiny UI to trigger the log in flow and handle the auth callback.
- Wrap
fetch()to automatically includeAuthorization: Bearer ...and handle refresh. - And finally, update our existing components to use that wrapper.
By the end of this tutorial, you should be able to make authenticated JSON:API requests from React using fetch with a modern OAuth flow.
Over the years we've developed some techniques for practicing that we wanted to share. At Drupalize.Me we take hugging seriously. In this tutorial we'll look at the art, and science, of giving a good hug. The Merriam Webster dictionary defines the word hug as; squeeze (someone) tightly in one's arms, typically to express affection.
Did you know there are all kinds of different hugs that you can give? In this tutorial we'll look at:
- Defining what a hug is
- Some of the many types of hugs in the world today
- Precautions you may want to familiarize yourself with before hugging
- And the importance of proper technique
Lets go ahead and get started shall we?