{"id":17837085,"url":"https://github.com/tomfreudenberg/next-auth-mock","last_synced_at":"2025-03-19T21:30:33.233Z","repository":{"id":60785177,"uuid":"545538564","full_name":"TomFreudenberg/next-auth-mock","owner":"TomFreudenberg","description":"NextAuth.js mockup provider for jest, storybook and others.","archived":false,"fork":false,"pushed_at":"2022-12-29T12:34:23.000Z","size":45,"stargazers_count":28,"open_issues_count":8,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T21:06:46.751Z","etag":null,"topics":["jest","nextauthjs","nextjs","storybook"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TomFreudenberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-04T14:46:21.000Z","updated_at":"2024-06-28T15:01:49.000Z","dependencies_parsed_at":"2023-01-31T08:45:14.932Z","dependency_job_id":null,"html_url":"https://github.com/TomFreudenberg/next-auth-mock","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomFreudenberg%2Fnext-auth-mock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomFreudenberg%2Fnext-auth-mock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomFreudenberg%2Fnext-auth-mock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomFreudenberg%2Fnext-auth-mock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TomFreudenberg","download_url":"https://codeload.github.com/TomFreudenberg/next-auth-mock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244022639,"owners_count":20385134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jest","nextauthjs","nextjs","storybook"],"created_at":"2024-10-27T20:45:21.154Z","updated_at":"2025-03-19T21:30:32.889Z","avatar_url":"https://github.com/TomFreudenberg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch3 align=\"center\"\u003eNextAuth.js Mockup\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eSome helpful tool library to write tests and stories for your \u003ca href=\"https://next-auth.js.org/\"\u003eNextAuth.js\u003c/a\u003e powered \u003ca href=\"https://nextjs.org/\"\u003eNEXT.js\u003c/a\u003e application.\u003c/strong\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n-- use it with nodejs and jest, storybook, cypress, others --\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\n## next-auth-mock\n\n\u003cbr\u003e\n\n\n### Installation\n\nInstall this library by adding it to your devDependencies:\n\n```bash\npnpm add --save-dev @tomfreudenberg/next-auth-mock\n```\n\n\u003cbr\u003e\n\n\n## Storybook\n\n\u003cbr\u003e\n\n\n### Add to your storybook preview\n\nUpdate `.storybook/main.js` and append to your list of addons:\n\n```js\nmodule.exports = {\n  addons: ['@tomfreudenberg/next-auth-mock/storybook']\n}\n```\n\n\u003cbr\u003e\n\n\n### Use toolbar menu\n\nAfter restarting your storybook, an additional icon will appear in the toolbar:\n\n\u003cimg width=\"191\" alt=\"image\" src=\"https://user-images.githubusercontent.com/410087/193901653-12114ea3-9a4c-4d93-ac93-46576a2409e6.png\"\u003e\n\nThat allows you to select the session state.\n\n\u003cbr\u003e\n\n\n### Write stories and include your components\n\n```jsx\n// ./stories/pages/denied.stories.jsx\n\nimport DeniedPage from '@/pages/auth/denied';\n\nexport default {\n  title: 'Pages/Auth',\n  component: DeniedPage\n};\n\nexport const DeniedPageStory = (args) =\u003e \u003cDeniedPage /\u003e;\n\nDeniedPageStory.parameters = {};\n```\n\n\u003cbr\u003e\n\n\nYou may now control and test your component state of `useSession()` by the toolbar items:\n\n![next-auth-mock-storybook-preview](https://user-images.githubusercontent.com/410087/193903296-0c0ba17d-0c81-4034-afb2-36f5214ad5bc.gif)\n\n\u003cbr\u003e\n\n\n### Use a fix state to test a component\n\nTo make sure that your component may be tested with a fixed auth state regardless the toolbar selection, you may overwrite the session properties by using parameters in your stories:\n\n```jsx\n// /stories/pages/signin.stories.jsx\n\nimport SigninPage from '@/pages/auth/signin';\n\nexport default {\n  title: 'Pages/Auth',\n  component: SigninPage\n};\n\nexport const SigninPageStory = (props) =\u003e \u003cSigninPage /\u003e;\n\nSigninPageStory.parameters = {\n  nextAuthMock: {\n    session: 'unknown'\n  }\n};\n```\n\nThe above will load the session set defined by id `unknown`. You may also define a full session object like:\n\n```js\nSigninPageStory.parameters = {\n  nextAuthMock: {\n    session: {\n      data: {\n        id: 999,\n        login: 'user',\n        role: 'user',\n        roles: ['user'],\n        username: 'User',\n        email: 'user@local'\n      },\n      status: 'unauthenticated'\n    }\n  }\n};\n```\n\n\u003cbr\u003e\n\n\n### Access current session data in stories\n\nIf you need to change your stories code while using session values, you may access those by the `useSession` hook.\n\n```jsx\nimport { useSession } from 'next-auth/react';\n\nexport const MyStory = (props) =\u003e {\n  // get access to current session data\n  const session = useSession();\n\n  ...\n```\n\n\u003cbr\u003e\n\n\n### Customize session auth states\n\nThis component brings a default set of auth states: `unknown`, `loading`, `admin`, `adminAuthed`, `user`, `userAuthed`.\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow default preview mockAuthStates\u003c/summary\u003e\n\n```js\n/**\n *\n * default items for toolbar menu to select different auth-states while mocking\n *\n */\nexport const mockAuthStates = {\n  unknown: {\n    title: 'session unknown',\n    session: null\n  },\n  loading: {\n    title: 'session loading',\n    session: {\n      data: null,\n      status: 'loading'\n    }\n  },\n  admin: {\n    title: 'admin not authenticated',\n    session: {\n      data: {\n        id: 1,\n        login: 'admin',\n        role: 'admin',\n        roles: ['admin', 'user'],\n        username: 'Administrator',\n        email: 'admin@local'\n      },\n      status: 'unauthenticated'\n    }\n  },\n  adminAuthed: {\n    title: 'admin authenticated',\n    session: {\n      data: {\n        id: 1,\n        login: 'admin',\n        role: 'admin',\n        roles: ['admin', 'user'],\n        username: 'Administrator',\n        email: 'admin@local'\n      },\n      status: 'authenticated'\n    }\n  },\n  user: {\n    title: 'user not authenticated',\n    session: {\n      data: {\n        id: 999,\n        login: 'user',\n        role: 'user',\n        roles: ['user'],\n        username: 'User',\n        email: 'user@local'\n      },\n      status: 'unauthenticated'\n    }\n  },\n  userAuthed: {\n    title: 'user authenticated',\n    session: {\n      data: {\n        id: 999,\n        login: 'user',\n        role: 'user',\n        roles: ['user'],\n        username: 'User',\n        email: 'user@local'\n      },\n      status: 'authenticated'\n    }\n  }\n};\n```\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\nThis set may be changed completely or in partials for your own needs. Therefore you may create a file in your local folder named `.storybook/previewMockAuthStates.js` and define an alias for webpack.\n\nUpdate `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['@tomfreudenberg/next-auth-mock/storybook'],\n  webpackFinal: async (config) =\u003e {\n    config.resolve.alias['@tomfreudenberg/next-auth-mock/storybook/preview-mock-auth-states'] = path.resolve(__dirname, 'previewMockAuthStates.js');\n  }\n};\n```\n\nWebpack will now load your file `.storybook/previewMockAuthStates.js` for the previewMockAuthStates set:\n\n\u003cbr\u003e\n\n##### just clone the default states:\n\n```js\nconst defaultMockAuthStates = require('@tomfreudenberg/next-auth-mock').mockAuthStates;\n\nmodule.exports = defaultMockAuthStates;\n```\n\n\u003cbr\u003e\n\n##### change partial states:\n\n```js\nconst defaultMockAuthStates = require('@tomfreudenberg/next-auth-mock').mockAuthStates;\n\nmodule.exports = {\n  ...defaultMockAuthStates,\n  admin: {\n    title: 'My Admin unauthenticated',\n    session: {\n      data: {\n        id: 777,\n        field: 'Additional session field'\n      }\n    }\n  }\n}\n```\n\n\u003cbr\u003e\n\n##### just your own states:\n\n```js\nmodule.exports = {\n  state0: {\n    title: 'State zero',\n    session: null\n  },\n  state1: {\n    title: 'A State',\n    session: {\n      data: {\n        id: 1,\n        user: 'What you like'\n      }\n    }\n  }\n}\n```\n\n\u003cbr\u003e\n\n\n### Customize toolbar icon and items\n\nThe toolbar entry can also be changed completely. For that you need to implement manually the decorator in `preview.js` and just set the options to `mockAuthPreviewToolbarItem()` as you like. Attention: Do not add the component to the addons in this case.\n\nUpdate `.storybook/preview.js`:\n\n```js\nimport { mockAuthPreviewToolbarItem, withMockAuth } from '@tomfreudenberg/next-auth-mock/storybook';\nimport { previewMockAuthStates } from '@tomfreudenberg/next-auth-mock/storybook/preview-mock-auth-states';\n\nexport const globalTypes = {\n  ...mockAuthPreviewToolbarItem({\n    description: 'Auswahl Anmeldestatus',\n    defaultValue = null,\n    icon = 'user',\n    items = previewMockAuthStates\n  })\n};\n\nexport const decorators = [withMockAuth];\n```\n\n\u003cbr\u003e\n\n\n## Jest\n\n### Write tests and include your components\n\n```jsx\n// ./tests/pages/signout.stories.jsx\n\nimport { render, screen } from '@testing-library/react'\nimport { withMockAuth } from '@tomfreudenberg/next-auth-mock/jest';\nimport SignoutPage from '@/pages/auth/signout';\n\ndescribe('Pages', () =\u003e {\n  describe('Signout', () =\u003e {\n    it('should render want to sign out', () =\u003e {\n      render(withMockAuth(\u003cSignoutPage /\u003e, 'userAuthed'));\n      expect(screen.getByText('Do you want to sign out?'));\n    });\n    it('should render not signed in', () =\u003e {\n      render(withMockAuth(\u003cSignoutPage /\u003e, 'unknown'));\n      expect(screen.getByText('You are not signed in!'));\n    });\n  });\n});\n```\n\nYou may enter the name of an `mockAuthStates` entry as argument for `withMockAuth` or put in a session object.\n\n```jsx\nimport { mockAuthStates } from '@tomfreudenberg/next-auth-mock';\nrender(withMockAuth(\u003cSignoutPage /\u003e, mockAuthStates.userAuthed.session));\n\n// is equal to\n\nrender(withMockAuth(\u003cSignoutPage /\u003e, 'userAuthed'));\n```\n\nValid states are: `unknown`, `loading`, `admin`, `adminAuthed`, `user`, `userAuthed`\n\n\u003cbr\u003e\n\n\n## Contributing\n\nIf you like to contribute to next-auth-mock package or need to use it from source, you have to install the devDependencies and build the dist package.\n\nJust go for:\n\n```bash\ngit clone git@github.com:TomFreudenberg/next-auth-mock.git\n\ncd next-auth-mock\n\npnpm install\n\npnpm build\n```\n\nYour ideas and PRs are welcome.\n\n\u003cbr\u003e\n\n\n## npm Package\n\nYou may find, use and download the npm package on [npmjs.com](https://npmjs.com/package/@tomfreudenberg/next-auth-mock).\n\n[![npm Version](https://img.shields.io/npm/v/@tomfreudenberg/next-auth-mock?style=for-the-badge)](https://npmjs.com/package/@tomfreudenberg/next-auth-mock) \u0026nbsp;\n\n\u003cbr\u003e\n\n\n## Documentation\n\n**[Project homepage](https://github.com/TomFreudenberg/next-auth-mock)** - you will find a README at [Github](https://github.com/TomFreudenberg/next-auth-mock)\n\n\u003cbr\u003e\n\n\n## Author \u0026 Credits\n\nAuthor: [Tom Freudenberg](https://about.me/tom.freudenberg)\n\nCopyright (c) 2022 [Tom Freudenberg](https://github.com/TomFreudenberg/), released under the MIT license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomfreudenberg%2Fnext-auth-mock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomfreudenberg%2Fnext-auth-mock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomfreudenberg%2Fnext-auth-mock/lists"}