Hi everyone ,
I’ve been testing the official Auth0 React quickstart for Ionic + Capacitor. After two days of testing, here’s what I found:
-
Web: Demo app works fine with minor setup adjustments. isAuthenticated and user update as expected.
-
Mobile HTTPS/WebView: Works in mobile browser or WebView—but this is just the web app running on mobile, not a true native app.
-
Native build: Auth0 completely fails:
-
user is undefined (I tried to display user.name and user.email, but nothing shows up.
-
isAuthenticated is always false
-
Logout/login works, but useAuth0 hook never provides values
Question:
Has anyone successfully used the Auth0 React quickstart with Ionic & Capacitor in a native app? How do you ensure isAuthenticated and user Update correctly on native builds?
Any guidance or examples would be greatly appreciated!
Welcome back to the Auth0 Community!
I will be taking a look at the issue that you are having and will come back with an update on both of your posts as soon as possible. Thank you for your patience!
Kind Regards,
Nik
Hi again @extrat30
Could you creating a hook in order to update the the token in the background at specific intervals as stated in this StackOverflow thread?
Also, by any chance do you have your App component wrapped in inside the index.tsx or other index files?
Kind Regards,
Nik
Here is my observation after trying for the past two days:
-
Your demo app for Ionic + Capacitor (React) works fine on the web. I did encounter some minor errors that needed setup, but overall it works.
-
If I serve the app with HTTPS on my mobile, it runs fine in the mobile browser or in a WebView. However, this is just a projection of the web app running on mobile—it’s not the real native app.
-
When I build the app for a native environment, Auth0 completely fails. I don’t get any user data, and isAuthenticated is always false. I can log out and log in perfectly, but the useAuth0 hook does not provide any of these values.
Initially, I thought the issue was that useEffect was not triggering, but after testing, it turns out the main issue is that in the native app, I simply don’t get the Auth0 values at all. I’m not sure why it’s failing or what the correct approach should be for Auth0 in a fully native environment.
I think you can check that out too. Just run your example app and build that native app you will find that issue too
Whenever you build the app in a native environment, just to double check, you mean that you ran it using a emulator? If yes, have you tried running the application on an actual mobile device to see if there are any changes between these two environments?
I will investigate further regarding your findings to provide further updates/feedback.
Kind Regards,
Nik
1 Like
I run on an actual phone; I haven’t checked on an emulator
According to the quick start app the user name and user email should show up on the screen after login
and after login the Login button should change to Logout button if isAuthenticated is true . but the button don’t change cause isAuthenticated is always false (It works in web though but not in native app )
Hi again!
Could you try the following or confirm that these have been set when authentication has failed?
The instructions specify to set Allowed origins and by default there is a property named Allowed web origins in the Auth0 Application settings.
However in addition to this Cross-Origin Authentication needs to be switched on and the following domains added to Allowed Origins (CORS)
capacitor://localhost, http://localhost, http://localhost:3000/, https://localhost
If you don’t do this the following error will appear in the logs.
Origin https://localhost is not allowed. Behavior used for check: LEGACY
This has been stated in an issue on github.
Looking forward to your reply!
Kind Regards,
Nik
Issue Summary
The problem is the same as that open issue on GitHub, but the provided answers are not related to it at all — it has nothing to do with localhost origins. I have already added all possible configurations and testing setups.
Detailed Findings
-
As mentioned earlier, everything works perfectly on Android mobile browsers and even inside WebView.
-
However, in the native app, the issue appears:
-
The user is successfully authenticated the first time they log in.
-
In the default demo app, there’s a condition:
if (isAuthenticated) show Logout button
else show Login button
-
Because of this check, it may seem like the user is not logged in. but actually he is logged in.
-
To confirm, I removed the condition and displayed both buttons.
-
When I press “Logout” and then “Login” again, it redirects me to the auth0 login page, and I can log in normally — but the values like user and isAuthenticated never update in the native build.
Reproduction
You can verify this yourself:
-
Download the official demo.
-
Build and run it as per the documentation of the quick start demo in auth0 dashboard.
-
You’ll see that user and isAuthenticated Do not update in the native environment ( i mean in the real app ) , even though login works.
Current Understanding
This appears to be an open problem — as of now, there doesn’t seem to be a direct solution for native apps.
Possible Workaround (Idea)
If there’s an API available (not sure if Auth0 exposes one for this), we could:
-
Use a useEffect hook in each page to fetch data like the user each time after login via an API call. We also need to pull the tokens and store them in a state
-
In every API request, use an Axios interceptor to:
-
Verify if the access token or refresh token is valid.
-
Update a local state in the app accordingly. Cause without an isAuthenticated value, we can’t do anything, we have to use this for many things like logout the user based on this.
However, doing all this manually defeats the main purpose of Auth0, which is to handle the authentication flow automatically and reduce such manual work.
Conclusion
-
Everything works fine on the web.
-
The issue only persists on native apps.
-
This behaviour should be reviewed, as it’s currently breaking the basic Auth0 use case on mobile apps.