Intro
This post will be different from other texts I've put on this blog so far. Instead of digging deep into a singe topic, I'll mention some issues that stumped me recently and suggest solutions. These issues might be quite niche, but I hope it will help at least one person get unstuck. Well, it might be me in the future. I'm 40 now - it's about time I started writing things down ;)
The issues:
Logout not working in React + Capacitor app (Auth Connect)
I was working on a PoC app with React and Capacitor for Web and Android platforms, based on Auth Connect tutorial. The app was initially using Auth0Provider to connect to Ionic's test client. It worked fine. Unfortunately as soon as I switched to OIDC auth used at my company, the logout action stopped working (while login still worked)! Logout was not invoking correct URL, it looked like the end_session_endpoint property from .well-known discovery was ignored.
Switching from Auth0Provider to OktaProvider solved the issue. If more problems appear, maybe it will be necessary to do a custom provider...
Login action stuck in React + Capacitor app (Auth Connect)
While working again on the same PoC app mentioned above, I've faced an issue with login on Android (the Web version was all good). First part of the login process worked fine: user was redirected to auth page, got a chance to enter email and input one-time password. But, after clicking the sign in button nothing happened (user should be redirected back to the Android app). Keycloak logs showed successful LOGIN event... Weird... I've checked out older version (based on Auth Connect tutorial) which worked ok and compared the logs in Android Studio Logcat: the broken version lacked App restarted, Auth Code, Login Token Provider and Fetch Token URL entries that follow successful Login...
It turned out that I didn't have proper AUTH_URL_SCHEME setting in android/variables.gradle file. If your Android URLs start with com.example.myapp:// then you should add AUTH_URL_SCHEME = 'com.example.myapp' variable (BTW: for production apps look into Deep Links). After fixing the setting, the login flow started to work correctly. Now Keyclock events log shows not only LOGIN entry but also CODE_TO_TOKEN following it.
No details in Capacitor/Console logs
It's easy to get used to how good modern console logging is. If you write console.log('Some message', {someObject}) then Chrome will display the logged message and show expandable object details (which you can copy to clipboard or save as variable). Node will show the details too (formatted and colored)... Watch out though, because if you are working on a Native target in Capacitor, the same console.log call will end up as useless 'Some message', [object Object] line that you can see in Android Studio Logcat.
You can make the log more useful by creating a small utility, that prepares parameters in such way that when the app runs on Native platform, the details object is serialized (you don't want to do it for Web unless you are ready to lose special object handling and see just a string instead):
import { Capacitor } from '@capacitor/core';
export const getLogArgs = (message: string, details: unknown) =>
Capacitor.isNativePlatform()
? [message, JSON.stringify(details, null, 2)]
: [message, details];
// Usage:
console.log(...getLogArgs('Some message', { someObject }));
It's tempting to create a simple function that wraps a call to console.log but that has a serious drawback: your log entries will be marked as coming from file and line that contains the wrapper function instead of a place that added the message.
Unable to start application on Android Virtual Device (activity class does not exist)
I occasionally get "Activity class {com.example.something/com.example.something.MainActivity} does not exist" error while trying to start application in Android emulator from Android Studio. Restarting virtual device, using "Invalidate Caches" or "Reload All from Disk" options in Android Studio doesn't help. Rebuilding the project, doing npx cap sync etc. also doesn't solve the issue. The error persists...
One thing that finally solves it is wiping out emulated device data. Losing the data is a bit annoying (for example I will need to onboard a fingerprint again), but it's much better than not being able to test the app at all :) There's probably a better way, but I don't do that much on Android... You can find "Wipe Data" option in virtual devices manager:
Problems with accessing internal NPM dependency
I work on projects that mix dependencies on publicly accessible NPM packages with internal packages from GitHub Packages registry. Recently I couldn't get a project running after moving to new laptop, Yarn was not able to install an internal package and it did not provide useful info on why the authorization failed...
Your projects might be setup in a different way, but for me the issue was that my GITHUB_TOKEN was refreshed and it lost SSO (single sign-on) access to my company organization in GitHub. The issue was easy to spot after running this command:
curl -H "Authorization: Bearer ${GITHUB_TOKEN}" https://npm.pkg.github.com/your-org/your-package
because it gave such helpful information:
{"error":"Permission permission_denied: Resource protected by organization SAML enforcement. You must grant your Personal Access token access to this organization."}
Some other things worth checking if you use GITHUB_TOKEN and internal NPM registry is to verify if your shell gives you proper (current) value of token from environment variable by running env | grep GITHUB_TOKEN command. Check also if you have good config in .npmrc and run npm login at least once (in my case the expected password was the token, not my normal login password!)...