Auth0 Implementation made easy with Spring Boot and React [Part 2]

Hello and Namaste !

In this story, we will learn how we can easily integrate Auth0 into our Spring Boot and React applications.

I have divided this story into two parts.

Part 1:
Setting up Auth0 and creating Spring Boot Application with secured API

Part 2:
Creating React app to use Auth0 login, generate token and call secured API.

This story is Part 2.

React App

React app will have Auth0 login, generate token and make call to secured API in Spring Boot Application.

1. Create React App

Create a New React App - React

2. Install the Auth0 React SDK

npm install @auth0/auth0-react

3. Configure Auth0Provider

Add config of Auth0 in config.json

Refer Part 1 to know how we can get domain, clientId and audience.

Add Auth0Provider and use config in index.js

cacheLocation

The location to use when storing cache data. Valid values are “memory” or “localstorage”. The default setting is “memory”.

useRefreshTokens

If true, refresh tokens are used to fetch new access tokens from the Auth0 server.
If false, the legacy technique of using a hidden iframe and the “authorization_code” grant with “prompt=none” is used.
The default setting is “false”.

4. Authenticate App.js

Use state variables from Auth0

Add some logics to show Auth0 login page, handle error and show loading.

Generate access token and store to state variable.

API call with access token

Logout Implementation

Return in App.js

See Network/Console log in your browser to see whether app is working as expected or not.

Some screenshots:

Available in GitHub:
https://github.com/umes4ever/auth0-implementation

Go back to Part 1:
https://umes4ever.medium.com/auth0-implementation-made-easy-with-spring-boot-and-react-part-1-95dbd4520cb2

Happy Learning !