next-i18next isn't working properly with Next Auth + Apollo

Question

I recently joined a new project and I have to implement i18n. Frontend stack : NextJS (with Next Auth) + Apollo + next-i18next I followed next-i18next starter to implement translations. Everything worked fine until I add the addWithTranslation part, as in the code below :

In _app.tsx

    import { appWithTranslation } from 'next-i18next';

    const MyApp = ({ Component, pageProps: { session, ...pageProps } }) => {
    return (
        <>
            <ApolloProvider client={client}>
                    <SessionProvider session={session}>
                        {Component.requireAuth ? (
                            <>
                                <Auth>
                                    <Layout>
                                        <Component {...pageProps} />
                                    </Layout>
                                </Auth>
                            </>
                        ) : (
                            <>
                                <Component {...pageProps} />
                            </>
                        )}
                    </SessionProvider>
            </ApolloProvider>
        </>
    );
};

const Auth = ({ children }) => {
    const router = useRouter();
    const { status } = useSession();

useEffect(() => {
        if (status === 'unauthenticated') {
            router.push('/auth/signIn');
        }
    }, [status, router]);

    if (status === 'authenticated') {
        return children;
    }

    return (
        <div className="lds-ellipsis">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    );
};

export default appWithTranslation(MyApp);

My problem : Whenever the user is trying to get to another page, the entire app seems to remount so it redirects to /auth/signin instead of reaching the right page immediately. When I log session, it seems to reset every time the user is navigating to another page (only when I add the appWithTranslation() part).

Does anyone know how I could fix it?

score 0 · Answer 1 · answered Feb 17 '22 at 13:17

Based on this discussion, you should NOT wrap the SessionProvider in appWithTranslation. So try something like this:

import { appWithTranslation } from 'next-i18next';

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      {Component.requireAuth ? (
        <Auth>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </Auth>
      ) : (
        <Component {...pageProps} />
      )}
    </>
  );
};

const AppWithI18n = appWithTranslation(MyApp);

const AppWithAuth = (props) => {
  const { pageProps } = props;

  return (
    <ApolloProvider client={pageProps.client}>
      <SessionProvider session={pageProps.session}>
        <AppWithI18n {...props} />
      </SessionProvider>
    </ApolloProvider>
  );
};

export default AppWithAuth;

next-i18next isn't working properly with Next Auth + Apollo

1 Answers1