Customizing WebView in Web3Auth PnP React Native SDK

[sumitsainicbl24]

I’m currently working with the Web3Auth Plug and Play (PnP) React Native SDK and have a question regarding customization of the WebView during the login process.

Details:

SDK Version: "@web3auth/react-native-sdk": "^8.1.0"
Platform: React Native (iOS & Android)

Web3Auth Initialization and Login Code:

const loginData = await web3auth.login({
loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
extraLoginOptions: {
login_hint: email,
},
});

I would like to know:

1. Is it possible to customize the default WebView UI provided during this login flow?
2. Alternatively, is there a way to directly obtain the login URL so I can render it using a custom WebView component?

Any guidance on this would be greatly appreciated.

[w3abot]

Hi Sumit,

Thank you for reaching out to the Web3Auth community! It’s great to see you’re diving into the customization of the Web3Auth Plug and Play React Native SDK.

Based on your query, here’s how you can proceed:

1. Customization of WebView UI: As of the current version ^8.1.0, the WebView used during the login flow is integrated within the SDK and doesn’t offer direct customization options out of the box. However, you can work around this by capturing the URL and handling the WebView implementation yourself.

2. Obtaining the Login URL: If you need to use a custom WebView component, you might want to explore using the open-login feature directly. Though the SDK doesn’t currently expose the login URL directly for custom handling, you can consider using the redirect method and handling the login externally. For more advanced customization involving URL handling, you might need to handle the OAuth flow directly in your application. For detailed guidance on customizing OAuth flows, you can look into Web3Auth’s Guides on Custom Auth.

For further assistance, feel free to dive into our Developer Documentation or continue the discussion in the Web3Auth Community Forum where other developers may share insights from similar experiences.

If you have any more questions or need clarification on specific parts of your implementation, do let me know!

Best,
[Your Name]

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

[maharshi]

Hey @sumitsainicbl24,

Just a heads-up — the Plug and Play React Native SDK doesn’t come with a pre-built modal like the Web SDK does. It’s designed to use native UI elements, so you’ll need to build your own login screen.

Also, avoid wrapping the flow in a WebView — especially for providers like Google. They block logins on disallowed user agents, and you’ll run into a 403: disallowed_useragent error if you try.

So yes, unlike the Web modal, there’s no built-in login UI here — the SDK gives you the primitives, and you’re free to design the flow however you like.