#Where in the hierarchy should I read the client-side NextAuth session?

59 messages · Page 1 of 1 (latest)

hazy burrow
#

At the moment I am integrating Websockets into my application and have done so naively in the App component for the time being which ends up a bit like this:

const App = ({ Component, pageProps: { session, ...pageProps } }: AppProps) => {
  useEffect(() => {
    // setup ws

    return () => {
      // disonnect
    };
  }, []);

  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
};

As you can imagine I want to use the user ID from the session object to connect to a private channel based on the user ID. Unfortunately session is undefined when the effect is invoked and useSession() only returns the session further down in the hierarchy. Even having a consumer directly as a child of the SessionProvider yields undefined for useSession(). I am now highly curious where I should obtain the ID in the hierarchy to run the hook.

#

@wary spruce I have to bother you here, as you might have an idea on how to deal with this.

wary spruce
#

Hmmm

#

Would it be possible to do something like

<SessionProvider>
<SomeWrapper>
<Component>

#

And in the SomeWrapper component you call useSession?

hazy burrow
#

I'll try that rq, I think at its core the problem is that the SessionProvider does syncing between tabs and other side-effects.

wary spruce
#

But even that feels a bit unnecessary, isn’t the user id available on session when _app is rendered?

hazy burrow
#

For some inexplicable reason the session object that is in the pageProps is always undefined. It may interfere with me doing SSR or wrapping the App itself in a wrapper used for tRPC.

wary spruce
#

Huh, strange, I gotta confirm that later, maybe it’s by design but weird

#

This seems like a good scenario where a custom hook would be useful

#

Which combines useSession and your websocket effect

hazy burrow
#

So neither your wrapper suggestion works nor is the session object in pageProps ever not-undefined.

#

Let me quickly disable tRPC to sort out that it's not interfering.

#

Same behavior, it's not tRPC's fault.

#

I might have figured out something

wary spruce
#

it's undefined for me too

#

just checked

hazy burrow
#

So the initial value of session passed to the SessionProvider is always undefined, but eventually receives a value.

#

the Wrapper works if it listens to changes to the data object of useSession

#

A one-time effect does not work however.

wary spruce
#

hm, so a useEffect with a dependancy array of the result of useSession ?

hazy burrow
#

Yes, that works for me.

#

And since the object is most-likely referentially not stable and it has an ever-changing expires property I guess I have to do some stuff like Boolean(data) as the element of the dependency array.

#

Since that's what I am interested in.

#

I guess I'll raise an issue/discussion for Balazs in the repo to ask why the initial behavior happens to be undefined.

wary spruce
#

im really curious to find out too

#

looks like they fetch the session if it's undefined

#

which makes sense

#

but makes me question how ssr is working

#

for next auth

hazy burrow
#

The thing is though, why is the initial value undefined in all cases?

#

Why even provide it?

#

For testing?

#

Since there is nothing set up to inject the session into the pageProps IIRC

wary spruce
#

😵‍💫

#

maybe it's set during production?

#

but right now i cant get anything but undefined logged when in development mode

hazy burrow
#

Here is a snippet

#

It's unclear which gSSP is refered to there.

wary spruce
#

btw out of curisoity

#

how are you handling authentication with the websocket?

hazy burrow
#

I only tried out a single service, Pusher. No clue how others do it. But you can setup a custom API route that it requests to obtain data.

#

Left is Authentication and right is Authorization to join a particular channel.

#

I just need to add some input validation using zod.

#

I'd rather not think about implementing my own WS server to handle that stuff and just pay to use a service for that lol

#

Just need to try out Ably later once I have sorted out the hook.

wary spruce
#

yep makes sense, i gotta take a look at these services too at some point

#

havent used websockets in a long time, but when I did it was my own implementation

#

for live graphql queries, wasn't pleasant to setup

hazy burrow
#

I was certain I can't have it secure and correct if I do it myself. I'd rather just use something battle-tested at this point.

wary spruce
#

what are you building btw?

#

i saw one of your other posts earlier about buildings in a game?

hazy burrow
#

Do you mind transitioning to DMs or #off-topic since we're deviating from this thread's topic anyways 😄

wary spruce
#

sure thing