@next-auth/react-query

src="https://next-auth.js.org/img/logo/logo-sm.png" height="64" />    <img alt="plus sign" src="https://www.svgrepo.com/show/138538/plus-sign.svg" height="48" />    <img alt="React Query logo" src="https://react-query.tanstack.com/_next/static/images/logo-a65f848e05592e7de1dc2150454230fa.svg" height="64" />

NextAuth.js React-Query Client

@next-auth/react-query

React Query wrapper for NextAuth.js session management.

<a href="https://www.npmtrends.com/@next-auth/react-query">
  <img src="https://img.shields.io/npm/dm/@next-auth/react-query" alt="Downloads" />
</a>
<a href="https://github.com/nextauthjs/react-query/stargazers">
  <img src="https://img.shields.io/github/stars/nextauthjs/react-query" alt="Github Stars" />
</a>
<a href="https://www.npmjs.com/package/@next-auth/react-query">
  <img src="https://img.shields.io/npm/v/@next-auth/react-query?label=latest"
    alt="Github Stable Release" />
</a>

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