How to access the token within a redux middleware that is outside of the Auth0Provider context

[zachrickards]

With redux I have a middleware that handles the request with errors and getting the token.

Example please?

[majugurci]

I have a small util for this.

index.js

<Auth0Provider
    domain="your-domain"
    clientId="your-client-id"
    redirectUri={window.location.origin}
>
    <App />
</Auth0Provider>

app.js

const App = () => {
    const {  getAccessTokenSilently } = useAuth0();
    sec.setAccessTokenSilently(getAccessTokenSilently);
}

security.js

let getAccessTokenSilently = null;

export const sec = {
    getAccessTokenSilently: () => getAccessTokenSilently,
    setAccessTokenSilently: (func) => (getAccessTokenSilently = func)
};

And then when I need it I call it like this:

const accessToken = await sec.getAccessTokenSilently()({
    audience: `your-audience`,
    scope: 'scopes'
});

[cbeiro]

Hi, is there a way of calling getAccessTokenSilently from outside a react component? I need to get the token in an axios interceptor.

[majugurci]

Hi, is there a way of calling getAccessTokenSilently from outside a react component? I need to get the token in an axios interceptor.

Hi, that's the purpose of this security.js util in my previous reply.
You can use it anywhere in your code to obtain access token, regardless be it react component or plain js file.

For example, if you have api calls in a separate js file, let's call it apiTest.js.

apiTest.js

import { sec } from './security';

const fetch = async () => {
    const accessToken = await sec.getAccessTokenSilently()({
        audience: `your-audience`,
        scope: 'scopes'
    });

    console.log('accessToken', accessToken);
};

export const apiTest = {
    fetch
};

[adamjmcgrath]

Hi there,

Yep, as per @majugurci's example, the general pattern for accessing something in React Context outside of a component would be putting it in some global/module state

const MyContext = React.createContext({ someMethod: () => {} });

let myMethodThatCanBeExecutedFromAnywhere;

const App = () => {
  const { someMethod } = useContext(MyContext);
  myMethodThatCanBeExecutedFromAnywhere = someMethod;
  return <></>;
}

ReactDOM.render(<MyContext.Provider><App/></MyContext.Provider>, domEl);

With the caveat that this is fine for things that don't change over time (eg getAccessTokenSilently method) but not for things that do (eg isAuthenticated property)

Closing this, but feel free to reopen if you want to continue the conversation

[plantshopping]

Hey @adamjmcgrath, do you have a full sample of how to use React context with getAccessTokenSilently?

[adamjmcgrath]

Hi @plantshopping and all, I've created a guide as to why we don't offer the option to pass your own SPA JS client into the Provider and what solutions we suggest to takle these sorts of problems here https://gist.github.com/adamjmcgrath/0ed6a04047aad16506ca24d85f1b2a5c

[plantshopping]

Thanks @adamjmcgrath. Does this mean that whenever I want to make an API call I need to grab that instance of Axios Provider?

Currently I make all my api calls via a services file that doesn't require me to pass in an instance of Axios everytime:

// ItemsService.ts
import fetchClient from "src/axios";

export const getItems = async => {
    await fetchClient.get('/api');
}

export const postItem = async => {
    await fetchClient.post('/api');
}

// axios.ts
const fetchClient = axios.create();

fetchClient.interceptors.request.use(function (config) {
    // do something with config
    return config;
});

export default fetchClient;

// Items Component snippet
import getItems from "src/ItemsService";


export default function Items() {
    // Usage of getItems
    var items = await getItems();
}

If I follow the gist from the above, it feels like i would need to pass in Axios every time which would be a lot of code duplication.

[adamjmcgrath]

Hi @plantshopping - see the bottom example of the gist that shows you how to define a static getAccessTokenSilently if you don't want to do all this in React Context.

[plantshopping]

Hey @adamjmcgrath I tried to do the following:

ReactDOM.render(
  <React.StrictMode>
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      redirectUri={window.location.origin}
      audience={audience}
    >
      <BrowserRouter>
        <Auth0Context.Consumer>
          {() => {
            const { getAccessTokenSilently } = useAuth0();
            deferred.resolve(getAccessTokenSilently);
            return <App />;
          }}
        </Auth0Context.Consumer>
      </BrowserRouter>
    </Auth0Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

But I get the following error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

[plantshopping]

If I removed the hook const { getAccessTokenSilently } = useAuth0(); then I get the below error:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    at Auth0Provider

[adamjmcgrath]

Hi @plantshopping - I've put a working example here https://codepen.io/adamjmcgrath/pen/WNOZNBP