Ionic Vue - Google Oauth - localhost refused to connect

Hi there, I have an issue with Google OAuth login using Ionic / Vue. I tried searching the net for answers but it seems that the information are scarce. Here is my current login code for it:

const loginWithGoogle = () => {
try {
const response = account.value?.createOAuth2Session(
"google",
"http://localhost:8100/home",
"http://localhost:8100/error"
// "http://appwrite.azzotech.com.my/auth/oauth2/success",
// "http://appwrite.azzotech.com.my/auth/oauth2/failure"
);
return { error: undefined, data: response };
} catch (error) {
return { error, data: undefined };
}
};

But I always have this "localhost refused to connect" error. I know I'm doing something wrong but I can't pinpoint it. As I was testing on my self-hosting appwrite, I thought that was the issue, so I configure my cloud.appwrite.io to test and it's the same result. So I know something is wrong my login code. Thanks

Ionic Vue - Google Oauth - localhost refused to connect

So your app is running on localhost port 8100?

@Drake When running under web, yes it's using port 8100

@Drake , your question does make me wonder if this is more towards capacitor's port issue. hmm. Let me check on that first. Thanks!

Some improvement, I found that in Android emulator, the app is served in IP: 10.0.2.2:8100 , I changed my success URL to http://10.0.2.2:8100/home and now I received "Error 400: Invalid "success" param: URL host must be one of: localhost, appwrite.azzotech.com.my

Hmm....you might need to set up deep linking. I'm not sure if that IP address will work when deployed to production.

When you do set up deep linking, you'll probably need to add a web platform for the domain

@Drake Thanks for the pointer. I will check on this