Ability to customize url opening method to allow sign-in through in-app browser with cordova in amplify-js@v6

Is this related to a new or existing framework?

Angular

Is this related to a new or existing API?

Authentication

Is this related to another service?

No response

Describe the feature you'd like to request

We’re trying to add authentication through social providers (Google) in a cordova web application (written in angular).

We’re using amplify-js@v6 which removed support for the customisation of the url opening method: urlOpener

Unless we’re mistaken, Google removed the support for authentication through a webview (a while ago), thus the “hard-coded” redirection (through openAuthSession in signInWithRedirect) does not work in webview contexts. The recommended way seems to be through an in-app browser, but we would need to retrieve the oAuthUrl first, which does not seem possible at the moment through your library.

Do you have any material documenting oAuth authentication and cordova with amplify-js@v6? It seems you have plans regarding the signInWithRedirect method but that's all I could find, would it be possible to elaborate on this subject?

Describe the solution you'd like

We'd like to be able to configure the signInWithRedirect interaction to open an in-app browser instead.

Or at least :

• to be able to generate the url ourselves (with the code challenge and state stored, etc...)
• or to be able to intercept and prevent the location.hrefredirection (and open the in-app browser in userland code).

Describe alternatives you've considered

Unfortunately, we would consider other providers, such as Firebase which provides explicit Cordova guidance

Additional context

No response

Is this something that you'd be interested in working on?

• [X] 👋 I may be able to implement this feature request
• [ ] ⚠️ This feature might incur a breaking change

Hello, @QuentinFchx 👋. We appreciate you creating this issue and will mark it as a feature request to be reviewed with the team. I believe there may be some similar issues in the repo as well, so I'll try to link them to ensure we have broader context for how to implement this feature.

I have the same problem stopping me from upgrading to Amplify@6. We use Capacitor and need to use the Capacitor Browser for federated sign-in. The urlOpener option was critical for that. Is there any expectation that a solution for this will be provided, or is there already one I might just not know about?

Hi, same problem here. I am currently on [email protected] in a react web app and cannot upgrade to amplify@6. Here’s how I had it working before: https://gist.github.com/mrcoles/852e92a555e1f29116d91082b3a616c0

Hi @mrcoles ,

Thanks for reporting. We will give you an update once we have a result.

Thanks @yuhengshs — FWIW I just realized I had a PR related to this too back in 2019, which got auto-closed by the stale bot https://github.com/aws-amplify/amplify-js/pull/2749

Any updates on this? This is currently a blocker for any iOS app submissions as exiting out of the app for login is not accepted

Hi @pavellazar, can you share the exact messaging from Apple regarding the App Store submission rejection?

While this was not an supported use case even for v5, we understand that it was still possible. We plan to evaluate whether the feature request for customizing urlOpener is something that we will be able to accommodate in v6 and will follow up here with any update.

sure

Guideline 4.0 - Design

We noticed that the user is taken to the default web browser to sign in or register for an account, which provides poor user experience.

Next Steps

To resolve this issue, please revise your app to enable users to sign in or register for an account in the app.

You may also choose to implement the Safari View Controller API to display web content within your app. The Safari View Controller allows the display of a URL and inspection of the certificate from an embedded browser in an app so that customers can verify the webpage URL and SSL certificate to confirm they are entering their sign in credentials into a legitimate page.

Resources

- For additional information on the Safari View Controller API, please review the [What's New in Safari](https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Introduction/Introduction.html) webpage.

I got around with a patch, a suggestions somewhere on this or a related ticket:

#!/bin/bash

# Define the source file
SOURCE_FILE="./patches/openAuthSession.mjs"

# Find the target file in node_modules
TARGET_FILE=$(find ./node_modules -name openAuthSession.mjs)

# Check if the source file exists
if [ ! -f "$SOURCE_FILE" ]; then
  echo "Source file $SOURCE_FILE does not exist."
  exit 1
fi

# Check if the target file exists
if [ -z "$TARGET_FILE" ]; then
  echo "Target file openAuthSession.mjs not found in node_modules."
  exit 1
fi

# Replace the target file with the source file
for file in $TARGET_FILE; do
  echo "Replacing $file with $SOURCE_FILE"
  cp "$SOURCE_FILE" "$file"
done

echo "Patch applied successfully."

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { Browser } from '@capacitor/browser';
import { Capacitor } from '@capacitor/core';

const openAuthSession = async (url) => {
    if (!window?.location) {
        return;
    }
    
    const secureUrl = url.replace('http://', 'https://');
    if (Capacitor.isNativePlatform()) {
      await Browser.open({ url: secureUrl });
    } else {
      window.location.href = secureUrl;
    }
    
};

export { openAuthSession };
//# sourceMappingURL=openAuthSession.mjs.map

"build": "pnpm run-patches && ionic build",
"run-patches": "bash patches/run-patches.sh",

I've tried implementing urlOpener in React Native and unfortunately I'm getting RangeError, as Amplify's deepFreeze is looping infinitely over the function as function prototypes point to the function's themselves. I'm guessing even if that wasn't the case there isn't support.

@tmaly1980 , thanks for reporting this! we'll try to reproduce this in React Native. What version of React Native are you using?