Angular集成Auth0：loginWithRedirect()后isAuthenticated$始终为false

环境与核心问题 #

• 使用版本：angular/cli 15.1.1、auth0/auth0-angular 2.0.1
• 核心问题：调用loginWithRedirect()完成登录后，Auth0后台显示登录成功，但Angular端isAuthenticated$始终返回false；改用loginWithPopup()配合handleRedirectCallback()可正常识别认证状态，但弹窗体验不佳，需修复跳转登录的状态识别问题

详细问题描述 #

严格按照Auth0官方教程完成集成，注册功能正常，但注册后调用loginWithRedirect()时，未弹出登录窗口直接返回应用，isAuthenticated$始终为false。查看Auth0客户端认证历史，显示登录成功，但Identity Provider、Connection均为N/A，connection_id为空，不确定是否与此问题相关。

相关代码展示 #

环境配置文件 environment.ts #

（已正确填写MY_DOMAIN、MY_CLIENTID和MY_AUDIENCE）

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（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);
    });
  }

  // 尝试登录逻辑（参考社区方案）
  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']);
      }
    });
  }

  // 登出逻辑
  logout(): void {
    if (this.onlineStatusService.getStatus() === OnlineStatusType.OFFLINE) {
      this.router.navigate(['login']);
      return;
    }
    this.auth.logout({
      logoutParams: {
        returnTo: this.document.location.origin
      }
    });
  }
}

内容的提问来源于stack exchange，提问作者Tyrell Bain