useSession Apollo Bearer token undefined

[HT-Moh]

Question 💬

Not sure where to post this but here is my setup :
So I am using nextjs + hasura + prisma + apollo ...etc
The problem is that I am logged in, I receive the correct token. However bearer token sent through apollo client is undefined. but when I print the session it has the token. I am no sure but it seems the session is empty. (maybe caching)

/* eslint-disable react/jsx-props-no-spreading */
import { FC } from 'react';
import type { AppProps } from 'next/app';
import { DefaultSeo } from 'next-seo';
import { ThemeProvider } from 'next-themes';
import { Provider as NextAuthProvider } from 'next-auth/client';
import SEO from '@/default-seo.json';
// Import css files
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import '@/public/styles/global.css';
import '@/public/styles/style.scss';
import '@/public/styles/components.css';

import { wrapper } from '@/store/Store';
import { ApolloProvider } from '@apollo/client';
import { useApollo } from '@/lib/ApolloClient';

const WrappedApp: FC<AppProps> = ({ Component, pageProps }: AppProps) => {
  const { session } = pageProps;

  const apolloClient = useApollo(pageProps.initialApolloState, session?.token);

  return (
    <>
      <NextAuthProvider session={session}>
        <ApolloProvider client={apolloClient}>
          {/* <ApolloProvider client={apolloClient}> */}
          <DefaultSeo {...SEO} />
          <ThemeProvider attribute="class">
            <Component {...pageProps} />
          </ThemeProvider>
          {/* </ApolloProvider> */}
        </ApolloProvider>
      </NextAuthProvider>

      {/* </UserProvider> */}
    </>
  );
};

export default wrapper.withRedux(WrappedApp);

import Session from '@/types/session';
import Token from '@/types/token';
import User from '@/types/user';
import jwt from 'jsonwebtoken';
import { NextApiRequest, NextApiResponse } from 'next';
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import { PrismaClient } from '@prisma/client';
import Adapters from 'next-auth/adapters';

// https://github.com/nextauthjs/adapters/issues/120#issuecomment-787603137

const jwtSecret = JSON.parse(process.env.AUTH_PRIVATE_KEY || ``);

const prisma = new PrismaClient();

const options = {
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID || '',
      clientSecret: process.env.GOOGLE_CLIENT_SECRET || '',
    }),
  ],
  database: process.env.DATABASE_URL,
  adapter: Adapters.Prisma.Adapter({ prisma }),
  session: {
    jwt: true,
  },
  jwt: {
    encode: async ({ token, secret }: { token: Token; secret: string }) => {
      const tokenContents = {
        id: `${token.id}`,
        name: token.name,
        email: token.email,
        picture: token.picture,
        'https://hasura.io/jwt/claims': {
          'x-hasura-allowed-roles': ['admin', 'user'],
          'x-hasura-default-role': 'user',
          'x-hasura-role': 'user',
          'x-hasura-user-id': `${token.id}`,
        },
        iat: Date.now() / 1000,
        exp: Math.floor(Date.now() / 1000) + 72 * 60 * 60,
        sub: `${token.id}`,
      };

      const encodedToken = jwt.sign(tokenContents, jwtSecret.key, {
        algorithm: jwtSecret.type,
      });
      return encodedToken;
    },
    decode: async ({ token, secret }: { token: string; secret: string }) => {
      const decodedToken = jwt.verify(token, jwtSecret.key, {
        algorithms: jwtSecret.type,
      });

      return decodedToken;
    },
  },
  debug: true,
  callbacks: {
    session: async (session: Session, user: User) => {
      const encodedToken = jwt.sign(user, jwtSecret.key, {
        algorithm: jwtSecret.type,
      });

      session.id = user.id;
      session.token = encodedToken;
      return Promise.resolve(session);
    },
    jwt: async (
      token: Token,
      user: User,
      account: any,
      profile: any,
      isNewUser: any
    ) => {
      const isSignIn = user ? true : false;

      if (isSignIn) {
        token.id = user.id;
      }

      return Promise.resolve(token);
    },
  },
};

const Auth = (req: NextApiRequest, res: NextApiResponse) =>
  // @ts-ignore
  NextAuth(req, res, options);

export default Auth;

import Head from 'next/head';
import { DefaultSeo } from 'next-seo';
import { ReactElement, useEffect, useState } from 'react';
import { useSession } from 'next-auth/client';
import dynamic from 'next/dynamic';
import SEO from '@/default-seo.json';
import { useGetPostsQuery, Order_By, PostFragment } from '@/generated/graphql';
import { wrapper } from '@/store/Store';

const RedirectToLogin = dynamic(import('@/components/RedirectToLogin'));

export const getStaticProps = wrapper.getStaticProps(
  (store) => async (context) => {
    return {
      props: {},
    };
  }
);
const Article = (): ReactElement => {
  const [session, _loading] = useSession();
  const [posts, setPosts] = useState<PostFragment[]>();
  const { data, loading, error } = useGetPostsQuery({
    variables: {
      order_by: {
        order: Order_By.Asc,
      },
      where: { publish: { _eq: true } },
    },
  });
  console.log(session);

  useEffect(() => {
    if (data) {
      setPosts(data?.blog);
    }
  }, [data]);

  if (typeof window !== 'undefined' && loading) return <></>;
  if (!_loading && !session) {
    return (
      <>
        <RedirectToLogin />
      </>
    );
  }

  return (
    <>
      {/* <AdminNavBar /> */}
      <Head>
        <title>Crypto Catalyst</title>
        <link href="/favicon.ico" rel="icon" />
      </Head>
      <DefaultSeo {...SEO} />
      <div className="overflow-x-hidden">
        {posts &&
          posts.map((v) => {
            return <p>{v.id}</p>;
          })}
      </div>
    </>
  );
};

export default Article;

How to reproduce ☕️

How to reproduce:

"next": "^11.1.0",
"next-auth": "^3.28.0",
"@apollo/client": "^3.4.8",

You can reproduce the issue by using the same files apolloClient.tsx

cache.tsx

import { InMemoryCache } from '@apollo/client';
import { concatPagination } from '@apollo/client/utilities';

export const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        feeds: concatPagination(),
      },
    },
  },
});

apolloClient.tsx

import { ApolloClient, HttpLink, split } from '@apollo/client';
import { NormalizedCacheObject } from '@apollo/client/cache';
import { WebSocketLink } from '@apollo/client/link/ws';
import { getMainDefinition } from '@apollo/client/utilities';
import fetch from 'isomorphic-unfetch';
import ws from 'isomorphic-ws';
import React from 'react';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import { cache } from '@/lib/cache';

const createHttpLink = (token: string) => {
  const httpLink = new HttpLink({
    uri: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8888/v1/graphql',
    credentials: 'include',
    headers: { Authorization: `Bearer ${token}` },
    fetch,
  });
  return httpLink;
};

const createWSLink = (token: string) => {
  return new WebSocketLink(
    new SubscriptionClient(
      process.env.NEXT_PUBLIC_WS_URL || 'ws://localhost:8888/v1/graphql',
      {
        lazy: true,
        reconnect: true,
        connectionParams: async () => {
          return {
            headers: { Authorization: `Bearer ${token}` },
          };
        },
      },
      ws
    )
  );
};
/* ApolloClient */
let apolloClient: ApolloClient<NormalizedCacheObject>;

export const createApolloClient = (token: string) => {
  const ssrMode = typeof window === 'undefined';

  const link = !ssrMode
    ? split(
        //only create the split in the browser
        // split based on operation type
        ({ query }) => {
          const definition = getMainDefinition(query);
          return (
            definition.kind === 'OperationDefinition' &&
            definition.operation === 'subscription'
          );
        },
        createWSLink(token),
        createHttpLink(token)
      )
    : createHttpLink(token);

  return new ApolloClient({ ssrMode, link, cache });
};

export const initializeApollo = (initialState = {}, token: string) => {
  const _apolloClient = apolloClient ?? createApolloClient(token);

  // If your page has Next.js data fetching methods that use Apollo Client
  //  the initial state gets hydrated here
  console.log(initialState);
  if (initialState) {
    // Get existing cache, loaded during client side data fetching
    const existingCache = _apolloClient.extract();
    // Restore the cache using the data passed from getStaticProps/getServerSideProps
    // combined with the existing cached data
    _apolloClient.cache.restore({ ...existingCache, ...initialState });
  }
  // For SSG and SSR always create a new Apollo Client
  if (typeof window === 'undefined') return _apolloClient;
  // Create the Apollo Client once in the client
  if (!apolloClient) apolloClient = _apolloClient;

  return _apolloClient;
};

export function useApollo(initialState: any, token: string) {
  const store = React.useMemo(
    () => initializeApollo(initialState, token),
    [initialState, token]
  );
  return store;
}

_app.tsx

import { ApolloProvider } from '@apollo/client';
import { useApollo } from '@/lib/ApolloClient';

const WrappedApp: FC<AppProps> = ({ Component, pageProps }: AppProps) => {
  const { session } = pageProps;

  const apolloClient = useApollo(pageProps.initialApolloState, session?.token);

  return (
    <>
      <NextAuthProvider session={session}>
        <ApolloProvider client={apolloClient}>
          {/* <ApolloProvider client={apolloClient}> */}
          <DefaultSeo {...SEO} />
          <ThemeProvider attribute="class">
            <Component {...pageProps} />
          </ThemeProvider>
          {/* </ApolloProvider> */}
        </ApolloProvider>
      </NextAuthProvider>

      {/* </UserProvider> */}
    </>
  );
};

export default WrappedApp;

articles.tsx

import Head from 'next/head';
import { DefaultSeo } from 'next-seo';
import { ReactElement, useEffect, useState } from 'react';
import { useSession } from 'next-auth/client';
import dynamic from 'next/dynamic';
import SEO from '@/default-seo.json';
import { useGetPostsQuery, Order_By, PostFragment } from '@/generated/graphql';
import { wrapper } from '@/store/Store';

const RedirectToLogin = dynamic(import('@/components/RedirectToLogin'));

export const getStaticProps = wrapper.getStaticProps(
  (store) => async (context) => {
    return {
      props: {},
    };
  }
);
const Article = (): ReactElement => {
  const [session, _loading] = useSession();
  const [posts, setPosts] = useState<PostFragment[]>();
  const { data, loading, error } = useGetPostsQuery({
    variables: {
      order_by: {
        order: Order_By.Asc,
      },
      where: { publish: { _eq: true } },
    },
  });
  console.log('Session');
  console.log(session);

  useEffect(() => {
    if (data) {
      setPosts(data?.blog);
    }
  }, [data]);

  if (typeof window !== 'undefined' && loading) return <></>;
  if (!_loading && !session) {
    return (
      <>
        <RedirectToLogin />
      </>
    );
  }

  return (
    <>
      {/* <AdminNavBar /> */}
      <Head>
        <title>Crypto Catalyst</title>
        <link href="/favicon.ico" rel="icon" />
      </Head>
      <DefaultSeo {...SEO} />
      <div className="overflow-x-hidden">
        {posts &&
          posts.map((v) => {
            return <p>{v.id}</p>;
          })}
      </div>
    </>
  );
};

export default Article;

redux was disabled and the issue persisted.

Contributing 🙌🏽

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

[HT-Moh]

Solved by fetching the session using GetServerSideProps and passing the session to the component.

export const getServerSideProps: GetServerSideProps<SessionProp> = async (
  ctx,
) => {
  const session = await getSession(ctx as any)
  return { props: { session } } as { props: SessionProp }
}

But what I don't understand why I can not use useSession at the client side?
When I print to the console the session given back by the hook it is correct, and it contains data, but the session passed to the apollo client on the _app.tsx seems to be always undefined when I print it to the console.

const WrappedApp: FC<AppProps> = ({ Component, pageProps }: AppProps) => {
  const { session } = pageProps;
  console.log("call useApollo")
  console.log(session)
  const apolloClient = useApollo(pageProps.initialApolloState, session?.token);

[balazsorban44]

session is only available in _app if you start your application from a page using getServerSideProps that returns the session prop. we cannot magically make it synchronously appear. it's React, nothing special to next-auth