AWS Cognito + React Router v7 + CSS in JS using Linaria + SpringBoot + Java

Technologies used

AWS Cognito as the identity provider.

• Cognito client is created using the AWS console choosing SPA / React as the application.

React Router 7 (with SSR) for as the frontend framework.

• Frontend project is created at src/main/webapp using vite react router v7 template.
• Axios interceptor is configured to use the jwt token from the localStorage
• Axios is configured to work correctly in server mode and client mode using correct API base URL
• Cognito OIDC related configurations are loaded from the backend using a public endpoint at the server-side rendering. This enables the frontend only depends on the back end API base URL.

Springboot application as the backend to keep a secure API server.

• Springboot application uses Java 17 / Maven
• Integrated Swagger UI for API documentation. Can be accessed at http://localhost:8080/swagger-ui/index.html
• Integrated Spring Security with JWT token authentication.

How to run

First create a Cognito user pool and client in the AWS console. Choose Single Page Application as the client type.

Backend

• Rename src/main/resources/application-dev.properties.example to src/main/resources/application-dev.properties and fill the required fields.
• Run the Springboot application using the IDE or execute mvnw spring-boot:run in the root of the project. It will be available at http://localhost:8080

Frontend

• Wait until backend is ready.
• Go to src/main/webapp and run npm install to install the dependencies.
• Run npm run dev to start the frontend server. It will be available at http://localhost:5173

How the example look like

• Swagger UI is available at http://localhost:8080/swagger-ui/index.html
  

• Before authentication, the page looks like this.

• After authentication, frontend fetches example data from a protected API endpoint and shows in the page.
  

Any questions?

• Feel free to raise an issue