Transcript:

Hello, this video illustrates the process of connecting ReactJS with the SpringBoot Authorization Server to implement Single Sign-On.

Let’s have a look.

To begin, I will initiate the ReactJs project with npm start. It will automatically open the Chrome browser with the HTTPS protocol. I need to manually paste the address into Firefox using the HTTP protocol. Once we enter the address, it will automatically redirect to the Authorization Server Central login form. Let’s enter the username and password. After that, we will obtain the Access Token and the decoded JWT, which includes the username, authorities, scopes, and other user profile information.

With the Access Token, we can make requests to our OAuth2.0 protected API, as demonstrated here. Attempting to access the API without the token results in a 401 Unauthorized Error. To successfully make the call, we must include our newly-generated token as a bearer token, and as a result, we receive the expected response.

The implementation of this process is pretty simple.

Firstly, we need to register the client. Here, we choose the resource server, specify the home address for the client, select the template, and it will automatically provide us with the following information.

Next, on the ReactJs client, we employ the command npx create-react-app test-new-pkce --template typescript to create a project and install the dependency react-oauth2-code-pkce. The code can be found in index.tsx. Simply replace your client information here. The logic of the code is very straightforward, encapsulating the main entry function with the AuthProvider and passing the client settings as parameters.

I have another example in ReactJs that utilizes a different Identity Provider (IdP), but the workflow remains the same.

So, that concludes the demonstration. If you have any questions, feel free to leave a comment. If you enjoyed this video and would like to see more, welcome to give it a thumbs up and subscribe. See you next time!