I am building a mobile application from an Angular project using Ionic and capacitor. It is my first mobile application. I use AWS Amplify plugin to login to the app. Log in with email and password works well. I have an issue with log in with Google as a social provider.
When I call amplify/auth function authWithRedirect({provider: Google}) it redirects me to the Google to sign In. After I have finished Google registration I receive a popup which asks how I would like to open the application: using Browser or mobile application. I choose mobile app. it redirects me back to my app with a code in the url query. I should change this code to tokens. I use App.urlOpener to catch this redirect.
App.addListener('appUrlOpen', (event) => {
this.zone.run(async() => {
const urlToCatch = 'hellokaiio?code=';
if (event.url.includes(urlToCatch )) {
const {tokens} = await fetchAuthSession(); //AWS amplify function
}
});
});
}
But there are no tokens there. The authentication is not finished.
In my web application the behaviour is similar. But when Google redirects me back with a code, it also send a text/html response, which (I think) includes a next step to finish the authentication.
So, I can catch a google code from appUrlOpen event in my mobile app. But how can I change it to tokens?
There is my capacitor Config file:
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.hellokaiio.app',
appName: 'Hellokaiio',
webDir: 'www',
server: {
hostname: 'hellokaiio',
androidScheme: 'https'
}
};
export default config;
There is my AndroidManifest.xml file
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.hellokaiio.app">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
android:name=".MainActivity"
android:label="@string/title_activity_main"
android:theme="@style/AppTheme.NoActionBarLaunch"
android:launchMode="singleTask"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="" android:host="hellokaiio" />
</intent-filter>
</activity>
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="${applicationId}.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/file_paths"></meta-data>
</provider>
</application>
<!-- Permissions -->
<uses-permission android:name="android.permission.INTERNET" />
</manifest>
There is my aws amplify configuration file:
const redirectBaseURL = window.location.protocol + '//' + window.location.host;
const oauth = {
domain: environment.authDomain,
redirectSignIn: [redirectBaseURL],
redirectSignOut: [redirectBaseURL + '/signout'],
responseType: "code" as "code" | "token",
scopes: ["email", "profile", "openid", "aws.cognito.signin.user.admin"]
};
Amplify.configure({
Auth: {
Cognito: {
identityPoolId: '',
userPoolId: environment.userPoolId,
userPoolClientId: environment.userPoolWebClientId,
loginWith: {
oauth
}
}
}
});
Please help me to log In correctly and to catch tokens.