'useSession' must be wrapped in <SessionProvider/>'

[st4l1nR]

Hello i tried to use this dependency to use useSession in my components but it doesn't work i followed instructions in the repo.

Versions "next-auth": "^4.15.1", "next": "12.2.5", "@tomfreudenberg/next-auth-mock": "^0.5.5",

// .storybook/main.js

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  /** Expose public folder to storybook as static */
  staticDirs: ['../public'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-dark-mode',
    'storybook-tailwind-dark-mode',
    '@tomfreudenberg/next-auth-mock/storybook',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
      },
    },
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  core: {
    builder: 'webpack5',
  },
  webpackFinal: (config) => {
    /**
     * Add support for alias-imports
     * @see https://github.com/storybookjs/storybook/issues/11989#issuecomment-715524391
     */
    config.resolve.alias = {
      ...config.resolve?.alias,
      '@': [path.resolve(__dirname, '../src/'), path.resolve(__dirname, '../')],
    };

    config.resolve.roots = [path.resolve(__dirname, '../public'), 'node_modules'];
    config.resolve.plugins = [new TsconfigPathsPlugin()];

    return config;
  },
};

[TomFreudenberg]

Hi @st4l1nR

thanks for testing and using this component. I would like to step in, first of all it looks well what you have done.

Simple question: Have you once cleared the storybook cache in node_modules and restarted the storybook process?

Is this available in a public repo that I may checkout by myself to have a look?

Cheers Tom

[st4l1nR]

Hi, you can check repo in https://github.com/st4l1nR/nc-clone. I tried without and with exporting decorator in preview.js. I tried the manual method you posted in the discussion and it worked but i can't get it done with the package. And yes i cleaned cache

[TomFreudenberg]

Hey @st4l1nR - I wonder now :-)

It worked all out of the box ???

I did:

git clone https://github.com/st4l1nR/nc-clone.git
cd nc-clone
nvm use lts/gallium
pnpm install

add two files in case of missing auth story

src/components/molecules/Approve.jsx

import React from 'react';
import { useSession } from 'next-auth/react';

const ApprovePage = () => {
  const { data: session, status } = useSession();

  // get the status of authentification
  const isAuthenticated = React.useMemo(() => status === 'authenticated' && session, [session, status]);

  // When rendering client side don't display anything until loading is complete
  if (typeof window !== 'undefined' && status === 'loading') {
    return null;
  }

  return (
    <p>
      { isAuthenticated ? 'Authed' : 'Unauthed' }
    </p>
  );
};

export default ApprovePage;

src/components/molecules/Approve.stories.jsx

import ApprovePage from './Approve';

export default {
  title: 'Molecules/Approve',
  component: ApprovePage
};

export const ApprovePageStory = (props) => <ApprovePage />;

and start the storybook

pnpm start-storybook

Shows me:

and

Did I miss something?

[TomFreudenberg]

Hi @st4l1nR , do you have any updates for me on your issue?

Cheers Tom

[TomFreudenberg]

Hi @st4l1nR

I close this issue now while everything worked fine and out of the box from your repository.

Feel free to re-open this issue if something still not ready.

Cheers Tom

[JoeKarow]

@TomFreudenberg We're using a monorepo and I'm getting the [next-auth]: 'useSession' must be wrapped in a <SessionProvider /> error.

I'm not sure if it's because our Storybook is in a separate package from our UI & App?

Next-Auth's main setup is in @weareinreach/app (repo path: /apps/app/) Components are defined in @weareinreach/ui (repo path: /packages/ui/) Storybook lives in @weareinreach/storybook (repo path /packages/storybook/)

Am I missing something here, or am I just traversing repos too much?

Here is the current branch I'm actively working in right now: https://github.com/weareinreach/InReach/tree/IN-687-base-layout/packages/storybook

[next-auth]: `useSession` must be wrapped in a <SessionProvider />
Error: [next-auth]: `useSession` must be wrapped in a <SessionProvider />
    at useSession (http://localhost:6006/vendors-node_modules_pnpm_next-auth_4_16_4_ogpkrxaz2lg6nectum6dl66tn4_node_modules_next-auth_-11cec6.iframe.bundle.js:686:11)
    at UserMenu (http://localhost:6006/ui_components_layout_Nav_tsx.35cdf780dcb6adfd323e.hot-update.js:174:74)
    at renderWithHooks (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-a11y_6_5_13_biqbaboplfbrettd7655fr4n2y_node_modules-78dea1.iframe.bundle.js:130847:18)
    at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-a11y_6_5_13_biqbaboplfbrettd7655fr4n2y_node_modules-78dea1.iframe.bundle.js:134611:13)
    at beginWork (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-a11y_6_5_13_biqbaboplfbrettd7655fr4n2y_node_modules-78dea1.iframe.bundle.js:136124:16)
    at beginWork$1 (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-a11y_6_5_13_biqbaboplfbrettd7655fr4n2y_node_modules-78dea1.iframe.bundle.js:141963:14)
    at performUnitOfWork (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-a11y_6_5_13_biqbaboplfbrettd7655fr4n2y_node_modules-78dea1.iframe.bundle.js:141094:12)
    at workLoopSync (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-a11y_6_5_13_biqbaboplfbrettd7655fr4n2y_node_modules-78dea1.iframe.bundle.js:141003:5)
    at renderRootSync (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-a11y_6_5_13_biqbaboplfbrettd7655fr4n2y_node_modules-78dea1.iframe.bundle.js:140971:7)
    at recoverFromConcurrentError (http://localhost:6006/vendors-node_modules_pnpm_storybook_addon-a11y_6_5_13_biqbaboplfbrettd7655fr4n2y_node_modules-78dea1.iframe.bundle.js:140387:20)

[TomFreudenberg]

Hey @JoeKarow I will check that

[JoeKarow]

@TomFreudenberg I got it working by moving the storybook install in to the @weareinreach/ui package. Must have been a bit too much transpiling. 🤷🏻‍♂️

[TomFreudenberg]

@JoeKarow Thanks for feedback - Good to hear it works for you