amplify-js: Using Auth method to check if the user is logged in with SSR and then trying to signOut does not work

Describe the bug I’m using the Auth method to know if a user is logged in and then execute the signOut method to logout but does not work. Also, the Auth.currentAuthenticatedUser() throws an error that the user is not authenticated even when it is on SSR. I have just implemented this on Dev, I haven’t tried on Prod.

To Reproduce

First, I have added the Amplify.configure({ ...config, ssr: true }); in the _app.js file. Then, I created a function to detect if the a user is logged in when the getServerSideProps is executed. This is withAuth:

import { withSSRContext } from 'aws-amplify';

export const withAuth = async context => {
  try {
    const SSR = withSSRContext(context);
    const user = await SSR.Auth.currentAuthenticatedUser();

    return user;
  } catch (error) {
    context.res.writeHead(301, { Location: '/signin' });
    context.res.end();
  }
};

I call this function on every private page the project has, like this:

import React from 'react';

import { withAuth } from '../lib/withAuth';
import { MySecretComponent } from '../components/views';

const MySecretPage = props => {
  const { user } = props;

  return <MySecretComponent user={user} />;
};

export async function getServerSideProps(context) {
  const auth = await withAuth(context);
  const user = JSON.parse(JSON.stringify(auth)); // Next.js throws a validation error with the object response if I dont do this.

  return {
    props: {
      user: user || null,
    },
  };
}

export default MySecretPage;

It works fine, but when the user wants to signOut, like this:

import React from 'react';
import { useRouter } from 'next/router';
import { Auth } from 'aws-amplify';

const MyComponent => () => {
  const router = useRouter();

  const signOut = () => {
    Auth.signOut().then(() => {
      router.reload();
    });
  };

  return <button onClick={signOut}>logout</button>
}

Amplify still detects I’m logged in… Even when the user already executed the signOut function… And here’s when the project starts to act weird, the method withAuth throws the user to /signin even when is “logged in” but I can still navigate to any private page with the <Link /> component. I already tried removing the cache from the browser and tried with an incognito page, but nothing…

One thing to mention is that I have a header component, to show the user photo and other info, I get this info using Auth in client-side using an useEffect. I don’t know if using Auth in the header component and also in SSR affects something…

Expected behavior Work fine, when the user wants to signout

• Device: Windows, Linux, and Android phone
• Browser Google Chrome latest version
• Version of aws-amplify: 3.3.7
• Next.js version: 10.0.1