Authentication

The @react-query-firebase/auth package provides hooks subscribing to a users state.

Installation

npm i --save @react-query-firebase/auth

Usage

The package provides hooks for subscribing to a users state.

To use the hooks, export your Auth instance, e.g:

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/functions';

const firebase = initializeApp({
  ...
});

export const auth = getAuth(firebase);

`useAuthUser`

The useAuthUser hook can be used to query a users authentication state using the useQuery hook.

import React from "react";
import { useAuthUser } from "@react-query-firebase/auth";
import { auth } from "../firebase";

function Profile() {
  const query = useAuthUser("user", auth);

  if (query.isLoading) {
    return <div>Loading...</div>;
  }

  const user = query.data;

  if (!user) {
    return <div>Please sign-in!</div>;
  }

  return <div>Welcome {user.displayName}</div>;
}

`useAuthIdToken`

The useAuthIdToken hooks can be used to query the users ID Token using the useQuery hook. The query returns an IdTokenResult if the user is authenticated.

import React from "react";
import { useAuthIdToken } from "@react-query-firebase/auth";
import { auth } from "../firebase";

function Profile() {
  const query = useAuthIdToken(["user", "token"], auth);

  if (query.isLoading) {
    return <div>Loading...</div>;
  }

  if (!query.data) {
    return <div>User not authenticated</div>;
  }

  return <div>ID Token: {query.data.token}</div>;
}

Force Refresh

To force a refresh regardless of token expiration, provide the forceRefresh option:

useAuthIdToken(["user", "token"], auth, {
  forceRefresh: true,
});

`UseQueryOptions`

Since the hooks wrap onto the useQuery hook, we can also pass options. For example, to be notified on success:

const query = useAuthUser("user", auth, {
  onSuccess(user: User | null) {
    if (user) {
      console.log(user.displayName);
    } else {
      console.log('No user signed in.');
    }
  }
});

When using the useAuthIdToken hook, using the hook options also allows us to return just the users ID Token rather than the whole result if required:

import React from "react";
import { useAuthIdToken } from "@react-query-firebase/auth";
import { auth } from "../firebase";

function Profile() {
  const query = useAuthIdToken<string | null>(["user", "token"], auth, {
    forceRefresh: true,
  }, {
    // Return the token if the result is returned.
    select(result: IdTokenResult | null): string | null {
      return result?.token;
    }
  });

  if (query.isLoading) {
    return <div>Loading...</div>;
  }

  if (!query.data) {
    return <div>User not authenticated</div>;
  }

  return <div>ID Token: {query.data}</div>;
}

Examples