Skip to content

Redirect to custom URL scheme does not work if it is returned directly from the URL opened with Browser.open() #2369

Open
@p-m-s-o

Description

@p-m-s-o

Bug Report

Plugin(s)

@capacitor/browser: 7.0.1

Capacitor Version

💊   Capacitor Doctor  💊

Latest Dependencies:

  @capacitor/cli: 7.2.0
  @capacitor/core: 7.2.0
  @capacitor/android: 7.2.0
  @capacitor/ios: 7.2.0

Installed Dependencies:

  @capacitor/android: not installed
  @capacitor/cli: 7.2.0
  @capacitor/ios: 7.2.0
  @capacitor/core: 7.2.0

[success] iOS looking great! 👌

Platform(s)

iOS

Current Behavior

I'm implementing an authentication flow using Auth0. At the click of a login button, the Browser plugin is used to open the Auth0 authorize endpoint, which then redirects to a custom URL scheme which is assigned to my app, where the authentication details are extracted.

The first time this happens for my user, the following flow happens:

  • The authorize endpoint is opened with the Browser plugin.
  • This returns a 302 to redirect to the Auth0 login endpoint.
  • The user enters their credentials and submits the login form, which redirects to the authorize/resume endpoint.
  • This finally returns a 302 redirect to my custom scheme, which triggers the listener in my app.

This all works fine. But if I open the authorize endpoint for a user that already has an auth session then I get this flow:

  • The authorize endpoint is opened with the Browser plugin.
  • This returns a 302 redirect to my custom scheme.
  • The Browser does not seem to deal with this - sometimes it just hangs, sometimes it hangs for a while and then throws a -1001 timeout error, sometimes it throws a -1005 no network error.

Expected Behavior

I would expect the 302 redirect to a custom URL scheme to be handled correctly whether it happens at the end of a series of interactions in the Browser, or whether it happens immediately in response to the URL that the Browser was opened with.

Code Reproduction

The following code can be used as the basis of a reproduction - it requires an Auth0 account however:

import { Browser } from '@capacitor/browser';

const auth0Config = {
    domain: 'login.mydomain.com',
    clientId: 'xxxxxxxxxx',
    audience: 'https://www.mydomain.com',
    redirectUri: 'customscheme://login-callback',
    scope: 'openid profile email'
};

export async function login() {
    try {
        const authUrl = new URL(`https://${auth0Config.domain}/authorize`);
        authUrl.searchParams.append('client_id', auth0Config.clientId);
        authUrl.searchParams.append('response_type', 'token id_token');
        authUrl.searchParams.append('scope', auth0Config.scope);
        authUrl.searchParams.append('redirect_uri', auth0Config.redirectUri);
        authUrl.searchParams.append('audience', auth0Config.audience);
        authUrl.searchParams.append('nonce', generateNonce());

        console.log("Opening browser with URL:", authUrl.toString());

        await Browser.open({
            url: authUrl.toString()
        });

        console.log("Browser opened successfully");
    } catch (error) {
        console.error("Error in login process:", error);
    }
}

function generateNonce() {
    return Math.random().toString(36).substring(2, 15) +
        Math.random().toString(36).substring(2, 15);
}

Other Technical Details

XCode Version 16.3 (16E140)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions