I have previously posted this issue on the Auth0 Community Help Forum, but I am yet to receive a response despite posting it 2 weeks ago. Here is the link to my original post:
Currently, my setup includes angular/cli 15.1.1 and auth0/auth0-angular 2.0.1.
To provide an overview, when I call loginWithRedirect(), the return value of isAuthenticated$ is always false even if I input correct user credentials. While Auth0 recognizes me as authenticated, the Angular API fails to do so. On the other hand, invoking loginWithPopup() sets isAuthenticated$ to true when correct credentials are entered and handleRedirectCallback() is called. However, using loginWithPopup() does not offer optimal UI/UX compared to loginWithRedirect(). My aim is to achieve a scenario where loginWithRedirect() results in isAuthenticated$ being set to true upon entering correct credentials.
Below are additional details extracted from my aforementioned post for reference.
From my community post:
Greetings! I am encountering difficulties while integrating Auth0 into my Angular application.
I meticulously followed this tutorial from the Auth0 documentation to integrate Auth0 into my Angular project, ensuring that all steps were executed accurately.
The account registration process functions well; however, following registration, I encounter issues with logging in. When I trigger loginWithRedirect() after creating an account, it fails to display the login window and redirects me back to the application with isAuthenticated$ still set to false. Upon reviewing the client's authentication history, the following information was observed:
Information on successful Auth0 logins
While the system indicates a successful login, the Identity Provider is listed as N/A. Additionally, the Connection field remains unspecified, with a blank value for connection_id. It remains uncertain whether these factors contribute to the encountered problem.
Despite consulting the Auth0 documentation and conducting online searches, no solution has rectified the persistent issue of isAuthenticated$ consistently displaying false post executing loginWithRedirect(). Multiple individuals have reported facing similar challenges and provided diverse remedies, but none have addressed my specific case.
Notably, running loginWithPopup() based on certain insights discovered online yields successful authentication, setting isAuthenticated$ to true. Towards the conclusion of this message, I include my code snippet demonstrating the functionality of loginWithPopup() within my app.
The constant failure of loginWithRedirect() to update isAuthenticated$ to true irrespective of external resolutions perplexes me. The accompanying code segment underlines my configuration.
The current version utilized is auth0/auth0-angular 2.0.1.
environment.ts (Entries for MY_DOMAIN, MY_CLIENTID, and MY_AUDIENCE reflect accurate values within my application)
export const environment = {
production: false,
auth0: {
domain: 'MY_DOMAIN',
clientId: 'MY_CLIENTID',
redirect_uri: window.location.origin,
audience: 'MY_AUDIENCE'
}
};
app.module.ts
import { AuthModule } from '@auth0/auth0-angular';
import { environment as env } from '../environments/environment';
// ...
@NgModule({
// ...
AuthModule.forRoot({
domain: env.auth0.domain,
clientId: env.auth0.clientId,
authorizationParams: {
redirect_uri: env.auth0.redirect_uri,
audience: env.auth0.audience
},
cacheLocation: 'localstorage'
}),
// ...
})
login.component.html
<div class="container login-container">
<div class="row">
<h1 align="center">
TITLE
</h1>
</div>
<div class="row justify-content-center">
<button mat-flat-button
class="login-button"
type="button"
(click)="attemptLogin()">
Login or Sign Up (Auth0)
</button>
</div>
<div class="row justify-content-center">
<button mat-flat-button
class="login-button"
type="button"
(click)="logout()">
Logout
</button>
</div>
</div>
login.component.ts (Please note the functionality of logout())
import { Component, OnInit, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService, User } from '@auth0/auth0-angular';
import { OnlineStatusService, OnlineStatusType } from 'ngx-online-status';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(
public auth: AuthService,
private router: Router,
private onlineStatusService: OnlineStatusService,
@Inject(DOCUMENT) public document: Document
) {
}
ngOnInit(): void {
this.auth.user$.subscribe((value: User | null | undefined) => {
console.log("User:", value);
});
this.auth.isAuthenticated$.subscribe((value: boolean) => {
console.log("Authd:", value);
});
}
// attempt to login with the entered credentials
// solution from https://community.auth0.com/t/isauthenticated-is-always-false/84794/3
attemptLogin(): void {
this.auth.isAuthenticated$.subscribe((value: boolean) => {
if (!value) {
let query: string = window.location.search;
let shouldParseResult: boolean = query.includes("code=") && query.includes("state=");
if (shouldParseResult) {
try {
this.auth.handleRedirectCallback().subscribe((value) => {
console.log("Logged in!", value);
});
} catch (err: unknown) {
console.log("Error parsing redirect:", err);
}
window.history.replaceState({}, this.document.title, "/");
}
else {
this.auth.loginWithRedirect().subscribe((value: void) => {
console.log("Logging in...", value);
});
}
}
else {
this.router.navigate(['home']);
}
});
}
// log out of account and go back to the login screen
logout(): void {
if (this.onlineStatusService.getStatus() === OnlineStatusType.OFFLINE) {
this.router.navigate(['login']);
return;
}
this.auth.logout({
logoutParams: {
returnTo: this.document.location.origin
}
});
}
}