[FIXED] How to config Cognito to get Facebook Login to pass back picture url included?

Issue

Recently I had configure to use amplify with @aws-amplify/ui-react library to login Federated users.

Once login, for google user, I would get payload like

{
  "id": "",
  "email": "",
  "name": "",
  "picture": "",
  "token": ""
}

Yet for facebbook user, I get similar stuff but no picture info

{
  "id": "",
  "email": "",
  "name": "",
  "token": ""
}

I had tried to update config in my Cognito for Facebook provider. However, this failed to get picture info for me.

Is it possible to make amplify's federated login through Facebook to pass me back picture info as well? I know I could just call another Facebook api to retrieve picture, but I wish this could be avoided, since Google login would return picture info automatically.

P.S. Here's my Facebook identity providers config:

PPS. Here's my recent Cognito attribute mapping config:

For Facebook: and in CognitoUserSession's idToken's payload: the picture field would include a JSON object about profile picture's information

For Google, much simpler: and the payload: the picture field is simply the image link

Solution

Assuming you're requesting public_profile, use "picture" from Facebook Attribute is actually correct, I do face similar problems that I couldn't receive it until i delete the userpool, and creating a new one.

The value you will get from picture should be something like this

{
    "data": {
        "height": 50,
        "is_silhouette": false,
        "url": "https://platform-lookaside.fbsbx.com/platform/profilepic/?etcetcetcetc",
        "width": 50
    }
}

Answered By - xion

Answer Checked By - Mildred Charles (PHPFixing Admin)

Read More

[FIXED] Why is my amplify federated sign-in in react native adding an extra 'https'?

Issue

I am using a manual auth configuration in my react native app to add OAuth to my react native app. I have followed all of the steps outlined here for Google and Facebook.

My problem is when I click on the button I have created in the front-end that redirects me to a federated sign-in, there is an extra 'https' in the link.

In AWS Cognito User Pools, my sign in and sign out URLS are set to myapp:// and have configured my hosted UI in the AWS console. I have also set the hosted UI url to the OAuth Redirect URI's in both facebook and google for my app clients.

This is my aws configuration in react native:

export default awsConfig = {
    Auth: {
      "aws_project_region": "us-west-2",
      identityPoolId: 'us-east-1:*******',
      region: 'us-east-1',
      userPoolId: '************'
      userPoolWebClientId: '*************'
      oauth: {
        domain: "https://myapp.auth.us-east-1.amazoncognito.com",
        scope: [
            "email",
            "openid",
        ],
        redirectSignIn: process.env.NODE_ENV === "myapp://",
        redirectSignOut: process.env.NODE_ENV === "myapp://",
        responseType: "code"
      },
      federationTarget: "COGNITO_USER_POOLS"
    }
}

In my case, the problem occurs when I click either the "Sign in with Facebook" or "Sign in with Google" buttons.

This is what comes up when I click either link:

and the whole url is https://https//aspen-dev.auth.us-east-1.amazoncognito.com/oauth2/authorize?redirect_uri=false&response_type=code&client_id=****&identity_provider=Google&scope=email%20openid&state=****&code_challenge=xQX-****&code_challenge_method=S256

As you can see, there is an extra https, and I don't know what is causing it.

Solution

in awsConfig, I took out the 'https://' of the oauth.domain and now it is working

Answered By - Dane B

Answer Checked By - Willingham (PHPFixing Volunteer)

Read More

[FIXED] Why does %PUBLIC_URL% not get replaced in Webpack bundled index.html?

Issue

I am trying to deploy the front-end of my web application, but when I deploy to my hosting platform (currently AWS Amplify/S3) - no content displays on the website

I created the application using create-react-app, so the project structure follows their standard (public, src folders etc.).

When I run the application locally it works fine.

From the console errors, and looking at the index.html page that is generated by webpack, it looks like it is not replacing the %PUBLIC_URL% field that should be replaced with the public directory on build.

Please can someone explain how to fix this issue?

I have included my webpack.config file below and the full repo can be found here

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const config = {
  entry: ['react-hot-loader/patch', './src/index.js'],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.svg$/,
        use: 'file-loader',
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png',
            },
          },
        ],
      },
      {
        test: /\.(ttf|eot|woff|woff2)$/,
        use: 'file-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
  },
  devServer: {
    contentBase: './build',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve('./public/index.html'),
    }),
  ],
}

module.exports = config

Solution

Turns out this was an issue with me trying to add a custom Webpack configuration to a create-react-app project.

I've removed the Webpack config now, and instead used the dist files created when using the create-react-app build process.

Answered By - George

Answer Checked By - Mildred Charles (PHPFixing Admin)

Read More