Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

RootLayout - how to provide currentUser to entire app while maintaining RootLayout as a server component #305

Open
jamezening opened this issue Aug 20, 2024 · 4 comments
Open

RootLayout - how to provide currentUser to entire app while maintaining RootLayout as a server component #305

jamezening opened this issue Aug 20, 2024 · 4 comments

Comments

@jamezening
Copy link

Currently in the RootLayout, the currentUser is only provided to the <Header> component.

Is there a way to "provide" the currentUser to the entire app (including <main> and its children), without making the RootLayout into a client component so that user related state is available not just in Header ?

export default async function RootLayout({ children }) {
  const { currentUser } = await getAuthenticatedAppForUser();
  return (
    <html lang="en">

      <body>
            <Header initialUser={currentUser?.toJSON()}/>

        <main>{children}</main>
      </body>

    </html>
  );
}

There are other Firebase + NextJS examples out there that wrap the entire <main> tag in a React Context Provider - still figuring out if it is performant to make the RootLayout into a client component.

Thank you for any insights on this matter.
@pashpashpash
Copy link

@jamezening can you try something like this:

import React from 'react';

export default async function RootLayout({ children }) {
    const { currentUser } = await getAuthenticatedAppForUser();

    return (
        <html lang="en">
            <body className="">
                <Header initialUser={currentUser?.toJSON()} />

                <main>
                    {React.Children.map(children, child =>
                        React.cloneElement(child, { currentUser })
                    )}
                </main>
            </body>
        </html>
    );
}

@adrolc
Copy link

adrolc commented Aug 23, 2024

@jamezening There is a useUser hook in src/lib/getUser.js. You can also create a context and put this state there

@jamezening
Copy link
Author

jamezening commented Aug 25, 2024 •
edited
Loading

@jamezening can you try something like this:

import React from 'react';

export default async function RootLayout({ children }) {
    const { currentUser } = await getAuthenticatedAppForUser();

    return (
        <html lang="en">
            <body className="">
                <Header initialUser={currentUser?.toJSON()} />

                <main>
                    {React.Children.map(children, child =>
                        React.cloneElement(child, { currentUser })
                    )}
                </main>
            </body>
        </html>
    );
}

@pashpashpash thank you for the suggestion. Either GH Co-Pilot or Cursor AI suggested this method for me but I couldn't get it to work.

Did this method end up working for you?

@jamezening
Copy link
Author

@jamezening There is a useUser hook in src/lib/getUser.js. You can also create a context and put this state there

@adrolc I ended up going this way, while moving the onAuthStateChanged logic out of the Header component into a "Side Effect Component" component (not my favorite pattern, but haven't come up with a better way)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jamezening @pashpashpash @adrolc