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 * 60 * 3, // 3 hours
    refetchInterval: 60 * 5 // 5 minutes 
  }
})
...

| Parameter | Type | Description | Default | | :-------- | :------- | :-------------------------------- | :-----: | | required| boolean| If true, will redirect when no session available | false | | redrectTo| 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