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.

4

Logging in and out works however when i log back in after logging out I get and error

response parameter “state” missing

I have to click the login button twice for it to work. Anyone know why this error might be happening.

import { auth } from '@/client';
import { BrandLogo } from '@/components/BrandLogo';
import UnauthenticatedLayout from '@/components/Layouts/UnauthenticatedLayout';
import { tokenAtom } from '@/state/auth';
import { Alert, Button, Stack, Typography } from '@mui/material';
import { useMutation } from '@tanstack/react-query';
import { useAtom } from 'jotai';
import { Navigate } from 'react-router-dom';

export default function Login() {
  const [token, setToken] = useAtom(tokenAtom);
  const mutation = useMutation({
    mutationFn: () => auth.signIn(),
    onSuccess: (token) => {
      setToken(token.access_token);
    },
  });
  const handleLogin = () => {
    mutation.mutate();
  };

  // If the token exists but a user tries to load /login, redirect to the home page instead
  if (token) {
    return <Navigate to="/" replace={true} />;
  }

  return (
    <UnauthenticatedLayout>
      <Stack
        sx={{
          background: (theme) => theme.palette.common.white,
          borderRadius: 2,
          boxShadow: 1,
          width: 1,
          maxWidth: 450,
          p: 3,
        }}
        gap={3}
        alignItems="center"
      >
        <BrandLogo />
        <Typography component="h1" variant="h2" sx={{ m: 0, p: 0 }}>
          Welcome Back!
        </Typography>
        {mutation.error && (
          <Alert
            variant="outlined"
            severity="error"
            sx={{ width: 1, background: (theme) => theme.palette.error.light }}
          >
            <Typography variant="body2" color="error">
              {mutation.error.message}
            </Typography>
          </Alert>
        )}
        <Button
          onClick={handleLogin}
          variant="contained"
          loading={mutation.isPending}
          loadingPosition="start"
          sx={{ width: 1 }}
        >
          AD Login
        </Button>
      </Stack>
    </UnauthenticatedLayout>
  );
}