'isAuthenticated' in React Native SDK?

Hi, I am quite new to Auth0 but have successfully implemented it in a React SPA project. I am now working on a React Native app and cant seem to find out how to check a users authentication state…

For example with the React SDK I can access ‘isAuthenticated’ which allows me to render the UI after a user returns to the app at a later date. With React Native, every time the app is closed and re-opened (or refreshed when debugging) the user is taken back to the login page (initial page of the user flow).

Is there a way to check auth status in react-native-auth0 SDK like with @auth0/auth0-react SDK so that on re-launch of the app the user is not prompted to login again?

Hi @jon7 and welcome to the community! :tada:

This is a common situation people run into with the React SDK. The React SDK should automatically silently auth the user after a page reload, but some things can go wrong. There a brief FAQ about it here: auth0-react/FAQ.md at 05866c0caae6a56f03142c81302e7ec66bf165e3 · auth0/auth0-react · GitHub

You should review that and let me know if you still have the issue.

1 Like

Hi @thomas.osborn thank you for your response, I have checked the link and it mentions React SPA JS… my question was more around React Native SDK (GitHub - auth0/react-native-auth0: React Native toolkit for Auth0 API)?

Ah, sorry @jon I should have read your post more closely.

I discussed this with the SDK team and this does not exist in the React Native SDK.

However, it also brought up some larger issues with the isAuthenticated function in the first place, and it sounds like the SDK team is going to work to decide what the behavior of isAuthenticated should be.

Right now, in the React SDK, isAuthenticated check if the is an ID token, it is not expired, and there is an access token. Then it stores this as a boolean in a prop.

However, the team is not certain it should even bother checking the expiration of the ID token, and in fact some of the SDKs do not.

So if you want to add isAuthenticated into your React Native app, you’ll need to write it yourself and:

  1. Check the ID token (and expiration if you want it to match the React SDK’s behavior). There are docs on this: Validate ID Tokens
  2. Check the access token. There are docs on this: Validate Access Tokens
  3. Store the result as a boolean
  4. Use the boolean to decide whether or not a user is authenticated.

Of course, depending on the behavior you want, this might not be desirable.

I hope that makes sense, and I’m sorry the React Native SDK is not as up-to-date as the React SDK.

Please let me know if you have questions about that.

Hi @thomas.osborn - something came up so it has taken me a while to get back to this… thank you for the info, will keep an eye out for updates from the SDK team but in the mean time I wanted to share some learnings on this in case anyone else has the problem.

I ended up using @react-native-async-storage/async-storage to store the access key on login then check on app load to see if one is in storage, if so move into the app otherwise display the login screen.

App.js

  • show loading spinner > true
  • useEffect hook calls async ‘checkTokens’ function (calls AsyncStorage to look for token)
    • token returned, set local auth const to token value
    • set loading > false
  • if auth = true return react nav bottom tabs (main app navigation) else return login stack

I then pass the setAuth hook down to my settings page in the main nav and when Auth0 logout is called and successful I then clear AsyncStorage and call setAuth() to clear the value at the top level which switches the view to the login stack

… I am sure there is a better way to do it but it works for now, I need to check out how to use refresh tokens as at the moment I am just storing the accessToken (for some reason I was not getting a refreshToken returned from .webAuth.authorize?!) and I need to enhance this to retrieve the user profile after login and store that locally!