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!
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.