We are developing Android and IOS App using Vue3, AWS Cognito. And in Vue3 we are using capacitor plugin. We are using Auth.federatedSignIn({ provider: "Google" }); for Google Login. However, when we click on Google Login button Google Login Consent Screen Opens up in Chrome Browser and after successfull login we get Home URL with Code and State but remains on Chrome Browser and it not redirects / returns to App. We got solution for this 1. By using Deep Linking and 2. By using InAppBrowser. However, we are not able to implement these two ways in our App developed using vue3 because, We do not found any proper documentation related to DeepLinking in vue3 or InAppBrowsser in vue3 for Google Login using Auth.FederatedSignIn().
In PreSignin.Vue file We have Implement Google Login Code as below,
<div class="d-flex justify-content-around Icons mt-2">
<div @click="LoginWithGoogle()"><i class="fa-brands fa-google icon Icon mt-1
IconOne"></i></div>
</div>
import { Auth } from "aws-amplify";
async LoginWithGoogle () {
return Auth.federatedSignIn({ provider: "Google" });
}
In aws-exporst.js we have aws IDs and redirect Urls as below,
import env from "./config";
const awsmobile = {
"aws_project_region": "---",
"aws_cognito_identity_pool_id": "---",
"aws_cognito_region": "---",
"aws_user_pools_id": "---",
"aws_user_pools_web_client_id": "---",
"oauth": {
"domain": "---",
"scope": [
"phone",
"email",
"openid",
"profile",
"aws.cognito.signin.user.admin"
],
-
"redirectSignIn": "iMeUsWe://home",
"redirectSignOut": "iMeUsWe://presignin",
"responseType": "code"
},
"federationTarget": "COGNITO_USER_POOLS"
};
And in main.js we have below code implemented.
import { createApp } from 'vue';
import App from './App.vue';
import awsconfig from '../aws-exports';
Amplify.configure(awsconfig);`enter code here`
const ImuwApp = createApp(App);