I’m following this tutorial:
But this returns invalid state. It seems that Browser.open() inactivates the app, reactivating it on callback but that changes the state, so it’s not possible to login (iOS only, localhost and android seems to work).
This is my package.json
"dependencies": {
"@auth0/auth0-vue": "^2.3.0",
"@aws-sdk/client-polly": "^3.87.0",
"@aws-sdk/polly-request-presigner": "^3.87.0",
"@capacitor-community/barcode-scanner": "^4.0.1",
"@capacitor-community/http": "^1.4.1",
"@capacitor/android": "^5.2.2",
"@capacitor/app": "^5.0.6",
"@capacitor/browser": "^5.0.6",
"@capacitor/camera": "^5.0.6",
"@capacitor/core": "^5.2.2",
"@capacitor/device": "^5.0.6",
"@capacitor/ios": "^5.2.2",
"@capacitor/network": "^5.0.6",
"@capacitor/share": "^5.0.6",
"@capacitor/status-bar": "^5.0.6",
"@prisma/client": "^4.10.1",
"@stripe/stripe-js": "^1.46.0",
"@tailwindcss/line-clamp": "^0.4.0",
"@vue-stripe/vue-stripe": "^4.4.4",
"axios": "^0.27.2",
"capacitor-plugin-app-tracking-transparency": "^2.0.4",
"cloudinary": "^1.32.0",
"dayjs": "^1.11.9",
"faunadb": "^4.6.0",
"jsonwebtoken": "^8.5.1",
"jwks-rsa": "^2.1.4",
"stripe": "^10.13.0",
"swiper": "^8.3.1",
"utm-params-saver": "^1.4.2",
"validator": "^13.7.0",
"vue": "^3.3.4",
"vue-i18n": "^9.2.2",
"vue-money-format": "^1.2.4",
"vue-picture-cropper": "^0.6.0",
"vue-router": "^4.0.16",
"vue-social-sharing": "^4.0.0-alpha4",
"vue2-filters": "^0.14.0",
"vuex": "^4.0.2"
},
"devDependencies": {
"@capacitor/cli": "^5.2.3",
"@iconify/vue": "^4.1.1",
"@vitejs/plugin-vue": "^2.3.3",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"prisma": "^4.10.1",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"tailwindcss": "^3.1.6",
"vite": "^2.9.12",
"vue-cli-plugin-i
18n": "^0.6.1"
}
The callback in App.vue
CapApp.addListener("appUrlOpen", async ({ url }) => {
if (
url.includes("state") &&
(url.includes("code") || url.includes("error"))
) {
await handleRedirectCallback(url);
}
const deviceInfo = await Device.getInfo();
const deviceOS = deviceInfo.platform;
// No-op on Android
if (deviceOS == "ios") {
await Browser.close(); // Close the browser so we don't have to press done. This is iOS only, Android breaks if it hits this line
}
});
The login on login.vue
const { loginWithRedirect, loginWithPopup, user, getAccessTokenSilently } =
useAuth0();
const mobileLogin = async () => {
await loginWithRedirect({
async openUrl(url) {
await Browser.open({ url: url, windowName: "_self" });
},
});
};