Hello,
Thank you for your report.
The current behavior you observed is expected by default, ABP Framework’s Angular client stores the access token in localStorage. This is the default implementation of the Angular authentication package and is not configurable through the Angular UI layer at this time.
However, we’re aware that storing tokens in localStorage is not ideal for applications with strict security or compliance requirements. There is already an open issue to the improvement of token handling (for example, moving to an in-memory access token and an HttpOnly refresh token) to mitigate potential XSS risks.
For now, this behavior cannot be modified directly from Angular, but the topic is being tracked for future release. You can follow the related issue for updates and potential workarounds.
Related issue: https://github.com/abpframework/abp/issues/23930
Thanks
Hello, We have also been able to reproduce this issue. Until an official solution is provided, could you please apply the solution provided in the following link for now ? link
Hi,
Due to our priorities and workload in other areas, we haven’t been able to focus on this as much as we would have liked. However, we will now be dedicating more attention to addressing the issues here.
Best regards
Hello,
Could you please delete your yarn.lock file and node_modules folder and then reinstall dependencies to ensure everything is up-to-date and consistent.
You can do this by running the following commands:
rm -rf node_modules yarn.lock
yarn install
Also, could you share your package.json file with me? That way, we can check if there are any version mismatches or missing dependencies that might be causing the issue.
Thanks
Hi,
You can add the disableOAuth2StateCheck parameter under the oAuthConfig section in the environment file as follows
oAuthConfig: {
issuer: 'https://localhost:44305/',
clientId: 'MyProjectName_App',
scope: 'offline_access MyProjectName',
redirectUri: baseUrl,
disableOAuth2StateCheck: true
}
However, this is not a recommended solution due to security reason .I’m currently looking into alternative ways to solve this issue more securely
Hello,
You can style your custom component based on the current theme by using the :host-context() selector inside the component's styles. When the theme changes, a corresponding class (e.g., lpx-theme-light, lpx-theme-dark, lpx-theme-dim) is added to the <body> element. Using :host-context(), you can dynamically apply styles depending on the active theme.
Example:
import {Component} from '@angular/core';
@Component({
selector: 'app-custom-component',
template: `
<div class="custom-component">
<h2>Custom Component</h2>
<p>This is a custom component that can be used in your Angular application.</p>
</div>
`,
styles: [`
.custom-component {
padding: 20px;
border: 1px solid #ddd;
border-radius: 4px;
}
:host-context(.lpx-theme-light) .custom-component {
background-color: #ffffff;
color: [#333333](https://abp.io/QA/Questions/333333);
}
:host-context(.lpx-theme-dark) .custom-component {
background-color: [#333333](https://abp.io/QA/Questions/333333);
color: #ffffff;
}
`]
})
export class CustomComponent {
constructor() {}
}
Please feel free to reach out if you need any further assistance. Best regards,
Hello,
Thank you for reporting the issue and sharing your solution. We’ll investigate this behavior on our side, and if we can reproduce it, we’ll aim to fix it as soon as possible in an upcoming release.
Best regards
Hello, I wasn’t able to reproduce the issue you described in my environment. To better understand and help you troubleshoot the problem, could you please send a minimal example to the following email address: erdem.caygor@volosoft.com. Best regards
Hello, I’ve attempted to reproduce the issue locally but I haven’t been able to encounter the same error during ng serve. Would you mind sharing a minimal example project that reproduces the issue? You can either upload it to GitHub or send it directly to me at erdem.caygor@volosoft.com Best regards
Hello again,
Apologies for misunderstood. I initially assumed you didn't have access to the source code, but based on your latest message and the project structure screenshot, I see that you do. So if you want to quickly hide the Two factor and captcha tabs just remove this code block from account-settings.component.html
@if (isTwoFactorSettingsEnabled) {
<li ngbNavItem>
<a ngbNavLink>{{ 'AbpAccount::AccountSettingsTwoFactor' | abpLocalization }}</a>
<ng-template ngbNavContent>
<div class="abp-md-form">
<abp-account-settings-two-factor [isTenant]="isTenant" />
</div>
</ng-template>
</li>
}
@if (isCaptchaEnabled$ | async) {
<li ngbNavItem>
<a ngbNavLink>
{{ 'AbpAccount::Captcha' | abpLocalization }}
</a>
<ng-template ngbNavContent>
<div class="abp-md-form">
<abp-account-settings-captcha [isTenant]="isTenant" />
</div>
</ng-template>
</li>
}
This should work well for now. In the meantime, I’ll explore a cleaner and more sustainable solution.
Best regards
