nextauthjs/react-query

React Query wrapper for NextAuth.js session management

Not maintained anymore, see: #7 (comment)

        

NextAuth.js React-Query Client

@next-auth/react-query

React Query wrapper for NextAuth.js session management.

Overview

This is an alternative client for next-auth based upon react-query. It can replace the built-in session management on the client-side by taking advantage of react-query's built-in caching, auto refetching, etc.

Getting Started

npm install --save @next-auth/react-query

You can then import useSession from this package, instead of the core next-auth package. More usage details can be found below.

API Reference

useSession

useSession(params: UseSessionParams) : UseSessionResult

React Query wrapper to retrieve Session. Replaces useSession and Provider from next-auth/client in codebases where you already use react-query.

UseSessionParams

import { useSession } from "@next-auth/react-query"
...
const [session, loading] = useSession({
  required: true,
  redirectTo: "/auth/sign-in?error=InvalidSession",
  queryConfig: {
    staleTime: 60 * 1000 * 60 * 3, // 3 hours
    refetchInterval: 60 * 1000 * 5 // 5 minutes 
  }
})
...

Parameter	Type	Description	Default
required	boolean	If true, will redirect when no session available	false
redirectTo	string	When required: true, this is where the user will be redirected	"/api/auth/session"
queryConfig	UseQueryOptions	See React Query's useQuery Options	{}

TIP: staleTime and refetchInterval respectively match clientMaxAge and keepAlive from the Original API.

UseSessionResult

import { useSession } from "@next-auth/react-query"
...
const [session, loading] = useSession()
...

The shape of what useSession returns matches the Original API.

Acknowledgements

Based on this discussion between @kripod and @balazsorban44

Contributing

We're open to all community contributions! If you'd like to contribute in any way, please first read our Contributing Guide.

License

ISC

react-query's Issues

npm install fails with next 11.1

Not sure how I broke it...

$ npm install --save @next-auth/react-query

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"^11.0.0" from the root project
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^10.0.3" from @next-auth/[email protected]
npm ERR! node_modules/@next-auth/react-query
npm ERR!   @next-auth/react-query@"*" from the root project
...

next 11.1
next-auth 3.29.0
react-query 3.21.1
typescript 4.2.4

Potential Bug: SyntaxError: Cannot use import statement outside a module

Hi,

When I tried to use @next-auth/react-query, it showed following errors. Do you know what should I do for it? It seems that the index.js is using import syntax which is not allowed.

import { useQuery } from "react-query"
^^^^^^
SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at Module._compile (internal/modules/cjs/loader.js:891:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.@next-auth/react-query (/home/kos/git/opensource/onr-react-ui/examples/next-starter/.next/server/pages/_app.js:2703:18)
    at __webpack_require__ (/home/kos/git/opensource/onr-react-ui/examples/next-starter/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///./src/app/components/PageContainer.tsx:7:80)

Error: Package path . is not exported from package

Please see the image or text below for further details:

./src/hooks/mutations/useUpdateUser.ts:1:0
Module not found: Package path . is not exported from package /Users/kripod/Development/folio/node_modules/@next-auth/react-query (see exports field in /Users/kripod/Development/folio/node_modules/@next-auth/react-query/package.json)
> 1 | import { useSession } from "@next-auth/react-query";
  2 | import type { Session } from "next-auth";
  3 | import { useMutation, useQueryClient } from "react-query";
  4 | 

Cannot use import statement outside a module

Unfortunately, this module only supports ESM exports, which the ecosystem isn’t yet ready for:

Support for Next.js 12 and NextAuth v4

I'm currently trying to use this library using the following versions of Nextjs and NextAuth, but having the below error:

dependencies:

next: 12.0.3
next-auth: 4.0.0-beta.6
node: v14.18.1
typescript: 4.4.4

error:

> Build error occurred
Error: Dynamic require of "react" is not supported
    at xe (file:///myproject/node_modules/@next-auth/react-query/dist/index.mjs:1:294)
    at file:///myproject/node_modules/@next-auth/react-query/dist/index.mjs:1:39268
    at file:///myproject/node_modules/@next-auth/react-query/dist/index.mjs:1:373
    at file:///myproject/node_modules/@next-auth/react-query/dist/index.mjs:4:497
    at file:///myproject/node_modules/@next-auth/react-query/dist/index.mjs:1:373
    at file:///myproject/node_modules/@next-auth/react-query/dist/index.mjs:4:14209
    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
    at async Loader.import (internal/modules/esm/loader.js:178:24) {
  type: 'Error'
}

possible add nextauthjs / react-query in existing react-query ? - No QueryClient set, use QueryClientProvider to set one

I am sory maybe sounds like the questions. I've existing next auth, and react-query setup. then i adding /nextauthjs/react-query lib with

import { useSession } from "@next-auth/react-query"

const [session, loading] = useSession({
  required: true,
  redirectTo: "/auth/sign-in?error=InvalidSession",
  queryConfig: {
    staleTime: 60 * 60 * 3, // 3 hours
    refetchInterval: 60 * 5 // 5 minutes 
  }
})

and i got some error
No QueryClient set, use QueryClientProvider to set one

any or something wrong or need additional setup on my code?