Socal Provider OAuth doesn't work from within a webview based Android/iOS app

[blefevre]

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

Vue

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

Other

Environment information

# Put output below this line

Describe the bug

Currently OAuth cannot be used in an Android/iOS app built using an embedded webview such as Capacitor.

Calling signInWithRedirect results in the following error from getRedirectUrl:

redirect is coming from a different origin. The oauth flow needs to be initiated from the same origin.

This is because the webview is hosted at https://localhost/ while the redirect is pointed to a different origin and redirected back to the app using the platform specific features Universal links (iOS) or App Links (Android).

It seems like there is already a workaround in place specifically for React Native in the form of getRedirectUrl.native.ts which doesn't include the origin checks that the default function does.
I would expect the ability to opt-out of these checks to be available for other Webview in Native App platforms.

Expected behavior

signInWithRedirect should allow a user to opt-in to the React Native version of the getRedirectUrl function, allowing OAuth for apps running in a WebView where the origin will be different.

Reproduction steps

1. Create a Capacitor App with Amplify Auth
2. Setup OAuth with a redirect that is anything except localhost.
3. Run the Capacitor App on a device.
4. Call signInWithRedirect('your-provider')

Code Snippet

No response

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

{
  Auth: {
    Cognito: {
      userPoolId: import.meta.env.VITE_USER_POOL_ID,
      userPoolClientId: import.meta.env.VITE_CLIENT_ID,
      signUpVerificationMethod: "code",
      loginWith: {
        username: true,
        email: true,
        oauth: {
          domain: import.meta.env.VITE_AUTH_DOMAIN,
          scopes: ["email", "openid", "profile", "aws.cognito.signin.user.admin"],
          redirectSignIn: ["https://redacted.com"],
          redirectSignOut: ["https://redacted.com"],
          responseType: "code",
          providers: ["Facebook", "Google", "Apple"],
        },
      },
    },
  }
}

Additional configuration

No response

Mobile Device

Google Pixel 6 Pro

Mobile Operating System

Android 14

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[rmsphd]

I have the same issue using SAML provider

[cwomack]

Hello, @blefevre and thank you for creating this issue. Are you able to share the frontend code that's calling signInWithRedirect as well as confirm that the redirect URL's in your config align with what's in the Cognito console for the User Pool?

[blefevre]

Hi @cwomack,

signInWithRedirect is called like so:

const error = ref<unknown>(null);

const handleExternalSignIn = async (provider: SignInWithRedirectInput["provider"]) => {
  try {
    await signInWithRedirect({ provider });
  } catch (err) {
    error.value = err;
  }
};

and the redirect URLs do match, sign in works successfully when invoked from web as the origin is able to be the same as the redirect URL.

The issue is that Capacitor or similar frameworks host the page at localhost and then display it in a Webview so this check fails as the origins don't match.

[cwomack]

@blefevre, this appears to be related to #12890. We are tracking a fix to both signInWithRedirect and signOutWithRedirect API's there and will consolidate this issue into that one. Please follow #12890 for updates on a fix.