Gen1: Ability to pass configurationID for Facebook Login for Business

[peculiarism]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Next.js

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

Other

Environment information

  System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M2
    Memory: 124.89 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.6.0 - ~/.nvm/versions/node/v22.6.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v22.6.0/bin/npm
  Browsers:
    Safari: 17.2.1
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @aws-amplify/api: ^6.0.47 => 6.0.47 (6.0.44)
    @aws-amplify/api/internals:  undefined ()
    @aws-amplify/api/server:  undefined ()
    @aws-amplify/backend: ^1.1.1 => 1.1.1 
    @aws-amplify/backend-cli: ^1.1.1 => 1.2.2 
    @aws-amplify/ui-react: ^6.1.14 => 6.1.14 
    @aws-amplify/ui-react-internal:  undefined ()
    @aws-crypto/sha256-js: ^5.2.0 => 5.2.0 (3.0.0)
    @aws-sdk/client-cognito-identity-provider: ^3.635.0 => 3.635.0 
    @aws-sdk/credential-providers: ^3.637.0 => 3.637.0 
    @aws-sdk/protocol-http: ^3.374.0 => 3.374.0 (3.338.0)
    @aws-sdk/signature-v4: ^3.374.0 => 3.374.0 (3.338.0)
    @babel/core:  undefined ()
    @babel/runtime:  7.22.5 
    @chakra-ui/icons: ^2.1.1 => 2.1.1 
    @chakra-ui/react: ^2.8.2 => 2.8.2 
    @edge-runtime/cookies:  4.1.1 
    @edge-runtime/ponyfill:  2.4.2 
    @edge-runtime/primitives:  4.1.0 
    @hapi/accept:  undefined ()
    @headlessui/react: ^1.7.18 => 1.7.19 
    @mswjs/interceptors:  undefined ()
    @napi-rs/triples:  undefined ()
    @next/font:  undefined ()
    @opentelemetry/api:  undefined ()
    @tailwindcss/forms: ^0.5.7 => 0.5.7 
    @types/bcryptjs: ^2.4.6 => 2.4.6 
    @types/node: ^20 => 20.14.14 
    @types/react: ^18 => 18.3.3 
    @types/react-dom: ^18 => 18.3.0 
    @vercel/nft:  undefined ()
    @vercel/og:  0.6.2 
    acorn:  undefined ()
    amphtml-validator:  undefined ()
    anser:  undefined ()
    arg:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    aws-amplify: ^6.4.0 => 6.5.0 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    babel-packages:  undefined ()
    bcryptjs: ^2.4.3 => 2.4.3 
    browserify-zlib:  undefined ()
    browserslist:  undefined ()
    buffer:  undefined ()
    bytes:  undefined ()
    ci-info:  undefined ()
    cli-select:  undefined ()
    client-only:  0.0.1 
    commander:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    conf:  undefined ()
    constants-browserify:  undefined ()
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    css.escape:  undefined ()
    data-uri-to-buffer:  undefined ()
    debug:  undefined ()
    devalue:  undefined ()
    domain-browser:  undefined ()
    edge-runtime:  undefined ()
    eslint: ^8 => 8.57.0 
    eslint-config-next: 14.2.5 => 14.2.5 
    events:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    fresh:  undefined ()
    get-orientation:  undefined ()
    glob:  undefined ()
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    http-proxy-agent:  undefined ()
    https-browserify:  undefined ()
    https-proxy-agent:  undefined ()
    icss-utils:  undefined ()
    ignore-loader:  undefined ()
    image-size:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    jest-worker:  undefined ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-runner:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    mini-css-extract-plugin:  undefined ()
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: 14.2.5 => 14.2.5 
    next-auth: ^4.24.6 => 4.24.7 
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    path-browserify:  undefined ()
    picomatch:  undefined ()
    platform:  undefined ()
    postcss: ^8 => 8.4.41 (8.4.31)
    postcss-flexbugs-fixes:  undefined ()
    postcss-modules-extract-imports:  undefined ()
    postcss-modules-local-by-default:  undefined ()
    postcss-modules-scope:  undefined ()
    postcss-modules-values:  undefined ()
    postcss-preset-env:  undefined ()
    postcss-safe-parser:  undefined ()
    postcss-scss:  undefined ()
    postcss-value-parser:  undefined ()
    process:  undefined ()
    punycode:  undefined ()
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: ^18 => 18.3.1 
    react-builtin:  undefined ()
    react-dom: ^18 => 18.3.1 
    react-dom-builtin:  undefined ()
    react-dom-experimental-builtin:  undefined ()
    react-experimental-builtin:  undefined ()
    react-hot-toast: ^2.4.1 => 2.4.1 
    react-icons: ^5.0.1 => 5.2.1 
    react-is:  18.2.0 
    react-phone-input-2: ^2.15.1 => 2.15.1 
    react-refresh:  0.12.0 
    react-server-dom-turbopack-builtin:  undefined ()
    react-server-dom-turbopack-experimental-builtin:  undefined ()
    react-server-dom-webpack-builtin:  undefined ()
    react-server-dom-webpack-experimental-builtin:  undefined ()
    recharts: ^2.12.7 => 2.12.7 
    regenerator-runtime:  0.13.4 
    sass-loader:  undefined ()
    scheduler-builtin:  undefined ()
    scheduler-experimental-builtin:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    server-only:  0.0.1 
    setimmediate:  undefined ()
    shell-quote:  undefined ()
    source-map:  undefined ()
    source-map08:  undefined ()
    stacktrace-parser:  undefined ()
    stream-browserify:  undefined ()
    stream-http:  undefined ()
    string-hash:  undefined ()
    string_decoder:  undefined ()
    strip-ansi:  undefined ()
    superstruct:  undefined ()
    tailwindcss: ^3.4.1 => 3.4.9 
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    timers-browserify:  undefined ()
    tty-browserify:  undefined ()
    typescript: ^5 => 5.5.4 (4.4.4, 4.9.5)
    ua-parser-js:  undefined ()
    unistore:  undefined ()
    util:  undefined ()
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
    zod:  undefined ()
  npmGlobalPackages:
    @aws-amplify/cli: 12.12.6
    @aws-sdk/client-cognito-identity-provider: 3.635.0
    corepack: 0.29.3
    npm: 10.8.2
    npx: 10.2.2

Describe the bug

Facebook have removed Facebook Login as a product in favour of Facebook Login for Business. While this is fine, there's no way to pass a configuration ID for the Facebook Login for Business product, which results in the app not being available:

Expected behavior

Login with FB flow successfully loads, with the ability for users to select the permissions to grant to the Facebook app as configured in the app configuration

Reproduction steps

Setup social providers for Amplify Auth within a Cognito user pool, pass the relevant scope permissions, see screen.

Code Snippet

const ampConfig: ResourcesConfig = {
  Auth: {
    Cognito: {
      userPoolId: process.env.COGNITO_USER_POOL_ID as string,
      userPoolClientId: process.env.COGNITO_USER_POOL_CLIENT_ID as string,
      identityPoolId: process.env.IDENTITY_POOL_ID as string,
      signUpVerificationMethod: "code",
      loginWith: {
        oauth: {
          domain: "auth.stowaway.io",
          scopes: [
            "openid",
            "email",
            "profile",
            "aws.cognito.signin.user.admin",
          ],
          redirectSignIn: [
            "http://localhost:3000/redirect/",
            "https:/prod.app.com/redirect/",
          ],
          redirectSignOut: [
            "https://prod.app.com",
            "https://cognito-idp.eu-west-1.amazonaws.com",
            "http://localhost:3000/dashboard/",
          ],
          responseType: "code",
        },
      },
      userAttributes: {
        email: {
          required: true,
        },
        given_name: {
          required: true,
        },
        family_name: {
          required: false,
        },
        phone_number: {
          required: true,
        },
      },
    },
  },
  API: {
    REST: {
      StowAPI: {
        endpoint: process.env.API_GATEWAY_ENTRYPOINT as string,
        region: "eu-west-1",
      },
    },
  },
};
// Amplify Configuration
Amplify.configure(ampConfig);

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cwomack]

Hello, @peculiarism 👋. Are you using Facebook as a passed in provider (like shown here) or are you federating with Facebook directly and not using the Cognito Hosted UI? Can you share the frontend code where you're calling the signInWithRedirect() API?

Is there any documentation or news that you can reference where Facebook is no longer supporting this current login method or if there's changes coming to it?

[cwomack]

@peculiarism, ah I think I found it within the Meta Developer Docs. We're talking about the config_id referenced here, right?

If so, then I believe this is something that would require Cognito as a service to support our passing of a new query parameter to Facebook during the login process. I'll mark this as a feature request for now and review this internally with our team.

[peculiarism]

Hi @cwomack, thanks for following up -- you've answered all your questions without me! 😄

[cwomack]

Thanks for reply and confirmation, @peculiarism. We'll follow up with any updates or progress as they are made. And thank you for creating this issue to capture the feature request!

[StAandrew]

Been trying to get around the same issue - any updates would be greatly appreciated!

[cwomack]

@StAandrew, I don't have any updates yet unfortunately. This is still on our radar and something that needs support on the Cognito side as well.

[joefour]

@cwomack Hi, i'm having the same issue, is there any update on this?

[cwomack]

@joefour, no update as of yet unfortunately. This feature requires support from Cognito before we can implement on the Amplify side. If there's any progress or further updates, we'll be sure to comment!