Logout from an React App with Custom Social Connection does not work

I added a Custom Social Connection(which links to my another tenant application) to my React app. If I login from this Custom Social Connection, after I logout, and click login again, it did not popup username/password fields for me to type credentials. How can i logout from this Custom Social Connection(another tenant)?

Hi @allen2,

Welcome to the Community!

Would you mind sharing your code where you log out? For example:

import { useAuth0 } from "@auth0/auth0-react";

const NavBar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const {
    user,
    isAuthenticated,
    loginWithRedirect,
    logout,
  } = useAuth0();
  const toggle = () => setIsOpen(!isOpen);

  const logoutWithRedirect = () =>
    logout({
      returnTo: window.location.origin,
    });

  return (
    <div className="nav-container">
      <Navbar color="light" light expand="md">
        <Container>
          <Collapse isOpen={isOpen} navbar>
            <Nav className="mr-auto" navbar>
              <NavItem>
                <NavLink
                  tag={RouterNavLink}
                  to="/"
                  exact
                  activeClassName="router-link-exact-active"
                >
                  Home
                </NavLink>
              </NavItem>
              {isAuthenticated && (
                <NavItem>
                  <NavLink
                    tag={RouterNavLink}
                    to="/external-api"
                    exact
                    activeClassName="router-link-exact-active"
                  >
                    External API
                  </NavLink>
                </NavItem>
              )}
            </Nav>
            <Nav className="d-none d-md-block" navbar>
              {!isAuthenticated && (
                <NavItem>
                  <Button
                    id="qsLoginBtn"
                    color="primary"
                    className="btn-margin"
                    onClick={() => loginWithRedirect()}
                  >
                    Log in
                  </Button>
                </NavItem>
              )}
              {isAuthenticated && (
                <UncontrolledDropdown nav inNavbar>
                  <DropdownToggle nav caret id="profileDropDown">
                    <img
                      src={user.picture}
                      alt="Profile"
                      className="nav-user-profile rounded-circle"
                      width="50"
                    />
                  </DropdownToggle>
                  <DropdownMenu>
                    <DropdownItem header>{user.name}</DropdownItem>
                    <DropdownItem
                      tag={RouterNavLink}
                      to="/profile"
                      className="dropdown-profile"
                      activeClassName="router-link-exact-active"
                    >
                      <FontAwesomeIcon icon="user" className="mr-3" /> Profile
                    </DropdownItem>
                    <DropdownItem
                      id="qsLogoutBtn"
                      onClick={() => logoutWithRedirect()}
                    >
                      <FontAwesomeIcon icon="power-off" className="mr-3" /> Log
                      out
                    </DropdownItem>
                  </DropdownMenu>
                </UncontrolledDropdown>
              )}
            </Nav>
            {!isAuthenticated && (
              <Nav className="d-md-none" navbar>
                <NavItem>
                  <Button
                    id="qsLoginBtn"
                    color="primary"
                    block
                    onClick={() => loginWithRedirect()}
                  >
                    Log in
                  </Button>
                </NavItem>
              </Nav>
            )}
            {isAuthenticated && (
              <Nav
                className="d-md-none justify-content-between"
                navbar
                style={{ minHeight: 170 }}
              >
                <NavItem>
                  <FontAwesomeIcon icon="power-off" className="mr-3" />
                  <RouterNavLink
                    to="#"
                    id="qsLogoutBtn"
                    onClick={() => logoutWithRedirect()}
                  >
                    Log out
                  </RouterNavLink>
                </NavItem>
              </Nav>
            )}
          </Collapse>
        </Container>
      </Navbar>
    </div>
  );
};

export default NavBar;

Also, does this behavior happen with other social connections (such as Google) or is it only with the custom social connection?

Thanks!

1 Like

Thanks Stephanie. You are right, that’s the common behaviour with social connections(Google).

That is helpful to know! Have you been able to find the solution to logging out? If not, would you be able to send a snippet of code where you are logging out so that I might be able to replicate this behavior? Thanks!

Thanks for following up. Actually I did not customise any code, just follow with the auth0 react example which is exactly like the code snippet you provided above.

const logoutWithRedirect = () =>
logout({
returnTo: window.location.origin,
});

My business logic is setup via the auth0 dashboard:
I have TWO tenants: Tenant_A and Tenant_B. Tenant_A has an App_A with UserPool_A, Tenant_B has an App_B with UserPool_B.
The requirement is, when user lands on App_A login page, he/she should be able to authenticated either via UserPool_A or UserPool_B to access App_A.
So I created a Custom Social Connection on Tenant_A to connect with App_B. It works well. The only issue is, when user login via this CustomSocialConnection and logout and try CustomSocialConnection again, it automatically authorise the user without popup login form. I also tried Google Social Connection, same behaviour. However, if different users use the same computer with CustomSocialConnection, it will be a problem.

I haven’t been able to recreate this behavior, but have you tried passing prompt=login to the /authorize endpoint so that the user will always see the login form:

loginWithRedirect({ prompt: 'login' });

Thanks @stephanie.chamblee, this worked for my use case. Wasn’t clear in auth0 docs.

1 Like

I’m glad that it is working!