Problem statement
I am seeing an issue with opening the browser in my Ionic/Angular/Capacitor app, specifically on the Android platform. The Capacitor browser flashes open and closes immediately but fails the login.
Attempts to call the /token endpoint fail with ‘JSON Exception’ when this.auth0.handleRedirectCallback(url)
is called.
Symptoms
Attempts to call the /token endpoint fail with ‘JSON Exception’ when this.auth0.handleRedirectCallback(url)
is called.
It looks like the Auth0 SDK is trying to send the /token request with the body of a string when it is expecting a JSON:
org.json.JSONException: JSValue could not be coerced to JSObject.
Cause
The capacitor/android package had a bug regarding how it sent requests with url-encoded type header requests. It was this exact issue:
opened 11:29AM - 14 Oct 22 UTC
closed 11:19PM - 11 Jan 23 UTC
platform: android
type: bug
## Bug Report
### Capacitor Version
<!--
Paste the output from the `npx cap… doctor` command into the code block below. This will provide the versions of Capacitor packages and related dependencies.
-->
```
💊 Capacitor Doctor 💊
Latest Dependencies:
@capacitor/cli: 4.3.0
@capacitor/core: 4.3.0
@capacitor/android: 4.3.0
@capacitor/ios: 4.3.0
Installed Dependencies:
@capacitor/core: 4.3.0
@capacitor/ios: 4.3.0
@capacitor/cli: 4.3.0
@capacitor/android: 4.3.0
[success] iOS looking great! 👌
[success] Android looking great! 👌
```
Capacitor.config.js
```
{
"appId": "our-app.com",
"appName": "appname",
"bundledWebRuntime": false,
"npmClient": "yarn",
"webDir": "build",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
},
"FirebaseAuthentication": {
"skipNativeAuth": false,
"providers": [
"google.com",
"facebook.com",
"apple.com"
]
},
"CapacitorHttp": {
"enabled": true
}
},
"server": {
"androidScheme": "https",
"iosScheme": "ionic",
"cleartext": true,
"allowNavigation": [
"*"
]
}
}
```
### Platform(s)
<!--
List the platforms that this bug affects.
-->
1. capacitor android only - We are using capacitor.https -> enabled true flag as part of new release 4.3.0 of capcitor.
### Current Behavior
<!--
Describe how the bug manifests. Be specific.
-->
1. We know firebase access token expires after an hour.
2. We use getIdToken(true) - forcerefresh param to true, for forceful token with extended one hour token.
3. This function is returning jsonexception error when being called.
4. FirebaseError/auth-network-failed is returned with no other information.
NOTE: getIdToken() without param after logging in, returns token perfectly. But with parameter as true it fails all the time.
### Expected Behavior
<!--
Describe what the behavior should be.
-->
1. getIdToken(true) should return new token, not the error.
### Code Reproduction
<!--
To isolate the cause of the problem, we ask you to provide a minimal sample application that demonstrates the issue.
For full instructions, see: https://github.com/ionic-team/capacitor/blob/HEAD/CONTRIBUTING.md#creating-a-code-reproduction
-->
```
const app = getApp();
const auth = getAuth(app);
const updatedUser = auth.currentUser;
updatedUser?.getIdToken(true).then(token => {
console.log(token, "Forceful"); // doesn't return this
}).catch(err => {
console.error(err)
});
```
### Other Technical Details
<!--
Please provide the following information with your request and any other relevant technical details (versions of IDEs, local environment info, plugin information or links, etc).
-->
`npm --version` output: 8.11.0
`node --version` output: v16.16.0
`pod --version` output (iOS issues only): nil
### Additional Context
<!--
List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, etc.
-->
firebase: 9.8.2
Please see the image below for the error.
![image](https://user-images.githubusercontent.com/114076352/195836023-53065d49-38ea-4f5b-9ee2-d451bfa06d95.png)
Thank you.
Solution
Upgrading to the latest Capacitor 4 versions resolved the issue