demo2 with Angular(Frontend) + .net-core(Backend) - Login Error - net::ERR_CERT_AUTHORITY_INVALID

When I send a POST request, for my login API in .net-core 6.0 I have this error in the console:

auth.service.ts:56 
err HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: 'Unknown Error', url: 'https://192.168.254.115:7047/api/Auth/login'

zone.js:2680
POST https://192.168.254.115:7047/api/Auth/login net::ERR_CERT_AUTHORITY_INVALID

- The template returns: wrong user or password.
- I can access the API with Insomnia, for example, without errors.
- The certificate was installed on Browser correctly

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

Hi,

We are not big experts in backend integration (especially with ASP.NET Core) and can't help you with this. Anyway, just try to debug your requests in the development tools and change Auth/User models if your API asks for different models.

Regards,
Keenthemes support

I fix the CORS error.
Now the request arrives at the API correctly, but the login method don't create a token.


login(username: string, password: string): Observable {
this.isLoadingSubject.next(true);
return this.authHttpService.login(username, password).pipe(
map((auth: AuthModel) => {
const result = this.setAuthFromLocalStorage(auth);
return result;
}),
switchMap(() => this.getUserByToken()),
catchError((err) => {
console.error('err', err);
return of(undefined);
}),
finalize(() => this.isLoadingSubject.next(false))
);
}

The method dont call setAuthFromLocalStorage function, I don't know why .. and I have a HttpErroResponse error on console (400 Bad Request)

Hi,

Could you please your localStorage, can you see the authToken here?
Also please check the response from ${API_USERS_URL}/login request. Does it return all AuthModel fields? (src/app/modules/auth/models/auth.model.ts)

Regards,
Keenthemes support

HI,

Thanks for your help.

The response from ${API_USERS_URL}/login returns an error in console:

HttpErrorResponse {
headers: HttpHeaders, status: 200, statusText: 'OK', url: 'https://apiUrl/login', ok: false, ..}
error: { error: SyntaxError: Unexpecdted token e in JSON at position 0 at JSON.parse () at XMLHttpRequest.onLoad (http://localhost:4200/vendos.js:28559:39) at _ZoneDelegate.invokeTask ...
stack:
"SyntaxError: Unexpected token e in JSON at position 0
at JSON.parse ()
at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:28559:39)
at _ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3521:31)
at Object.onInvokeTask (http://localhost:4200/vendor.js:55129:33)
at _ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3520:60)
at Zone.runTask (http://localhost:4200/polyfills.js:3293:47)
at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:3602:34)
at invokeTask (http://localhost:4200/polyfills.js:4763:18)
at globalCallback (http://localhost:4200/polyfills.js:4806:33)
at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:4827:16)"
text (this is my token, the api returns correctly for the application): "eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTUxMiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoibGVvIiwiaHR0cDovL3NjaGVtYXMubWljcm9zb2Z0LmNvbS93cy8yMDA4LzA2L2lkZW50aXR5L2NsYWltcy9yb2xl"}

So, the API returns correctly token for the application, but we have a JSON parse error.

It's trying to read from localStorage your accessToken.
Try to debug getAuthFromLocalStorage method. It will help you understand the issue then.

Regards,
Keenthemes support

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(