Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Auth0 Logout Not Fully Logging Out – Auto Login Without Password Prompt

I am using Auth0 for user authentication in a React application. The login flow works perfectly fine. However, I’m encountering issue with the logout flow. When a user logs out of my application using the logout function provided by Auth0, they are redirected to the homepage as expected. However, when they try to log in again, they are automatically logged back in without begin prompted for their credentials.

const logoutUser = async () => {

    logout({
      returnTo: window.location.origin,
      federated: true,
    });

    try {
      await axios.get(`https://${import.meta.env.VITE_AUTH0_DOMAIN}/v2/logout`, {
        params: {
          client_id: `${import.meta.env.VITE_AUTH0_CLIENT_ID}`, 
          returnTo: window.location.origin, 
          federated: true, 
        },
        withCredentials: true, 
      });
  
      document.cookie.split(";").forEach((cookie) => {
        const name = cookie.split("=")[0].trim();
        document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/`;
      });
  
      window.location.href = window.location.origin;
    } catch (error) {
      console.error("Error during logout:", error);
    }
    
  };

This is the function I am calling when the user clicks on Logout button

I have tried all solutions I found, making a call to the https://YOUR_AUTH0_DOMAIN/v2/logout URL, manually clearing the cookies, calling the logout function of Auth0. But nothing is working.

This is my Auth0 Dashboard

I want the log out process to completely log out users out of the application and when the user tries to log back in, they should be prompted to enter their credentials again.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    ISSUE EXPLANATION

    Every technique that I used for logging out was individually correct. The issue was not with the code but with the Auth0 Social Connection Configurations.

    When using any of the available social identity providers in Auth0, we need to register our application with the relevant identity provider, in order to obtain Client ID and Client Secret.

    Although Auth0 allows to test a Social Identity Provider without specifying the Client ID and Client Secret by using Auth0 Developer keys, but it has its limitations, federated logout being one of those.

    Refer to the Documentation for more details.

    SOLUTION:

    Set up a Google Developer Project(if you are using Google as the Identity Provider). Configure the project with your Auth0 Application. Feed the Client ID and Client Secret of your Google Project in your Auth0 Application.

    Follow the Step-by-Step Process to setup and link your project.


  2. 0

    Note that for JWT authentication, you need to explicitly logout in the frontend as well. Only loggin g out in the backend (calling the /v2/logout endpoint) will just prevent the backend from renewing your JWT. The JWT already stored in the frontend is still valid since it’s self contained, and must be deleted aswell.

    Could it be that you did not call the logout function in the frontend? It will delete the local JWT for you.

    I always found the React Auth0 library a bit poorly documented, and tend to look at the plain JS documentation to figure out how to use the React SDK. Check out the logout function from the Auth0ContextInterface

    Here are some general guidance:
    https://auth0.com/docs/quickstart/spa/vanillajs/interactive#add-logout-to-your-application

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search