Hi guys,
I’m trying to implement an API with protected endpoints (permissions/scopes) and call this API from my angular application and I’d like to know the correct way to pass these extra scopes to my API in my access_token.
I created an API and set the permissions in Auth0 following these steps: Auth0 ASP.NET Core Web API SDK Quickstarts: Authorization
My .NET Core Web API is working fine. My endpoints have the [Authorize(“my_scope”)] annotation, so the access_token from my angular app must have these scopes in it.
I set up my angular App following these steps: Auth0 Angular SDK Quickstarts: Login
I’m using the Authorization Core and have enabled the RBAC and Add Permissions in the Access token options and I’m allowing Skipping User Consent.
For my Angular app, I’m using the @auth0/auth0-angular library following the quickstart sample using the loginWithRedirect() method and Universal Login (Classic)
I couldn’t find any proper example of how to pass the scopes/permissions to the API using @auth0/auth0-angular with loginWithRedirect().
The wat I implemented it was:
loginWithRedirect() {
this.auth.loginWithRedirect(({
scope: ‘openid profile email read:sponsors create:sponsor read:programs delete:sponsor-program-enrolment’
}));
}
and
httpInterceptor: {
allowedList: [
{
uri: ${apiUrl}/*,
tokenOptions: {
// The attached token should target this audience
audience: ‘my_audience’,
// The attached token should have these scopes
scope: ‘openid profile email read:sponsors create:sponsor read:programs delete:sponsor-program-enrolment’
}
}
]
}
Is this implementation correct to get the user’s permission/scopes and attach them to my token? Just want to make sure if that’s is the correct approach to do it.
The implementation above worked for me except I need to refresh the browser manually (F5) after the login to see the protected menu on my home page.
On my home page screen, I check if the user IsAuthtcated and if so, the login button is not displayed and I display some options on the Navbar.
<ng-container *ngIf=“auth.isAuthenticated$ | async”>
I noticed that this issue only happens after I put the scopes in the loginWithRedirect.
loginWithRedirect() {
this.auth.loginWithRedirect(({
scope: ‘openid profile email read:sponsors create:sponsor read:programs delete:sponsor-program-enrolment’
}));
}
If I simply call loginWithRedirect() without passing the scopes the home page displays the protected resources correctly without needing to refresh the browser. The problem is that I need to get these scopes when the user logs in to pass it to my API.
Have someone faced this issue before or have any suggestions on what is the correct way to implement it?
Cheers,
Eduardo