I have a Quarkus Backend + React Frontend. Here is how its setup:
Auth0
I have created an Application (setup as a Single Page Application) and set the following options. My frontend is running at: localhost:3000 and the backend at: locahost:8080
- Allowed Callback URLs:
http://localhost:3000/callback - Allowed Logout URLs:
http://localhost:3000 - Allowed Web Origins:
http://localhost:3000 - Allowed Origins (CORS):
http://localhost:3000
I also have setup an API, and set its audience in my Quarkus application.properties file (details given below). I have setup the create:manager permission in the API settings, and given this permission to the User Role admin.
Quarkus
I followed the Quarkus OIDC Guide which shows how to connect Quarkus with Keycloak, but since both Auth0 and Keycloak are OIDC providers, so I’m guessing it should be pretty similar.
My application.properties file contains:
quarkus.http.cors=true
quarkus.oidc.auth-server-url=https://dev-xxxxxxxxxxxx.eu.auth0.com
quarkus.oidc.client-id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
quarkus.oidc.credentials.secret=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
quarkus.oidc.application-type=web-app
quarkus.oidc.token.audience=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
I’m trying to create a Manager Resource on my backend but that can only be created by a user who has the create:manager permission which is given to admin User role in Auth0.
My Controller looks like this:
@Path("/rest/manager")
@ApplicationScoped
public class ManagerController {
...
@POST
@Path("/")
@RolesAllowed("admin")
public Manager createManager(@Valid ManagerView managerView) {
return managerService.createManager(managerView);
}
}
React
On the frontend, I’m using React and Redux. I’m using the Auth0 React library. I opted for using the react library instead of the js library because its easier to integrate.
I have wrapped my App with the Auth0Provider:
ReactDOM.render(
<Auth0ProviderWithHistory>
<App />
</Auth0ProviderWithHistory>,
document.getElementById('root') as HTMLElement
);
In my redux action, I pass, the user token:
const EditableManagerRow = (props) => {
const {getAccessTokenSilently} = useAuth0()
const dispatch = useDispatch();
...
return (
<TableRow>
...
<RowEditButtons
onSave={async () => {
const accessToken = await getAccessTokenSilently()
dispatch(managerOperations.addManager({manager: updatedManager, accessToken}))
}}
/>
</TableRow>
)
The dispatch action makes the request with the following headers:
.post<T>(url, params, {
headers: {
Authorization: `Bearer ${accessToken}`,
"Content-Type": "application/json",
},
})
This request goes to the backend. However, I’m getting the following CORS error in the browser:
XHR OPTIONS https://dev-8eki3hqn4jblufe6.eu.auth0.com/authorize?response_type=code&client_id=OXaPjK3H8Agz3VwsQ1oJbxIhwl1XoHWP&scope=openid&redirect_uri=http://localhost:8080/rest/manager&state=eaf3f4ec-8835-41f4-94d2-61c9e28177ff
CORS Missing Allow Origin
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dev-8eki3hqn4jblufe6.eu.auth0.com/authorize?response_type=code&client_id=OXaPjK3H8Agz3VwsQ1oJbxIhwl1XoHWP&scope=openid&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Frest%2Fmanager&state=eaf3f4ec-8835-41f4-94d2-61c9e28177ff. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dev-8eki3hqn4jblufe6.eu.auth0.com/authorize?response_type=code&client_id=OXaPjK3H8Agz3VwsQ1oJbxIhwl1XoHWP&scope=openid&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Frest%2Fmanager&state=eaf3f4ec-8835-41f4-94d2-61c9e28177ff. (Reason: CORS request did not succeed). Status code: (null).
What I have tried:
- Setting Allowed Origins (CORS):
http://localhost:3000, http://localhost:8080 - Setting Allowed Callback URLs:
http://localhost:3000/callback, http://localhost:8080 - Different
application.propertiessettings for CORS such as:
quarkus.http.cors.origins=http://localhost:3000
quarkus.http.cors.headers=accept, authorization, content-type, x-requested-with, Access-Control-Allow-Origin
quarkus.http.cors.methods=GET,OPTIONS,POST
quarkus.http.cors.exposed-headers=Access-Control-Allow-Origin,Authorization
However, nothing seems to work. I will be very grateful for any help on this.