How to add referrer in an ionic capacitor app

[manish1408]

I am using web3auth in an ionic capacitor app. However, the redirect popup does not work and shows up blank.
On checking the console logs with the iOS simulator it shows OpenLogin - RPC Error: redirectUrl is not on origin.

I have tried to whitelist the below URLs:
://auth
ionic://auth
https://app.openlogin.com
ionic:/
capacitor://localhost
capacitor://auth

But none of these work

How should we add a referer or add a redirectURL?

[dhruv500]

Hey @manish1408 your whitelist url will be your bundle Identifier for your iOS app followed by ://auth so something like this (xyz://auth) where xyz is your bundle Identifier which can be found in Targets -> General

[dziedziela]

is there a way to pass the origin URL manually from code?

[dhruvTor]

Could you give me access to the code so that i can check exactly what's the issue

[dziedziela]

Would it be possible to schedule a call so we can screen share the existing solution as there are quite a few parts to consider?

[dhruvTor]

sure
https://calendly.com/dhruv-jaiswal

[dziedziela]

Booked for Monday, thank you!

[himanshuchawla009]

Openlogin cannot verify mobile origins, so you need to host a webpage for your app which and pass the URL of that webpage in the openloginAdapter loginSettings param as shown below and from you webpage, you can redirect to your mobile app.

The flow will look like this:-

Your app (using web3auth sdk) =>(Redirects to) => Openlogin.com (user will complete login here) => (After login, Redirects to your webpage) => Your hosted webpage =>(Redirects to) => Your IONIC app

Sample Code:-

const openloginAdapter = new OpenloginAdapter({
"loginSettings": {
   "redirectUrl": "your web page url"
}
})

web3auth.configureAdapter(openloginAdapter)

Note: You will need to whitelist your webpage url rather thn mobile app uri in this case.

[manish1408]

Hello, @himanshuchawla009 Thank you for helping us out.

I am facing yet another issue after the redirect. The popup on the page after the redirect does not seem to close automatically. I have to exit the app and click on the login button again to get the wallet connected.

Do you have any idea about this behavior?

I am getting this response after the redirect https://domain.com/assets/redirect.html#result=eyJzdG9yZSI6eyJ0b3VjaElEUHJlZmVyZW5jZSI6ImRpc2FibGVkIiwiYXBwU3RhdGUiOiIiLCJlbWFpbCI6Im1nYXV0YW1AZmFuY3VydmUuY28iLCJhZ2dyZWdhdGVWZXJpZmllciI6InRrZXktZ29vZ2xlIiwibmFtZSI6Ik1hbmlzaCBHYXV0YW0iLCJwcm9maWxlSW1hZ2UiOiJodHRwczovL2xoMy5nb29nbGV1c2VyY29udGVudC5jb20vYS0vQUZkWnVjcklqSXBrM0tEbThQSW0wUjE5bDMtb25vS0pKZ2kwV1h3czhfbkg9czk2LWMiLCJ0eXBlT2ZMb2dpbiI6Imdvb2dsZSIsInZlcmlmaWVyIjoidG9ydXMiLCJ2ZXJpZmllcklkIjoibWdhdXRhbUBmYW5jdXJ2ZS5jbyIsImRhcHBTaGFyZSI6IiIsIm9BdXRoSWRUb2tlbiI6IiIsIm9BdXRoQWNjZXNzVG9rZW4iOiIiLCJpZFRva2VuIjoiZXlKaGJHY2lPaUpGVXpJMU5pSXNJblI1Y0NJNklrcFhWQ0lzSW10cFpDSTZJbFJaVDJkblh5MDFSVTlGWW14aFdTMVdWbEpaY1ZaaFJFRm5jSFJ1Wmt0V05EVXpOVTFhVUVNd2R6QWlmUS5leUpwWVhRaU9qRTJOakUwTVRRME1UTXNJbUYxWkNJNklrSkdOelZpVW5sdmRIQmpRMVkxZUVOUFEzQnNUR1JxV0RWV05WVkpTbmRWTWpORFZYQjVWWGxsU1daVE1tSmlTRVpwUWtGbFpuUjBUV1o0ZUdaMlkycEZSblIwZEdSMVEwcEtObTFwWnpObFZsaHZkWEo2TkNJc0ltNXZibU5sSWpvaU1ESmtZMll4TlRCaVpUbGlOelF3TkdJNU9EZGtOalE1WlRRNU1ESXhORFpsWWpWaU9EUmtPVEJqWkRFMU5ETTBORGRrTmpoaU1ETTVaalF3TUdJMFpERXlJaXdpYVhOeklqb2lhSFIwY0hNNkx5OWhjR2t1YjNCbGJteHZaMmx1TG1OdmJTSXNJbmRoYkd4bGRITWlPbHQ3SW5CMVlteHBZMTlyWlhraU9pSXdNalJrWTJNMU1XSTFOemcwWVRKaU1EYzBZalpsTVRGaE0yTTJOMlJoTUdKa016WXlPR1l3TTJZd1pXUmlNelF5WVRZM1ltVmpZVEZtT0RneU56TTBPVGNpTENKMGVYQmxJam9pZDJWaU0yRjFkR2hmWVhCd1gydGxlU0lzSW1OMWNuWmxJam9pYzJWamNESTFObXN4SW4xZExDSmxiV0ZwYkNJNkltMW5ZWFYwWVcxQVptRnVZM1Z5ZG1VdVkyOGlMQ0p1WVcxbElqb2lUV0Z1YVhOb0lFZGhkWFJoYlNJc0luQnliMlpwYkdWSmJXRm5aU0k2SW1oMGRIQnpPaTh2YkdnekxtZHZiMmRzWlhWelpYSmpiMjUwWlc1MExtTnZiUzloTFM5QlJtUmFkV055U1dwSmNHc3pTMFJ0T0ZCSmJUQlNNVGxzTXkxdmJtOUxTa3BuYVRCWFdIZHpPRjl1U0Qxek9UWXRZeUlzSW5abGNtbG1hV1Z5SWpvaWRHOXlkWE1pTENKMlpYSnBabWxsY2tsa0lqb2liV2RoZFhSaGJVQm1ZVzVqZFhKMlpTNWpieUlzSW1GblozSmxaMkYwWlZabGNtbG1hV1Z5SWpvaWRHdGxlUzFuYjI5bmJHVWlMQ0psZUhBaU9qRTJOakUxTURBNE1UTjkucTJwd2hGbVN5UnF0dlpfTHF1Q2VndTZjdkN5SUZpQ21Jc1p1Ymx3Y09xMldWNXpQcWxKTkxEZWtHVFJGeHN6UDc1YjZ6LVhqQmhCSHI1ZXM5c1JyOHcifSwicHJpdktleSI6IjI0MjEzYWQyNWI2NDdiNDIwOGRhMjFlNWE4OTFlNjMwYmRlNjgwMDlkMTYyODFlNDc2ODlhYThmMDFlMjI1NzciLCJlZDI1NTE5UHJpdktleSI6IjI0MjEzYWQyNWI2NDdiNDIwOGRhMjFlNWE4OTFlNjMwYmRlNjgwMDlkMTYyODFlNDc2ODlhYThmMDFlMjI1NzdmMzcyODljOWNlMGJlZjA0N2VhMGViZWI0MzEwZTA4Y2Y0ZTkxOWE4NDhkYzYwOTA2YTE0NGZlNjYyMTg3YTAxIn0&_pid=5447a75f367a8b8cfb8e874749d14a204372e69270ed17a999b563235ae87046&sessionId=928b23e66e7fda95d1bc66116d94b6724f6c0179f46078904d9e23cf389ef1aa

[BennyG93]

The flow will look like this:-

Your app (using web3auth sdk) =>(Redirects to) => Openlogin.com (user will complete login here) => (After login, Redirects to your webpage) => Your hosted webpage =>(Redirects to) => Your IONIC app

@himanshuchawla009 Do you have an example of what this redirection code might look like?

I am having a similar problem, we created a web app using Nextjs and have used this as a base for a capacitor mobile application. We are using Web3Auth Modal web SDK in redirection mode. The authentication flow is working fine, however when the user is redirected back to the application URL, it opens in the mobile browser instead of reopening the app.

Our code:

const openloginAdapter = new OpenloginAdapter({
      adapterSettings: {
        network: network,
        clientId: WEB3AUTH_CLIENT_ID,
        uxMode: 'redirect',
        redirectUrl: "https://example.com/dashboard",
     },
});

Capacitor has some documentation about deep-linking between web and mobile apps which seems similar to the flow you describe -> https://capacitorjs.com/docs/guides/deep-links