How to Display a Web Application with Basic Authentication in WebView using Jetpack Compose (Android)

#android #jetpack #compose #kotlin

This article shows how to display a web application with Basic Authentication in WebView using Jetpack Compose.
The sample code on this article was made with reference to the thread on StackOverflow. StackOverflow's code is written in Java, but this article shows you the sample code in kotlin.

Source Code

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{ MyWebClient(url = "https://hogehoge.hoge")}
    }
}

@SuppressLint("SetJavaScriptEnabled")
@Composable
fun MyWebClient(url: String) {

    AndroidView(factory = ::WebView,
    update = { webView ->
        webView.webViewClient = MyWebViewClient()
        webView.settings.javaScriptEnabled = true
        webView.loadUrl(url)

    })
}

// Ovverride onReceivedHttpAuthRequest in new class which extends WebViewClient().
private class MyWebViewClient: WebViewClient() {
    @Override
    override fun onReceivedHttpAuthRequest(
        view: WebView?,
        handler: HttpAuthHandler?,
        host: String?,
        realm: String?
    ) {
        if (handler != null) {
            handler.proceed("The user name to Basic Auth.", "The password to Basic Auth.")
        }
    }
}