useAuth0() hook with React + Redux App

[ncarroll]

Hi,

I am using the Auth0 React SDK for my React + Redux app and having trouble figuring out how to use the getAccessTokenSilently() call to send the token with an external api call within the context of redux actions. Has anyone had success setting up a viable pattern here?

Note, with the below pattern, grabbing the token on button click is easy. My issue is with async calls such as when a component is mounted. Thanks in advance!

For reference, here is the basic setup of my app. It seems like the token could be grabbed from the SDK in either the global config (api.js) or where the action is defined (ie ProductActions) but neither of these are functional react components.

// api.js
import axios from 'axios';
import { normalize } from 'normalizr';
import * as schema from './schema';
import { getApiDomain, getApiProtocol } from './shared/Shared';

// Configure Axios
let domain = getApiDomain();
let protocol = getApiProtocol();

axios.defaults.baseURL = `${protocol}://${domain}/api/v1`;
...

// Create axios instance
export const ApiService = axios.create();

// API Calls
export const getProducts = ( token ) =>
  ApiService.get(`/products`, {
    headers: { Authorization: `Bearer ${token}` }
  }).then(normalizeProducts);

// ProductActions.js
import * as api from '../Api';

const ACTIONS = { ... };

export const getProducts = (token) => (dispatch, getState) => {
  // Let the state know the submit is in progress
  dispatch({ type: ACTIONS.GET_PRODUCTS_SUBMITTING });

  // Call the api, returns a promise
  return api.getProducts(token)
  .then((response) => {

    dispatch({ type: ACTIONS.GET_PRODUCTS_SUCCESS, response });
    return response;

  })
  .catch((error) => {
    var message = error.response ? error.response.data.error : error.message;
    dispatch({ type: ACTIONS.GET_PRODUCTS_FAILURE, message })
  });
};
export default ACTIONS;

[ncarroll]

After digging into react hooks a little deeper, I refactored the old Container + Presentational Component pattern into a single functional component to take advantage of redux hooks, as well as the useAuth0() hook.

Not sure if the following is bad practice, but was able to make everything work by replacing:

mapStateToProps with useSelector(),
mapDispatchToProps with useDispatch(),
ComponentDidMount with useEffect().

import React, { useEffect } from 'react'
import { useSelector, useDispatch } from "react-redux";
import { getProductsById } from '../reducer';
import { fetchProducts } from '../actions/ProductActions';
import { useAuth0 } from "@auth0/auth0-react";

export default const ProductsTable = () => {
  const { getAccessTokenSilently } = useAuth0();
  const dispatch = useDispatch();
  const products = useSelector(getProductsById);

  useEffect(() => {
    getAccessTokenSilently().then(token => dispatch(fetchProducts(token)))
  }, [])

  return (
      <Table>
      ...
      </Table>
  );
}