Building a thin useSession hook with React Query

[kripod]

import { Session } from "next-auth"
import { QueryConfig, useQuery } from "react-query"
import { useRouter } from "next/router"

async function fetchSession(): Promise<Session | null> {
  const res = await fetch("/api/auth/session")
  const session = res.json()
  if (Object.keys(session).length) {
    return session
  }
  return null
}

/**
 * React Query wrapper to retrieve `Session`.
 * Replaces `useSession` and `Provider` from `next-auth/client` in codebases
 * where you already use `react-query`.
 *
 * [`useSession`](https://next-auth.js.org/getting-started/client#usesession) |
 * [`Provider`](https://next-auth.js.org/getting-started/client#provider) |
 * [React Query](https://react-query.tanstack.com/guides/ssr#using-nextjs)
 */
export default function useSession<R extends boolean = false>({
  required,
  redirectTo = "/api/auth/signin?error=SessionExpired",
  queryConfig,
}: {
  /** If set to `true`, the returned session is guaranteed to not be `null` */
  required?: R
  /** If `required: true`, the user will be redirected to this URL, if they don't have a session */
  redirectTo?: string
  queryConfig?: QueryConfig<Session | null>
} = {}) {
  const router = useRouter()
  const query = useQuery(["session"], fetchSession, {
    onSettled(data) {
      if (data || !required) return
      router.push(redirectTo)
    },
    ...queryConfig,
  })
  return [
    query.data as R extends true ? Session : Session | null,
    query.status === "loading",
  ] as const
}

[balazsorban44]

This will play very nicely with the React Query Next.js integration! https://react-query.tanstack.com/guides/ssr#using-nextjs

[balazsorban44]

This is made available as a standalone package at @next-auth/react-query now! 🎉

Here is the code repo: https://github.com/nextauthjs/react-query#readme

[gavinthomas-valtech]

Have they changed the function return signature of useSession since this was written?
https://next-auth.js.org/getting-started/client
useSession returns an object and an authenticated status (whicjh RQ doesn't). Do we assume RQ status === success to be 'authenticated' ?

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

  if (status === "authenticated") {
  ...

has anyone tweaked this useSession implementation?

[gavinthomas-valtech]

I think this is it

export default function useSession<R extends boolean = false>({
  required,
  redirectTo = '/api/auth/signin?error=SessionExpired',
  queryConfig,
}: {
  /** If set to `true`, the returned session is guaranteed to not be `null` */
  required?: R;
  /** If `required: true`, the user will be redirected to this URL, if they don't have a session */
  redirectTo?: string;
  queryConfig?: QueryConfig<Session | null>;
} = {}) {
  const router = useRouter();
  const query = useQuery(['session'], fetchSession, {
    onSettled(data) {
      if (data || !required) return;
      router.push(redirectTo);
    },
    ...queryConfig,
  });

  return {
    data: query.data as R extends true ? Session : Session | null,
    status:
      query.status === 'loading'
        ? 'loading'
        : query.data
        ? 'authenticated'
        : 'unauthenticated',
    query,
  } as const;
}

This means i can use

 const { status } = useSession();
if (status === 'authenticated' ) ...

[gavinthomas-valtech]

The only thing missing was the await on res.json()

  const session = await res.json();
  if (Object.keys(session).length) {
    return session;
  }