AWS Amplify Google auth user not redirected back

user_3147669 0
Viewed 2543

I'm trying to implement Google auth in a React native app using AWS Amplify. I've installed Amplify in my app and also installed Auth.

I have this client in Google apis: enter image description here

Authorised javascript origin:

https://inventory053721f5-053721f5-develop.auth.eu-west-1.amazoncognito.com

Authorised redirect uri:

https://inventory053721f5-053721f5-develop.auth.eu-west-1.amazoncognito.com/oauth2/idpresponse

aws-exports.js:

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "eu-west-1",
    "aws_cognito_identity_pool_id": "***",
    "aws_cognito_region": "eu-west-1",
    "aws_user_pools_id": "***",
    "aws_user_pools_web_client_id": "***",
    "oauth": {
        "domain": "***",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "inventory://",
        "redirectSignOut": "inventory://",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS"
};


export default awsmobile;

My App.tsx looks like this:

import React, {FunctionComponent} from 'react';
import Amplify, {Auth} from 'aws-amplify';
import {Button} from 'react-native';
import config from '../../aws-exports';

Amplify.configure(config);

export interface AppProps {}

const App: FunctionComponent<AppProps> = () => {
  return <Button title={'Login'} onPress={() => Auth.federatedSignIn()} />;
};

export default App;

A video of what happens:

https://imgur.com/tPEcoop

aws-amplify react-native reactjs amazon-web-services
2 Answers

After setting up Amplify Auth and configuring your social provider, you also have to set up linking so that your app can handle the callback from the web browser back to your app:

  1. Note the value that you entered for the 'redirect signin uri' when you ran amplify add auth (such as myapp:\\).
  2. For apps made using react-native-cli (rather than Expo) on iOS, open the Xcode project (in the ios folder, rnamplify.xcworkspace). Then open info.plist as source code and add the following:
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  <dict>
</array>
  1. For apps made using react-native-cli (rather than Expo) on Android, in Android Studio open android/app/main/AndroidManifest.xml and add the following intent-filter:
<intent-filter android:label="filter_react_native">
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="myapp" />
</intent-filter>

If your app was made with Expo, rather than with react-native-cli, then you wouldn't do steps 2 and 3 above. Instead open your app.json file and add the scheme key value pair to the "expo" property:

{
  "expo": {
   "scheme": "myapp"
  }
}
user_2417540

While this may not be your situation exactly. If you are using the amplify CLI make sure that your redirect signin and signout URIs are set up properly.

You can adjust this by running amplify update auth

user_178342860
Related