Using session in react context

[Gabsys]

Question 💬

Has anyone successfully used session in React Context? It seems to always return undefined.

How to reproduce ☕️

context/userRankContext.js :

import { useState, createContext, useContext, useEffect } from 'react';
import { useSession } from 'next-auth/client';


export const UserRankContext = createContext();

export async function useUserRankState() {
    const [session, loading] = useSession();
    const [userRank, setUserRank] = useState(99);


    useEffect(() => {
       console.log(session)
    }, [session])

    return {
        userRank
    }

}

export function useUserRank() {
    const userRank = useContext(UserRankContext);
    return userRank;
}

_app.js:

import { UserRankContext, useUserRankState } from '../context/userRankContext';
import { Provider } from 'next-auth/client'

function MyApp({ Component, pageProps }) {
  const userRank = useUserRankState();
return(
 <Provider session={pageProps.session}>
        <UserRankContext.Provider value={userRank}>
            <Component {...pageProps} />
        </UserRankContext.Provider>
    </Provider>)
}


export default MyApp

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[devrsi0n]

@Gabsys useSession can only be used in the child component of next-auth/client/Provider to make it work, and you can't use the value of useUserRankState as your Context provider's value.

[Gabsys]

@Gabsys useSession can only be used in the child component of next-auth/client/Provider to make it work, and you can't use the value of useUserRankState as your Context provider's value.

So placing UserRankContext under Provider should be correct?

And for can't use value of useUserRankState as Context provider's value, why not? :O It is working fine

[balazsorban44]

Yeah, session is just a React state as anything else. You could certainly do what you want to, but I just don't see the reason.

#2449

[balazsorban44]

Curious what you are trying to achieve here. We already provide a React Context Provider for session:

https://next-auth.js.org/getting-started/client#provider

In, the next major version it will even be required when using useSession.

Why do you want another React Context?

[Gabsys]

I wanted to use Session in another context where if user is logged in, then do some processing.

In my context, I wanted to read user rank. By default, it is set to 99, but if user is logged in, I will access database to get its rank

[Gabsys]

Anyone has any idea?

[balazsorban44]

Your useUserRankState()is invoked outside of the NextAuth Provider. You should refractor your code so that hook can be invoked within the Provider

[Gabsys]

I figured that out. I have restructured my code to not use context for extracting user rank. However, for learning purpose, I am wondering, why even when I use useUserRankState(pageProps.session) , the session param passed into the function is still returning undefined?

[balazsorban44]

pageProps.session is not some magical value we inject, it has to come from somewhere. Usually using getServerSideProps, by returning session in props. It also only has a value on the first page load if you were authenticated. So unless you persist it with some state, it will become undefined in any client-side transition.