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

feat: add SessionProvider so i can useSession #1607

Open
L-Steinmacher opened this issue Oct 18, 2023 · 11 comments
Open

feat: add SessionProvider so i can useSession #1607

L-Steinmacher opened this issue Oct 18, 2023 · 11 comments
Labels
📌 area: t3-app Relates to the generated T3 App 🌟 enhancement New feature or request

Comments

@L-Steinmacher
Copy link

Provide environment information

"initVersion": "7.22.0"

Describe the bug

Session provider from Next auth not wrapping children in src/app/layout.tsx and must be added manually. Calling useSession from Next auth not available till this is done.

Reproduction repo

https://stackblitz.com/github/L-Steinmacher/t3-app-dir-next-auth?file=src%2Fapp%2Flayout.tsx

To reproduce

npm create t3-app@latest select options for Next Auth and app dir. Calling hook useSession not available till wrapping children in the provider.

Additional information

Not sure if it's a bug per se but thought I'd report this.
@c-ehrlich
Copy link
Member

this is actually a reasonable point - we (maintainers) tend to pass the session from the server nowadays, but useSession in a client component is still a legit way to do it, and we don't currently include the necessary providers for that. will reopen again for visibility, let's see if this is an issue for more people

@c-ehrlich c-ehrlich reopened this Oct 19, 2023
@L-Steinmacher
Copy link
Author

My specific use case I was using the session to check if the user was logged in and rendering either a login or submit button dynamically as well as displaying some user data. Using the pages router this was fine but now using the app router I can't easily do this the way I did before. I was thinking of making a TRPC endpoint to supply the session and user data to the client component but can't decide if that's jank/hacky. How would you suggest going about using the user session and user info in a client component? Pass as prop or TRPC endpoint? I'm asking from a JR dev point of view.

@c-ehrlich
Copy link
Member

in general the best way to do it now is to use getServerAuthSession in a server component, and pass it as props to a client component. But useSession is also still fine, you can add the provider in a layout, similar to how it's implemented in the pages dir version.

@juliusmarminge juliusmarminge changed the title bug: Session provider no longer wraps children when creating new T3 app with Next Auth and app dir. feat: add SessionProvider so i can useSession Oct 20, 2023
@juliusmarminge juliusmarminge added 🌟 enhancement New feature or request and removed 🐞❔ unconfirmed bug labels Oct 20, 2023
@juliusmarminge
Copy link
Member

I've been building with next-auth and appdir for a while now and never found myself missing useSession, it's easier to await it in a server component and pass it down as props, and not having to worry about the potential loading state when the hook is fetching.

If more report it as missing we might reconsider but this is a conscious decision for now

@juliusmarminge juliusmarminge added the 📌 area: t3-app Relates to the generated T3 App label Oct 20, 2023
@kristianeboe
Copy link

kristianeboe commented Oct 26, 2023 •
edited

If you get the serverSession in the root layout like this

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const serverSession = await getServerAuthSession();

  return (
    <html >
      <head>
       ...
      </head>

      <body>
          <TRPCReactProvider headers={headers()}>
            <Providers serverSession={serverSession}>
              <main>
                {children}
                <Toaster />
                <Analytics />
              </main>
            </Providers>
          </TRPCReactProvider>
      </body>
    </html>
  );
}

You can then pass it into the "use client" Providers, which again passes it to SessionProvider. Now you can access session in client components with useSession without prop drilling and without loading state.

export function Providers(props: { children: React.ReactNode; serverSession: Session | null }) {
  return (
    <SessionProvider session={props.serverSession}>
            {props.children}
    </SessionProvider>
  );
}

What do you guys think?

@shoodey
Copy link

shoodey commented Oct 27, 2023 •
edited

I'm highly interested in this as well, please consider adding the feature :)

My particular use case is updating the session on the client side when a user switches orgs, read from the url pathname

@juliusmarminge
Copy link
Member

With NextAuth v5 (which is in beta and will be out in the next couple of weeks) you'll do this using server actions

@rileybarabash
Copy link

@juliusmarminge You mentioned using server actions. How would you recommend doing so? For now, I'm just passing props from getServerAuthSession in a server component.

Use case is to conditionally render a sign in / sign out button and the content inside of it.

@asrvd
Copy link
Member

asrvd commented Jan 15, 2024 •
edited

https://authjs.dev/guides/upgrade-to-v5?authentication-method=client-component#authenticating-server-side

if you're using app router you won't need useSession for most use cases anymore afaik, see this - https://github.com/nextauthjs/next-auth-v5-example

@ahkhanjani
Copy link
Contributor

Considering how much easier it makes migrating from pages router, I'm also with adding the provider. Although making the migration easy might not be a priority for the maintainers.

@rudyorre
Copy link
Contributor

At first I thought this was an oversight but reading through this thread, I've changed my mind. Specifically this from Julius:

I've been building with next-auth and appdir for a while now and never found myself missing useSession, it's easier to await it in a server component and pass it down as props, and not having to worry about the potential loading state when the hook is fetching.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
📌 area: t3-app Relates to the generated T3 App 🌟 enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@shoodey @c-ehrlich @kristianeboe @rudyorre @juliusmarminge @asrvd @ahkhanjani @L-Steinmacher @rileybarabash