I’m using Framework7 Vue with Capacitor and I wanted to implement Dropbox Auth for data backup and restore. Everything I have done so far works fine in Web Browser but I hit a block road for Android (where it’s actually needed).
I have a simple back-end server setup with URL: https://api.domain.com/auth User clicks on a button inside App and goes to that URL, which leads to Dropbox App. After login and giving access to the app, the user return to https://api.domain.com/redirect, which gets access_token and passes it as a parameter to the client app URL: http://localhost:3000/?access_token=ACCESS_TOKEN. So while developing, this works fine and I can store that access token.
But on Android, Capacitor In-App Browser doesn’t close and shows Page is not available error on the final redirect to localhost:3000. The Browser built-in method await Browser.close() doesn’t work on Android. More details about the issue here.
Any suggestion on how to handle this? I’m not sure which should be the final redirect URL from the server. http://localhost:3000 works for development but it’s clearly not the solution for the Android App container.
I think getting an access_token from 3rd party website is a common way to handle any type of auth. So anyone wants to share how they’re doing this? I would really appreciate this.
Here is my code for Auth function.
async auth() {
if (!this.dropbox) {
await Browser.open({
url: "https://api.domain.com/auth",
windowName: "_self",
});
return new Promise((resolve, reject) => {
// Listen for the URL change event
Browser.addListener("browserPageLoaded", async (info) => {
// Check if the URL is your callback URL
if (info.url.startsWith("http://localhost:3000")) {
const params = new URLSearchParams(
new URL(info.url).hash.substring(1)
);
const accessToken = params.get("access_token");
if (accessToken) {
await this.secureSet(
"dropbox_token",
accessToken
);
this.dropbox = true;
// Close the browser
await Browser.close();
// Resolve the Promise
resolve(accessToken);
} else {
// Reject the Promise if no accessToken is found
reject("No access token found");
}
}
});
});
}
return;
}
Please note that this is an offline app and there is no server setup for user login and database where I can store the access_token and retrieve it back. It’s a simple App where data is stored inside IndexedDB. Dropbox feature is for storing that IndexedDB in Dropbox and restoring it back when the user needs it.
Any suggestion/help would be really appreciated.