Error logging in with google or fecebook

[AndresCi2]

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

No response

Backend

None

Environment information

  System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 2.98 GB / 15.32 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 18.20.3 - ~/.nvm/versions/node/v18.20.3/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.3/bin/npm
  Browsers:
    Chrome: 131.0.6778.85
  npmPackages:
    %name%:  0.1.0 
    @ampproject/toolbox-optimizer:  undefined ()
    @aws-amplify/backend: ^1.7.0 => 1.8.0 
    @aws-amplify/backend-cli: ^1.4.2 => 1.4.2 
    @aws-amplify/ui-react: ^6.5.5 => 6.6.0 
    @aws-amplify/ui-react-internal:  undefined ()
    @aws-amplify/ui-react-server:  undefined ()
    @aws-crypto/sha256-js: ^5.2.0 => 5.2.0 (1.2.2)
    @babel/core:  undefined ()
    @babel/runtime:  7.22.5 
    @edge-runtime/cookies:  5.0.0 
    @edge-runtime/ponyfill:  3.0.0 
    @edge-runtime/primitives:  5.0.0 
    @hapi/accept:  undefined ()
    @hookform/resolvers: ^3.3.1 => 3.9.1 
    @hookform/resolvers/ajv:  1.0.0 
    @hookform/resolvers/arktype:  2.0.0 
    @hookform/resolvers/class-validator:  1.0.0 
    @hookform/resolvers/computed-types:  1.0.0 
    @hookform/resolvers/effect-ts:  1.0.0 
    @hookform/resolvers/fluentvalidation-ts:  1.0.0 
    @hookform/resolvers/io-ts:  1.0.0 
    @hookform/resolvers/joi:  1.0.0 
    @hookform/resolvers/nope:  1.0.0 
    @hookform/resolvers/superstruct:  1.0.0 
    @hookform/resolvers/typanion:  1.0.0 
    @hookform/resolvers/typebox:  1.0.0 
    @hookform/resolvers/typeschema:  1.0.0 
    @hookform/resolvers/valibot:  1.0.0 
    @hookform/resolvers/vest:  1.0.0 
    @hookform/resolvers/vine:  1.0.0 
    @hookform/resolvers/yup:  1.0.0 
    @hookform/resolvers/zod:  1.0.0 
    @mercadopago/sdk-react: ^0.0.15 => 0.0.15 
    @mswjs/interceptors:  undefined ()
    @napi-rs/triples:  undefined ()
    @next/font:  undefined ()
    @opentelemetry/api:  undefined ()
    @react-three/drei: ^9.79.3 => 9.117.3 
    @react-three/fiber: ^8.13.5 => 8.17.10 
    @react-three/postprocessing: ^2.15.0 => 2.16.3 
    @readyplayerme/visage: ^4.10.0 => 4.12.4 
    @testing-library/jest-dom: ^5.17.0 => 5.17.0 
    @testing-library/react: ^14.3.1 => 14.3.1 
    @types/country-data: ^0.0.2 => 0.0.2 
    @types/jest: ^29.5.3 => 29.5.14 
    @types/mercadopago: ^1.5.9 => 1.5.11 
    @types/node: ^18.15.11 => 18.19.64 (20.17.6)
    @types/node-fetch: ^2.6.3 => 2.6.12 
    @types/prettier: ^2.7.2 => 2.7.3 
    @types/react: 18.3.12 => 18.3.12 
    @types/react-dom: 18.3.1 => 18.3.1 
    @types/three: ^0.150.0 => 0.150.2 
    @types/uuid: ^9.0.8 => 9.0.8 
    @typescript-eslint/eslint-plugin: ^5.57.0 => 5.62.0 
    @typescript-eslint/parser: ^5.57.0 => 5.62.0 
    @vercel/nft:  undefined ()
    @vercel/og:  0.6.3 
    acorn:  undefined ()
    amazon-cognito-identity-js: ^6.2.0 => 6.3.12 
    amazon-cognito-identity-js/internals:  undefined ()
    amphtml-validator:  undefined ()
    anser:  undefined ()
    assert:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    autoprefixer: ^10.4.15 => 10.4.20 
    aws-amplify: ^6.8.2 => 6.8.2 
    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 ()
    aws-cdk: ^2.167.1 => 2.167.2 
    aws-cdk-lib: ^2.167.1 => 2.167.2 
    aws-jwt-verify: ^3.4.0 => 3.4.0 
    aws-sdk: ^2.1347.0 => 2.1692.0 
    babel-packages:  undefined ()
    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 ()
    constructs: ^10.4.2 => 10.4.2 
    content-disposition:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    country-data: ^0.0.31 => 0.0.31 
    cross-spawn:  undefined ()
    crypto-browserify:  undefined ()
    css.escape:  undefined ()
    data-uri-to-buffer:  undefined ()
    debug:  undefined ()
    devalue:  undefined ()
    domain-browser:  undefined ()
    edge-runtime:  undefined ()
    esbuild: ^0.24.0 => 0.24.0 (0.23.1)
    eslint: ^8.37.0 => 8.57.1 
    eslint-config-next: 15.0.3 => 15.0.3 
    events:  undefined ()
    find-up:  undefined ()
    framer-motion: ^10.12.4 => 10.18.0 
    fresh:  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: ^29.6.1 => 29.7.0 
    jest-environment-jsdom: ^29.6.1 => 29.7.0 
    jest-worker:  undefined ()
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-runner:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    lru-cache:  undefined ()
    mercadopago: ^2.0.1 => 2.0.15 
    mini-css-extract-plugin:  undefined ()
    nanoid:  undefined ()
    native-url:  undefined ()
    neo-async:  undefined ()
    next: 15.0.3 => 15.0.3 
    node-fetch:  undefined ()
    node-html-parser:  undefined ()
    ora:  undefined ()
    os-browserify:  undefined ()
    p-limit:  undefined ()
    p-queue:  undefined ()
    path-browserify:  undefined ()
    path-to-regexp:  undefined ()
    picomatch:  undefined ()
    platform:  undefined ()
    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 ()
    postprocessing: ^6.32.2 => 6.36.4 
    prettier: ^2.8.7 => 2.8.8 (2.3.2, 1.19.1)
    process:  undefined ()
    punycode:  undefined ()
    qr-code-styling: ^1.6.0-rc.1 => 1.8.4 
    querystring-es3:  undefined ()
    raw-body:  undefined ()
    react: 18.3.1 => 18.3.1 
    react-builtin:  undefined ()
    react-dom: 18.3.1 => 18.3.1 
    react-dom-builtin:  undefined ()
    react-dom-experimental-builtin:  undefined ()
    react-experimental-builtin:  undefined ()
    react-flags-select: ^2.2.3 => 2.2.3 
    react-hook-form: ^7.45.4 => 7.53.2 
    react-is:  19.0.0-rc-66855b96-20241106 
    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 ()
    react-share: ^4.4.1 => 4.4.1 
    react-spring-bottom-sheet: ^3.5.0-alpha.0 => 3.5.0-alpha.0 
    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 ()
    suspend-react: ^0.1.3 => 0.1.3 
    tar:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    three: ^0.170.0 => 0.170.0 
    three-stdlib: ^2.23.13 => 2.34.0 
    timers-browserify:  undefined ()
    tsx: ^4.19.2 => 4.19.2 
    tty-browserify:  undefined ()
    typescript: ^5.6.3 => 5.6.3 (4.4.4, 4.9.5)
    ua-parser-js:  undefined ()
    unistore:  undefined ()
    util:  undefined ()
    uuid: ^9.0.1 => 9.0.1 (8.0.0)
    vm-browserify:  undefined ()
    watchpack:  undefined ()
    web-vitals:  undefined ()
    webpack:  undefined ()
    webpack-sources:  undefined ()
    ws:  undefined ()
    zod: ^3.21.4 => 3.23.8 ()
    zod-validation-error:  undefined ()
  npmGlobalPackages:
    @aws-amplify/cli: 12.13.0
    @nestjs/cli: 10.4.5
    cdk: 2.146.0
    corepack: 0.28.0
    esbuild: 0.21.5
    npm: 10.7.0

Describe the bug

Hi, I am trying to use the signInWithRedirect function to log in with google and facebook and in the platforms of each social network I have already added the urls to be able to make the redirections but when I want to redirect I get the following error “Uncaught (in promise) InvalidOriginException: redirect is coming from a different origin. The oauth flow needs to be initiated from the same origin” I don't know what I need to configure, I tried to adjust several processes and before I had version 4 of amplify and it worked, recently I updated to version 6.

Expected behavior

this is my configuration

Auth: {
Cognito: {
userPoolId: env.NEXT_PUBLIC_COGNITO_USERPOOL_ID,
userPoolClientId: env.NEXT_PUBLIC_COGNITO_CLIENT_ID,
signUpVerificationMethod: 'code',
loginWith: {
email: true,
oauth: {
redirectSignIn: [${BASE_URL}/auth/signin],
redirectSignOut: [${BASE_URL}/auth/signin],
domain: env.NEXT_PUBLIC_COGNITO_DOMAIN,
responseType: "code",
scopes: ["email", "openid", "profile", "aws.cognito.signin.user.admin"]
},
}
}
}

Reproduction steps

this is my code

await signInWithRedirect({
provider: 'Google',
customState: 'shopping-cart'
});

Code Snippet

// Put your code below this line.
const handlerSignUp = async () => {
    if (isChecked) {
      if (provider === "google") {
        await signInWithRedirect({
          provider: 'Google',
          customState: 'shopping-cart'
        });
      } else if (provider === "facebook") {
        await signInWithRedirect({
          provider: 'Facebook',
        });
      }
    }
  };

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

Auth: {
Cognito: {
userPoolId: env.NEXT_PUBLIC_COGNITO_USERPOOL_ID,
userPoolClientId: env.NEXT_PUBLIC_COGNITO_CLIENT_ID,
signUpVerificationMethod: 'code',
loginWith: {
email: true,
oauth: {
redirectSignIn: [${BASE_URL}/auth/signin],
redirectSignOut: [${BASE_URL}/auth/signin],
domain: env.NEXT_PUBLIC_COGNITO_DOMAIN,
responseType: "code",
scopes: ["email", "openid", "profile", "aws.cognito.signin.user.admin"]
},
}
}
}

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

linux

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[HuiSF]

Hi @AndresCi2 thanks for opening this issue. Normally InvalidOriginException gets thrown when the domain of the url that the end user redirected back from Facebook doesn't match the urls listed in the redirectSignIn field in your configuration. Could you double check whether redirectSignIn: [${BASE_URL}/auth/signin], in your configuration has correct value?

[AndresCi2]

Hola@AndresCi2Gracias por abrir este problema. Normalmente, InvalidOriginExceptionse produce cuando el dominio de la URL a la que el usuario final se redirigió desde Facebook no coincide con las URL que figuran en el redirectSignIncampo de tu configuración. ¿Podrías comprobar si redirectSignIn: [${BASE_URL}/auth/signin],tu configuración tiene el valor correcto?

Hello if the value I am using is the domain of amplify.com that is generating the amplify amplification when it was created.

[HuiSF]

And do the domains from both match? Could you provide the full url when it redirected back and the actually evaluated value of the redirectSignIn field?

[AndresCi2]

¿Y coinciden los dominios de ambos? ¿Podrías proporcionar la URL completa cuando se redirigió de vuelta y el valor evaluado realmente del redirectSignIncampo?

of course this is my url which I have configured in redirectSignIn “desarrollo.d22q0x5cvvqgsb.amplifyapp.com” but when I try to redirect in browser console I find this error InvalidOriginException: redirect is coming from a different origin. The oauth flow must be started from the same origin.

[HuiSF]

I tried to initiate a sign-in with Google or Facebook from your website, and I received redirect mismatch error. This indicates you have configuration error on the redirect URLs due mismatch. Please check whether your configuration is correct.

[AndresCi2]

Intenté iniciar sesión con Google o Facebook desde su sitio web y recibí un error de redirección no coincidente. Esto indica que tiene un error de configuración en las URL de redirección debido a una falta de coincidencia. Verifique si su configuración es correcta.

Could you confirm me if the configuration should be checked on the amplify console or my nextjs configuration. Considering if it is my nextjs this is the configuration I am using I don't know what I have wrong.

export const amplifyConfig: ResourcesConfig = {
Auth: {
Cognito: {
userPoolId: env.NEXT_PUBLIC_COGNITO_USERPOOL_ID,
userPoolClientId: env.NEXT_PUBLIC_COGNITO_CLIENT_ID,
signUpVerificationMethod: 'code',
loginWith: {
email: true,
oauth: {
redirectSignIn: [${BASE_URL}/auth/signin],
redirectSignOut: [${BASE_URL}/auth/signin],
domain: env.NEXT_PUBLIC_COGNITO_DOMAIN,
responseType: "code",
scopes: ["email", "openid", "profile", "aws.cognito.signin.user.admin", "phone"],
providers: ['Google', 'Facebook'],
},
}
}
}
};
in other file

import { amplifyConfig } from "../aws-exports";
Amplify.configure({...amplifyConfig}, { ssr: true });

[HuiSF]

As I don't have visibility into your project set up and env vars. You may try to check the following:

1. Go to Amazon Cognito console -> App Integration -> App clients and analytics -> click the client that your using -> Hosted UI
   The url listed under "Allowed callback URLs" should exactly match the string evaluated by ${BASE_URL}/auth/signin in your configuration

[AndresCi2]

Como no tengo visibilidad de la configuración de tu proyecto ni de las variables de entorno, puedes intentar comprobar lo siguiente:

1. Vaya a la consola de Amazon Cognito -> Integración de aplicaciones -> Clientes y análisis de aplicaciones -> haga clic en el cliente que está usando -> Interfaz de usuario alojada.
   La URL que aparece en "URL de devolución de llamada permitidas" debe coincidir exactamente con la cadena evaluada ${BASE_URL}/auth/signinen su configuración.

Hi, I was reviewing the steps you indicated and indeed the url of allowed calls and logout is the same as the one I am using.

[HuiSF]

Hi @AndresCi2 I attempted debugging with your website again, I saw the urls you provide for redirectSignIn and redirectSignIn contain https://www.dev.avatarqr.co/auth/signin, which doesn't match your testing website URL, this will raise the error as expected.

You would need to ensure the urls you provided match the hosting domain.

[AndresCi2]

Hola@AndresCi2Intenté depurar nuevamente su sitio web, vi las URL que proporciona redirectSignIny redirectSignIncontiene https://www.dev.avatarqr.co/auth/signin, que no coinciden con la URL de su sitio web de prueba, esto generará el error como se esperaba.

Deberá asegurarse de que las URL proporcionadas coincidan con el dominio de alojamiento.

Hello I really made a change of the url to be able to log me on the url of allowed calls and the return and I managed to redirect me to be able to log me by google the first url that I showed you did not work but with the url of the application that is the one you are mentioning if it worked for me. Now I am reviewing is the login with facebook which I have an error that the app is not active but I'm trying to validate that process thank you very much.

[HuiSF]

Hi @AndresCi2 please let us know is there anything else that we can help on the Amplify JS library side.

[AndresCi2]

Hola@AndresCi2Por favor, háganos saber si hay algo más en lo que podamos ayudar con la biblioteca Amplify JS.

hello no all is well at the moment

[HuiSF]

Thanks for the follow up, I'm closing this issue now as the original issue has been resolved.