How to use Auth0 SDK inside of React Class Component

I’m using the Auth0 SDK Auth0 hook in all of my functional components in React. I also have some class components. Rather than refactoring the class component, what is the suggested way to use the Auth0 APi inside a class component? Thanks.

Hi @dvaillancourt,

Does this blog cover what you’re looking for?

Yes I saw this, thank you Dan. My concern is that I thought it might be bad practice to store tokens in client side state as this makes things especially vulnerable to token theft. Not sure if this concern is overblown and interested in hearing your thoughts.

@dvaillancourt,

I have not seen guidance against storing tokens in state. Can you give an example or source for this info? I am not a React expert, but would be happy to get someone from our team to give some feedback if I have more info on the subject.

We advise against storing tokens in web storage (localstorage or sessionstorage), due to the possibility of xss revealing the token. Instead, we are advocating storing the token in memory, and performing a silent authentication after a page refresh or similar event (this leverages a cookie session between the client and auth server).

Thanks,
Dan

Thanks Dan for your responsiveness. The question really is if storing token in local storage is not recommended why would it be ok to store in local state? Wouldn’t any script loaded on a site have access to the client and hence state and local storage just the same?

While these links don’t speak directly to the question, they should provide more context. Yes, it would be great to hear feedback. Thank you.

https://github.com/facebook/react/issues/3473

I think you are correct in suggesting that state is still vulnerable, but it is less vulnerable than web storage because of it’s app-specific nature. This is outlined by one of our senior support engineers here:

Dan…thanks a lot. Is it true that even if we import the Auth0 hook/token directly into a functional component that then passes the token into say an AJAX or axios request handler in the same component that the token is still saved in memory or similar?

In other words, is saving something to memory (or whatever happens when you call the Auth0 SDK API token directly into the component ) just about the same in terms of vulnerability as passing a token into a component from parent to child?

If so, then it shouldn’t make a difference (again from a security standpoint) if I import a token directly from the Auht0 SDK api or pass it into a class component via a prop.

Please clarify as I think the answer would clarify the original question once and for all. :slight_smile:
Thank you.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.