Embedded Passwordless Using Auth0JS and Custom Verify Link

Help
,
1

Hello,

I am working to implement an embedded passworless phone verification flow in a react app. I am using the AuthJS Library here: Auth0.js v9 Reference

Per the docs I am doing:

  const webAuth = new auth0.WebAuth({
        domain,
        clientID: clientId,
        audience,
        redirectUri: redirect_uri,
        responseType: 'token id_token',
    });

webAuth.passwordlessStart(
            {
                connection: 'sms',
                send: 'code',
                phoneNumber: `+1${phone}`,
                responseType: 'token',
            },
            (err, res) => {
                if (err) {
                    console.log(err);
                } 
            },
        );

webAuth.passwordlessLogin(
            {
                connection: 'sms',
                phoneNumber: `+1${phone}`,
                verificationCode: code,
            },
            (err, res) => {
                if (err) {
                    console.log(err);
                } 
            },
        );

This seems to work well as-is in the browser. The issue is that there is a redirect after passwordlessLogin to auth0 and back to my domain. I am building this app for iOS and Android using capacitor. When the redirect happens it takes the user out of the app and into the mobile browser and then tries to send them back to the app again, a jarring experience.

Capacitor has a browser plugin that allows for launching a browser overlay in app and creates a better cx. I would like to trigger the redirect after passwordlessLogin in the capacitor browser instead of main device browser.

Here is my approach so far:

passwordlessLogin accepts an “onRedirect” options that fires a function before redirecting.

webAuth.passwordlessLogin(
            {
                connection: 'sms',
                phoneNumber: `+1${phone}`,
                verificationCode: code,
                onRedirecting: handleRedirect,
            },
            (err, res) => {
                if (err) {
                    console.log(err);
                } 
            },
        );

In the handleRedirect function I’m building a custom verify URL and launching that in capacitor browser.

const auth0Authentication = new auth0.Authentication({
        domain,
        clientID: clientId,
        audience,
    });
async function handleRedirect(done) {
        let redirect_uri = app_url;
        if (Capacitor.isNativePlatform()) {
            redirect_uri = `${appIdentifier}://${domain}/capacitor/${appIdentifier}/callback`;
        }

        const verfyURL = auth0Authentication.passwordless.buildVerifyUrl({
            domain,
            clientID: clientId,
            audience,
            responseType: 'token id_token',
            nonce: randomString(20),
            type: 'sms',
            redirectUri: redirect_uri,
            connection: 'sms',
            phoneNumber: `+1${phone}`,
            verificationCode: code,
        });
        if (Capacitor.isNativePlatform()) {
            await Browser.open({
                url: verfyURL,
                windowName: '_self',
            });
            CapApp.addListener('appUrlOpen', async ({url}) => {
                await Browser.close();
                let URLParams = url.replace(
                    `${appIdentifier}://${domain}/capacitor/${appIdentifier}/callback`,
                    '',
                );
            });
        } else {
            done();
        }
    }

This builds the verify URL and opens it in the Capacitor browser. The trouble is, response I get is error=unauthorized error_description= Wrong phone number or verification code. I have verified that the phone number and code are correct and properly set in the verification URL.

Here is the verification URL and response URL

Verification URL: [auth0_domain]/passwordless/verify_redirect?client_id=[client_id]&audience=[audience]&domain=[domain]&response_type=token%20id_token&nonce=R4vhCLm%2F8i4tvzUmP2xg&type=sms&redirect_uri=[redirect_uri]&connection=sms&phone_number=%2B1[phone]&verification_code=[code]&auth0Client=[client]

Response: [domain]/#error=unauthorized&error_description=Wrong%20phone%20number%20or%20verification%20code.

Am I missing an option in auth0Authentication.passwordless.buildVerifyUrl or doing something else wrong here?

Is there a way to embed passwordless phone verification without the redirect?