auth0-react VS meme-gen

This post goes through how to build a PKCE client for browser using TypeScript based applications with no dependencies. If you want to know more about what PKCE (Proof Key Code Exchange) is you can read my previous post, What Is PKCE. Before I start on how do to this, as a general rule I would use a client side library provided by a reputable authentication vendor, like the React SDK provided by Auth0 for any production application I was building. If you're interested in what is going on under the hood in libraries like that, or you have a specific use case, or you're just interested in a hands on example of how PKCE works then I'll go through how I implemented this only using what is available in the browser.

This article aims to teach developers how to utilize user authentication to secure a React application with the help of Auth0’s React SDK which offers a high-level API for dealing with a variety of authentication related concerns while writing less code.

To integrate Auth0 into our React app, we’ll use auth0-react to connect the app with Auth0 and a hook called useAuth0 to get authentication state and methods. However, it is challenging to reach authentication states and methods outside the components.

https://github.com/auth0/auth0-react Look for a method called getAccessTokenSilently

If you need to look at the source code, it's available on Github and Codesandbox. Also see the deployed application on Netlify. NOTE: Because Codesandbox provides 2 different hosts with different URLs, open the app browser on Codesandbox in a new window for it to be authorized by Auth0. Click here to access the app in a new window.