Cookbooks
Elm
Chapter 11. HTML and the Web
Sending an HTTP request with basic authentication

Elm:
Sending an HTTP request with basic authentication

How to:

Elm makes HTTP requests using the Http package. To add basic auth, you encode the credentials and include them in the request headers.

import Http
import Base64

type alias Model = { ... }
type Msg = HttpRequestCompleted (Result Http.Error String)

-- Encode username and password
basicAuthHeader : String -> String -> Http.Header
basicAuthHeader username password =
    let
        credentials = username ++ ":" ++ password
        encodedCredentials = Base64.encode credentials
    in
    Http.header "Authorization" ("Basic " ++ encodedCredentials)

-- Make the HTTP request
sendRequestWithBasicAuth : Cmd Msg
sendRequestWithBasicAuth =
    let
        url = "https://example.com/protected/resource"
        request =
            Http.request
                { method = "GET"
                , headers = [ basicAuthHeader "myUsername" "myPassword" ]
                , url = url
                , body = Http.emptyBody
                , expect = Http.expectString (HttpRequestCompleted)
                , timeout = Nothing
                , tracker = Nothing
                }
    in
    Http.send HttpRequestCompleted request

When the above function is called, Elm will perform a GET request to the specified URL with the Authorization header set to the encoded username and password.

Deep Dive

Elm’s approach to HTTP requests is a reflection of the language’s overall philosophy: safe, easy to maintain, and understandable. The Http package encapsulates requests in a way that deals with the Elm architecture.

Basic authentication is as old as the web itself, part of the original HTTP specification (RFC 7617). It’s straightforward but not very secure since the credentials are only base64-encoded, not encrypted. Therefore, it’s critical to use HTTPS to encode the transmission.

Alternatives to basic auth include OAuth, tokens like JWT, or API keys, each coming with increased complexity and improved security. Elm supports these methods too but often requires additional packages or custom encoders and decoders.

See Also

Sending an HTTP request