Auth0js - logout without redirect

Help
1

hi there,

like descriped here Auth0js - login without redirect - #3 by crazyx13th I use webAuth.popup.loginWithCredentials for I nice workflow in my SPA. No redirect, no Poupup, … only a hidden iFrame who handles the “redirect”.

But what about logout. I there a way with the IFrame solution? And when no > why?
THX!

greetings
crazyx13th

2 Likes
2

Hey there!

Sorry for such huge delay in response! We’re doing our best in providing you with best developer support experience out there, but sometimes our bandwidth is not enough comparing to the number of incoming questions.

Wanted to reach out to know if you still require further assistance?

3

Hi there, I’m actually experiencing the same issue.
I’m trying to retrieve an access token with auth0js with own ui, I don’t want the redirect

4

:point_up_2: Same here! I’m in an SPA and like to do a logout without a page reload.

7

Here is how I did it:

I deleted the cookies and re-initialized my Auth0Client.

My full util:

import { tracked } from '@glimmer/tracking';

import type { Auth0Client } from '@auth0/auth0-spa-js';

export class Auth0 {
  #client: Auth0Client | null = null;

  constructor() {
    this.#setup();
  }

  @tracked isAuthenticated: boolean | null = null;

  get isPending() {
    return this.isAuthenticated === null;
  }

  #setup = async () => {
    if (this.#client) return this.#client;

    const { createAuth0Client } = await import('@auth0/auth0-spa-js');

    this.#client = await createAuth0Client({ .. });

    await this.#updateAuthStatus();

    return this.#client;
  };

  #updateAuthStatus = async () => {
    if (!this.#client) return;

    let status = await this.#client.isAuthenticated();

    this.isAuthenticated = status;

    return this.isAuthenticated;
  };

  check = async () => {
    await this.#setup();
    await this.#updateAuthStatus();
  };

  login = async () => {
    let client = await this.#setup();

    if (this.isAuthenticated) return;

    await client.loginWithPopup();
    await this.#updateAuthStatus();
  };

  /**
   * Auth0 should make this easier...
   * - https://community.auth0.com/t/is-login-via-auth0-possible-without-reloading-my-spa/18846
   * - https://community.auth0.com/t/auth0js-logout-without-redirect/23966/2
   * - https://community.auth0.com/t/how-to-logout-without-reload/100289
   */
  logout = async () => {
    await this.#setup();

    if (!this.isAuthenticated) return;

    document.cookie = '';
    this.#client = null;
    await this.#setup();
  };
}