Next.js 13 (with app dir) useSession must be wrapped in SessionProvider

[uixmat]

Hey Tom, struggling to get your package working as intended. I'm using the new app directory in Next.js 13, Storybook is playing nice until i try useSession on my storybook component and i'm thrown the following error:

[next-auth]: `useSession` must be wrapped in a <SessionProvider />

have you encountered the same issue or could advise how to fix ?

[emiliosheinz]

Hei, I'm not using the app directory and it is happening to me also 😕

You can check the version of the libraries that I'm using here

When I run yarn storybook and access any component that uses the useSession hook, the following error happens:

Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider />
    at useSession (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:59653:11)
    at Header (http://localhost:6006/main.1654ec985e2dc7ed9025.hot-update.js:30:80)
    at renderWithHooks (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:87702:18)
    at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:91466:13)
    at beginWork (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:92979:16)
    at beginWork$1 (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:98818:14)
    at performUnitOfWork (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:97949:12)
    at workLoopSync (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:97858:5)
    at renderRootSync (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:97826:7)
    at recoverFromConcurrentError (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-40f6b8.iframe.bundle.js:97242:20)

🚨 If you prefer you can just clone and checkout the docs/storybook-config branch and run it yourself!

Please, let me know if you have any questions, it would be really nice to have some help with this!

[emiliosheinz]

Hei @mattsince87 I've created a fork fixing this problem since we got no response from the maintainer. Please, check it out here and let e know if it works for you!

[TomFreudenberg]

Hi @emiliosheinz

thanks for working out and giving support.

I was on a project-trip and back for the first day.

Check that out - will you send a PR?

[TomFreudenberg]

@emiliosheinz - wondering why you have decoupled the codes into a new separate storybook package ?!

[emiliosheinz]

@TomFreudenberg Hei, since it was my first time working with addons I've created an addon based on Addon Kit from StoryBook and your current code. So it is not only a fork. Actually, I was trying to have a better understanding of everything.

Are you open to improving the structure of this repo, and trying to follow some of the best practices used in Addon Kit? I would be happy to help you with this and open a fix.

[TomFreudenberg]

Sure - I am always against doing things against each other and duplicate work.

Have you seen, that the repo is not only containing a storybook addon but also component for jest. So my interest was to setup a general next-auth mockup library. This concept should still be retained.

Looking forward to your fix and ideas.

[emiliosheinz]

Yes, I got it!

I'll open a pull request with the fix and in the future, we can discuss things like using TypeScript for example.

[TomFreudenberg]

Typescript is welcome ;-)

[emiliosheinz]

@TomFreudenberg Just to see if my guess makes sense... After some debugging it seems that the actual problem is that next-auth is listed in the dependencies and not in the peerDependencies. And when the project and library next-auth version are not the same this bug happens.

[TomFreudenberg]

That makes absolute sense! I would say it's the gotcha!

[TomFreudenberg]

So will you send a short fix PR?

Afterwards we can follow up with some improvements.

[emiliosheinz]

I just opened a pull request #6. Please, take a look!

[TomFreudenberg]

@mattsince87

We have updated the package to version 0.5.6 as @emiliosheinz figured out that dependencies were causing the error.

Please leave some feedback if the issue could be closed by now.

Thanks in advance Tom

[emiliosheinz]

I've tested the new version on my project and it works!

https://user-images.githubusercontent.com/103655828/209708237-91d983e8-4737-4265-9eca-d68f5b5ae457.mov

It would be nice to have feedback from @mattsince87 before closing.

[TomFreudenberg]

This also should address the comment from @mattsince87 at https://github.com/nextauthjs/next-auth/pull/5438#issuecomment-1344314879

[sneko]

It's working on my side too, I think this can be closed :)

[uixmat]

Will test locally tomorrow and confirm! 🤞🏼

[TomFreudenberg]

Thanks for feedback to @sneko and @mattsince87

[sneko]

@TomFreudenberg just to note that when I install next-auth in my Storybook project it breaks everything and the error is back (useSession must be wrapped in SessionProvider). It installed v4.18.0 since I set it as a peerDependencies...

Just to make just I looked at your repo and forced v4.12.3 but that's the same issue.

Since I was just trying to use a next-auth type, I was fine I just set string directly... but... it means it's not obvious to make it working :/ ... and it's very likely soon I will have to finally add this dependency. I hope the problem will be solved :)

Thank you,

[TomFreudenberg]

@sneko Hi Thomas

Not sure if I understand you right:

Since I was just trying to use a next-auth type, I was fine I just set string directly... but... it means it's not obvious to make it working :/ ... and it's very likely soon I will have to finally add this dependency.

What do mean with: I was fine I just set string directly ?

Do you have an example repository where we may check?

[sneko]

I don't have a repro repository but, that was for internal purpose. I just wanted in my Storybook project to "redefine" the Session type in Typescript, this one is based on DefaultSession from next-auth.

To grap some types from there, I just installed their library. From there your library stopped working.

[TomFreudenberg]

To grap some types from there, I just installed their library. From there your library stopped working.

Ah, what was the name of their library?

[sneko]

I meant next-auth.

[emiliosheinz]

🤔 I don't know if I got it. I tested it with several different versions compatible with the version set in the peerDependencies and all of them worked fine for me. It would be really helpful to have a reproduction repository. @sneko Wouldn't you be able to create one from scratch?

[TomFreudenberg]

@sneko, in addition to @emiliosheinz it would be great if you could provide us with some code example

[lucasdale99]

Is there any chance this package will work on next-auth v5? I'd rather not try to allow legacy peer dependencies, and I have a feeling this package will break storybook if I try to use it on v5 of next-auth.

[TomFreudenberg]

Hey Lucas

I am also on a new project with nextjs 14, app dir and waiting for authjs. So yes, I will provide some update in the near future for latest storybook.

[MarkLyck]

This error seems to be back when using next-auth v5