Correct way to obtain session in mobx store

[lavcraft]

Hi everyone. I really excited about next-auth, it's really easy to start developing secured apps. But i have a small problem in existed app with Mobx store - how to obtain session object without SSR in store?

What are you trying to do

1. I have a store - MySotre
2. Open page trigger request to /api/auth/session via next-auth code.
3. Next - i want to update store by fetched session, like this:

export class MyStore {
    constructor() {
        makeAutoObservable(this);
        getSession().then(session => {
            this.setIsAuthenticated(!!session);
            if (session?.user?.email) {
                this.setAuthenticatedUserEmail(session?.user?.email);
            }
            if (session?.user?.name) {
                this.setAuthenticatedUserName(session?.user?.name);
            }
        });

But this way is bad, because produce duplicated call to /api/auth/session. First call produced from next-auth, next call from constructor in MyStore.

Where is a right place to observe existed /api/auth/session request for update my Mobx store ?

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[balazsorban44]

Without knowing much about your specific usecase, not sure why you would need to put it there. Not all state is global state. In case you want to optimize, check out the Provider https://next-auth.js.org/getting-started/client#provider

[lavcraft]

Thank you for your advice, but in _app session obtained only if i put it in getServerSideProps. I wan't to reuse session object in custom provider (mobx store)

Working like this

const MyPage = () => {
   const store = useMyStore();
   //store.session.user
}
export default withMyStore(MyPage);

And with store:

const Context = createContext<MyStore | undefined>(undefined);

export function withMyStore(Component) {
  return function (props: any) {
    //props.session is undefiend when no getServerSideProps with extracted session prop
    const store = new MyStore(props);
    return <Context.Provider value={store}>
      <Component {...props}/>
    </Context.Provider>
  }
}

export function useMyStore() {
  return useContext(Context);
}

[balazsorban44]

You can use the useSession hook to access the session anywhere in your app https://next-auth.js.org/getting-started/client#usesession

The nice thing with Provider that if it's empty (no session provided from getServerSideProps) the first call to useSession will populate it so subsequent calls will only periodically reach the backend to update the session, for improved performance.

Recreating this logic with Mobx is just unnecessary complexity in my opinion.

[lavcraft]

Yes, i know about useSession, it's a good option, but i want to concentrate all authentication data and logic in place - mobx store.

I can't use useSession in useMyStore because in this case i must mutate store in component render functin :(
Anyway, getSession in MyStore constructure call /api/auth/session twice :(

I think it can be difficult, but i want to achieve this and may be contribute to next-auth-mobx side project

[creeefs]

@lavcraft Did you ever find a solution? I tried synchronizing the state via useEffect hook (i.e. only set the session in a store when the session changes), but useEffect functions are invoked after renders and it's causing a timing issue where I want to make an authenticated request on mount.