Instructions for getInitialProps in a custom _app.js where all the pages need auth context

[MartinXPN]

I'm working on an app that needs to have the user authentication context on all the pages of the app.

As far as I understand, there is a way to do that with getInitialProps in _app.js. I was wondering if there are any directions/documentation on how to implement it.

Any help/advice would really help! Thanks!

[kmjennison]

The approach I'd recommend is to use a higher-order component across all pages. This requires a bit of code duplication but avoids disabling static optimization everywhere when using getInitialProps.

Check out these threads and see if they help:

• Feature Request: Offer Auth Provider #64 (comment)
• Global setup #525 (comment)

[MartinXPN]

@kmjennison I implemented the approach with having an AuthProvider "layout" which is rendered in the _app.tsx as suggested in #525

The issue with that is when the page is refreshed or first opened, the app flickers by first showing the layout with no authenticated user and then switches to the actual page.

My _app.tsx looks like this (simplified):

            <AuthProvider>
                <CssBaseline />
                <NextNProgress color="#4B5FAA" height={2} />
                {getLayout(<Component {...pageProps} />)}
            </AuthProvider>

My FAQ page looks like this (again simplified):

const FAQ = () => {
    return <>...</>
}

// @ts-ignore
export default withAuthUser()(FAQ);

My AuthProvider.tsx looks like this:

import {ReactNode} from "react";
import {useAuthUser, withAuthUser} from "next-firebase-auth";
import {AuthContext} from "./AuthContext";

function AuthProvider({children}: {children: ReactNode}) {
    const user = useAuthUser();

    return <>
        <AuthContext.Provider value={{
            isSignedIn: !!user.id,
            currentUser: user,
            currentUserId: user?.id ?? undefined,
        }}>
            {children}
        </AuthContext.Provider>
    </>
}

// @ts-ignore
export default withAuthUser()(AuthProvider);

Am I missing something? Is there a way to prevent the flickering on initial page load?

I think we should be able to avoid this if we use getInitialProps in _app.tsx and provide the authentication context there. But I'm not sure if it's possible to do it with this library (or by extending some parts).

[MartinXPN]

Hi @kmjennison , I was wondering if you could suggest any way of doing this through getInitialProps in _app.tsx (I would be totally okay with turning off the static optimization for all the pages as all of them are rendered server-side either way) or maybe another way that doesn't cause the problem I described in the comment above. Or perhaps you could point me to something I'm doing wrong and maybe I'm missing something.
Any help would be greatly appreciated!
Thanks!

[kmjennison]

@MartinXPN Your AuthProvider is relying on pageProps, which means pageProps would need to contain the authed user's information during server-side rendering. For this to happen, the page should use getServerSideProps wrapped in withAuthUserTokenSSR.

You could create a workaround to add the authed user's information in _app.js getInitialProps. However, as discussed in #64, this isn't officially supported right now, so we don't have any examples of it.

[MartinXPN]

Thanks a lot for the response @kmjennison ! I was wondering if you could provide some directions on how to do that. Some general guidance would be really great!
I'm currently getting the following error: error - Error: Either "req" or "authCookieValue" must be provided. when I try to use getInitialProps in the _app.tsx and pass the AuthUser in props.

[kmjennison]

@MartinXPN Unlike getServerSideProps, getInitialProps might also run on the client side. I'm guessing that's happening for you and withAuthUserTokenSSR is looking for a request object that's not defined. Make sure you're only calling withAuthUserTokenSSR on the server side.