Auth signOut is not working

Ask the Community
1

auth.signOut() doesn’t look to work I have this code

import LogoutIcon from '@mui/icons-material/Logout';
import {
  Avatar,
  Button,
  ListItemIcon,
  Menu,
  MenuItem,
  Stack,
  useMediaQuery,
} from '@mui/material';

import { useAtomValue } from 'jotai';
import { MouseEvent, useState } from 'react';

import { topNavMenu } from '@/data/topNavMenu';
import theme from '@/theme';
import { userAtom } from '@/state/user';
import { auth } from '@/client';
import { useMutation } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';

export default function AvatarMenu() {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const navigate = useNavigate();
  const mutation = useMutation({
    mutationFn: () => auth.signOut(),
    onSuccess: () => {
      console.log(true) // never called
    }
  });
  const open = Boolean(anchorEl);
  const user = useAtomValue(userAtom);
  const isMobileView = useMediaQuery(theme.breakpoints.down('md'));
  const handleClick = (event: MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };
  const handlePageChange = (path: string) => () => {
    navigate(path);
    handleClose();
  };
  const handleLogUserOut = () => {
    handleClose();
    mutation.mutate();
    navigate('/');
  };

  return (
    <Stack direction="row" alignItems="center">
      <Button
        variant="text"
        startIcon={<Avatar sx={{ width: 30, height: 30 }} />}
        onClick={handleClick}
        aria-controls={open ? 'user-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        sx={{ fontSize: (theme) => theme.typography.pxToRem(14) }}
      >
        {user?.firstName} {user?.lastName}
      </Button>
      <Menu
        anchorEl={anchorEl}
        id="user-menu"
        open={open}
        onClose={handleClose}
        onClick={handleClose}
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
        sx={{
          '.MuiList-root': { py: 0 },
          '.MuiMenuItem-root': {
            borderBottom: 1,
            borderBottomStyle: 'solid',
            columnGap: 1,
            py: 2,
            fontSize: (theme) => theme.typography.pxToRem(14),
            color: (theme) => theme.palette.primary.main,
            borderBottomColor: (theme) => theme.palette.divider,
            ':last-child': {
              border: 0,
            },
            '.MuiListItemIcon-root': {
              minWidth: 0,
            },
          },
        }}
        slotProps={{
          paper: {
            elevation: 0,
            sx: {
              overflow: 'visible',
              filter: (theme) => `drop-shadow(${theme.customShadows.level2})`,
              '& .MuiAvatar-root': {
                width: 32,
                height: 32,
                ml: -0.5,
                mr: 1,
              },
              '&::before': {
                content: '""',
                display: 'block',
                position: 'absolute',
                top: 0,
                right: 14,
                width: 10,
                height: 10,
                bgcolor: 'background.paper',
                transform: 'translateY(-50%) rotate(45deg)',
                zIndex: 0,
              },
            },
          },
        }}
      >
        {isMobileView &&
          topNavMenu.map((v) => {
            return (
              <MenuItem onClick={handlePageChange(`/${v.link}`)} key={v.link}>
                {v.linkName}
              </MenuItem>
            );
          })}
        <MenuItem onClick={handleLogUserOut}>
          Log Out
          <ListItemIcon>
            <LogoutIcon
              sx={{
                fontSize: 14,
                color: (theme) => theme.palette.primary.main,
              }}
            />
          </ListItemIcon>
        </MenuItem>
      </Menu>
    </Stack>
  );
}

I am able to log in a user with mutationFn: () => auth.signIn(), but when i call auth.signOut() I don’t see any network traffic then the function is called. Also the cookies are not deleted and I tried to remove the cookies from the client but that didn’t work my guess is because they are set from the server from auth.

2

Hi,

There should be a network request to /multipass/api/oauth2/revoke_token when you execute auth.signOut().

Could you share what version of "@osdk/oauth" you have installed?

Could you also log the onError path of the mutation?

  const mutation = useMutation({
    mutationFn: () => auth.signOut(),
    onSuccess: () => {
      console.log(true) // never called
    }
  });
3

Thanks i found the issue my token was being refreshed.