Session not updating on ClientSide #4123

lucas-borges-belo · 2022-03-04T20:20:31Z

lucas-borges-belo
Mar 4, 2022

Question 💬

Hi, everyone,

I'm using Next Auth (v3) with Amazon Cognito. When I fetch the session through the server side, I'm able to get the session, such as:

export async function getServerSideProps(context) {
  const { res } = context;
  const session = await getSession(context)
  return {
     props: { session }
  }
}

However, when retrieving the session from client side, I'm not able to get it, as:

const [session, loading] = useSession()

However, when I manually hit api/auth/session, my client side does work. Why is this happening ?

How to reproduce ☕️

[...nextauth].js

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  providers: [
    Providers.Cognito({
      clientId: process.env.COGNITO_CLIENT_ID,
      clientSecret: process.env.COGNITO_CLIENT_SECRET,
      domain: process.env.COGNITO_DOMAIN,
    }),
  ],
  callbacks: {
    jwt: async (token, user) => {
      if (user) {
        token.jwt = user.jwt;
        token.user = user.user;
      }
      return Promise.resolve(token);
    },
    session: async (session, token) => {
      let custom_session =
      {
        user:
        {
          email: token.email,
          image: null,
          name: token.name
        },
        expires: new Date(1000* token.exp)
      }
      return Promise.resolve(custom_session);
    },
  },
  session: {
    jwt: true,
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },
  secret: process.env.NEXTAUTH_SECRET,
  jwt: {
    signingKey: process.env.JWT_SIGNING_KEY,
  },
  debug: process.env.NODE_ENV === 'development' ? true : false
})

_app.js

import "styles/globals.scss";

import Navbar from "components/Navbar/Navbar";
import Footer from "components/Footer/Footer";
import CookieConsent from "components/CookieConsent/CookieConsent";

import moment from "moment";

import { AvailableLocalesContext } from "utils/context";
import useAvailableLocales from "utils/hooks/useAvailableLocales";
import { useRouter } from "next/router";
import { Provider } from "next-auth/client"


const App = ({ Component, pageProps}) => {
	const { locale } = useRouter();
	const availableLocales = useAvailableLocales();
	moment.locale(locale);
	const NavbarComponent = Component.Navbar || Navbar;
	const FooterComponent = Component.Footer || Footer;
	const CookieConsentComponent = Component.CookieConsent || CookieConsent;

	return (
		<Provider session={pageProps.session}>
			<AvailableLocalesContext.Provider value={availableLocales}>
				<CookieConsentComponent />
				<NavbarComponent />
				<Component {...pageProps} />
				<FooterComponent />
			</AvailableLocalesContext.Provider>
		</Provider>
	);
};

export default App;

login.js

import Head from 'next/head'
import Link from 'next/link'
import { signIn, signOut, useSession } from 'next-auth/client'


export default function Home() {
  const [session, loading] = useSession()

  return (
    <div>
      <Head>
        <title>Authentication with NextAuth and AWS Cognito</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
          <div className="max-w-md w-full space-y-8 flex items-center flex-col">
            <a>
              <div className="flex-shrink-0 flex items-center bg-orange-500 h-20 w-20 border-radius p-2 font-bold text-4xl">
                dlw
              </div>
            </a>

            {!session &&
              <>
                <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
                  Example NextAuth Sign In
                </h2>
                <button
                  type="submit"
                  className="inline-flex items-center justify-center w-1/2 mt-12 rounded-md border border-transparent px-5 py-3 bg-gray-900 text-base font-medium text-white shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500 sm:px-10 disabled:opacity-50 disabled:cursor-not-allowed"
                  disabled={loading}
                  onClick={() => signIn('cognito', {
                    callbackUrl: `${window.location.origin}/protected`
                  })}
                >
                  Sign In
                </button>
              </>
            }

            {session &&
              <>
                <h1 className="my-6 text-center text-3xl font-extrabold text-gray-900">
                  Welcome, {session.user.name ?? session.user.email}
                </h1>
                <nav>
                  <Link href="/protected">
                    <a className="text-orange-500 hover:bg-black hover:text-white">Protected Page</a>
                  </Link>
                </nav>
                <button
                  type="submit"
                  className="inline-flex items-center justify-center w-1/2 mt-12 rounded-md border border-transparent px-5 py-3 bg-gray-900 text-base font-medium text-white shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500 sm:px-10 disabled:opacity-50 disabled:cursor-not-allowed"
                  disabled={loading}
                  onClick={() => signOut({
                    callbackUrl: `${window.location.origin}`
                  })}
                >
                  Sign Out
                </button>
              </>
            }

          </div>
        </div>
      </main>
    </div>
  )
}

protected.js (not working)

import Head from 'next/head'
import Link from 'next/link'
import { getSession, useSession } from 'next-auth/client'


function Protected(props) {

  const [session, loading] = useSession()


  return (
    session ? 
      <div>
        <Head>
          <title>Authentication with NextAuth and AWS Cognito</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <main>
          <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
            <div className="max-w-md w-full space-y-8  flex items-center flex-col">
              <a>
                <div className="flex-shrink-0 flex items-center bg-orange-500 h-20 w-20 border-radius p-2 font-bold text-4xl">
                  dlw
                </div>
              </a>
              <h1 className="my-6 text-center text-3xl font-extrabold text-gray-900">Client Protected</h1>
              <nav>
                <Link href="/">
                  <a className="text-orange-500 hover:bg-black hover:text-white">Home</a>
                </Link>
              </nav>
              <div className="prose">
                <p>Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong> sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. <a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.</p>
              </div>
            </div>
          </div>
        </main>
      </div>
      :
      <div>
      <h2>Not Logged</h2>
      <p>Please, redirect to <a href="auth/login/">Login</a></p>
      </div>
  )
}

export default Protected

protected.js ( working )


import Head from 'next/head'
import Link from 'next/link'
import { getSession } from 'next-auth/client'


function Protected(props) {

  return (
    props.session ? 
      <div>
        <Head>
          <title>Authentication with NextAuth and AWS Cognito</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <main>
          <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
            <div className="max-w-md w-full space-y-8  flex items-center flex-col">
              <a>
                <div className="flex-shrink-0 flex items-center bg-orange-500 h-20 w-20 border-radius p-2 font-bold text-4xl">
                  dlw
                </div>
              </a>
              <h1 className="my-6 text-center text-3xl font-extrabold text-gray-900">Client Protected</h1>
              <nav>
                <Link href="/">
                  <a className="text-orange-500 hover:bg-black hover:text-white">Home</a>
                </Link>
              </nav>
              <div className="prose">
                <p>Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong> sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. <a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.</p>
              </div>
            </div>
          </div>
        </main>
      </div>
      :
      <div>
      <h2>Not Logged</h2>
      <p>Please, redirect to <a href="auth/login/">Login</a></p>
      </div>
  )
}

export default Protected

export async function getServerSideProps(context) {
  const { res } = context;
  const session = await getSession(context)
  return {
    props: { session }
  }
}

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Session not updating on ClientSide #4123

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Session not updating on ClientSide #4123

Uh oh!

Uh oh!

lucas-borges-belo Mar 4, 2022

Question 💬

How to reproduce ☕️

Contributing 🙌🏽

Replies: 0 comments

lucas-borges-belo
Mar 4, 2022