It seems silly to let **just anyone** modify our database, so [we've introduced authentication to our backend](https://github.com/knewter/time-tracker/tree/after_episode_267). Right now it only requires authentication to talk to the users endpoint, and it just requires logging in with `{ username = "bob", password = "secret" }`. Let's teach our Elm application to interact with this authenticated API. **NOTE: This is an exceptionally long episode. The text should be sufficient to learn how to do this, but the video contains various tiny little issues you might run into as well so that might be helpful separately.** ## Project ### Add basic bits and redirect First, let's add a field to the model to hold our API key. ```elm type alias Model = { -- ... , apiKey : Maybe String -- ... } initialModel : Maybe Route.Location -> Model initialModel location = { -- ... , apiKey = Nothing -- ... } ``` Alright, now if we have no API key we should redirect the user to a login screen: ```elm module Main exposing (..) -- ... import Route exposing (Location(Login)) -- ... urlUpdate : Maybe Route.Location -> Model -> ( Model, Cmd Msg ) urlUpdate location oldModel = let newModelWithClearedForms = { oldModel | route = location, newUserForm = (Model.initialModel Nothing).newUserForm } newModel = case newModelWithClearedForms.apiKey of Nothing -> { newModelWithClearedForms | route = Just Login } Just apiKey -> newModelWithClearedForms in newModel ! (Util.cmdsForModelRoute newModel) -- I realized that this bit was what was keeping my initial page loads from -- acting like I wanted, I think... init : Maybe Route.Location -> ( Model, Cmd Msg ) init location = urlUpdate location <| Model.initialModel location ``` We haven't got a `Login` route yet, so let's add that and handle it appropriately: ```elm module Route exposing (..) -- ... type Location = Login | Home -- ... urlFor : Location -> String urlFor loc = let url = case loc of Login -> "/login" -- ... in "#" ++ url locFor : Navigation.Location -> Maybe Location locFor path = let -- ... in case segments of [ "login" ] -> Just Login -- ... ``` Of course our `View` needs to handle this page: ```elm module View exposing (view) -- ... import View.Login -- ... body : Model -> Html Msg body model = let _ = Debug.log "model: " model in case model.route of Just (Route.Login) -> View.Login.view model -- ... ``` And we'll make a new view for this: ```sh vim src/View/Login.elm ``` ```elm module View.Login exposing (view) import Model exposing (Model) import Msg exposing (Msg) import Html exposing (Html, text) view : Model -> Html Msg view model = text "login ok?" ``` OK so now if you try to visit any page you'll be redirected to the login view since we don't have an API Key in the model by default. However, the URL doesn't change appropriately. Let's update the URL to reflect that you're on the login page as well: ```elm module Main exposing (..) -- ... urlUpdate : Maybe Route.Location -> Model -> ( Model, Cmd Msg ) urlUpdate location oldModel = let newModelWithClearedForms = { oldModel | route = location, newUserForm = (Model.initialModel Nothing).newUserForm } ( newModel, loginRedirectCmd ) = case newModelWithClearedForms.apiKey of Nothing -> case newModelWithClearedForms.route of Just Login -> newModelWithClearedForms ! [] _ -> { newModelWithClearedForms | route = Just Login } ! [ Navigation.modifyUrl (Route.urlFor Login) ] Just apiKey -> newModelWithClearedForms ! [] in ( newModel , Cmd.batch <| loginRedirectCmd :: (Util.cmdsForModelRoute newModel) ) ``` ### Login View OK, now we can move on to the login view itself. We know it will contain a form that holds a username and a password, so let's add a form for it to the Model: ```elm module Model exposing (Model, initialModel) -- ... type alias Model = { -- ... , loginForm : FormWithErrors ( String, String ) -- ... } initialModel : Maybe Route.Location -> Model initialModel location = { -- ... , loginForm = ( Form.initial [] Validators.validateLoginForm, Nothing ) -- ... } ``` ```elm module Validators exposing (validateNewUser, validateNewOrganization, validateNewProject, validateLoginForm) import Form.Validate exposing (Validation, form1, form2, get, string) -- ... validateLoginForm : Validation String ( String, String ) validateLoginForm = form2 (,) (get "username" string) (get "password" string) ``` That'll compile, and now we have to add a `Msg` to update our login form: ```elm module Msg exposing (Msg(..), UserMsg(..), ProjectMsg(..), OrganizationMsg(..), LoginMsg(..)) -- ... type Msg -- ... | LoginMsg' LoginMsg -- ... type LoginMsg = LoginFormMsg Form.Msg | LoginSucceeded String | LoginFailed OurHttp.Error -- ... ``` ```elm module Update exposing (update) -- ... import Msg exposing (Msg(..), UserMsg(..), ProjectMsg(..), OrganizationMsg(..), LoginMsg(..)) -- ... update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case Debug.log "msg: " msg of -- ... LoginMsg' msg -> updateLoginMsg msg model -- ... updateLoginMsg : LoginMsg -> Model -> ( Model, Cmd Msg ) updateLoginMsg msg model = case msg of LoginFormMsg formMsg -> case ( formMsg, Form.getOutput (fst model.loginForm) ) of ( Form.Submit, Just ( username, password ) ) -> model ! [ API.login model ( username, password ) (LoginMsg' << LoginFailed) (LoginMsg' << LoginSucceeded) ] _ -> { model | loginForm = ( Form.update formMsg (fst model.loginForm) , snd model.loginForm ) } ! [] LoginSucceeded apiKey -> model ! [] |> andLog "Login success" apiKey LoginFailed error -> model ! [] |> andLog "Login failed" (toString <| decodeError error) ``` Then we'll have to add support for logging in to our API: ```elm module API exposing ( login -- ... ) -- ... login : Model -> ( String, String ) -> (Error -> Msg) -> (String -> Msg) -> Cmd Msg login model loginForm errorMsg msg = post model "/sessions" (encodeLoginForm loginForm) (JD.succeed "foo") errorMsg msg -- ... encodeLoginForm : ( String, String ) -> JE.Value encodeLoginForm ( username, password ) = JE.object [ ( "username", JE.string username ) , ( "password", JE.string password ) ] -- ... ``` So this is weird. Here, I already know that the body of our response isn't important but that's all we can do something with. We'll actually need to extract some details from the header in order to get our JSON Web Token. For now, this should keep us moving. Next, we'll add the view itself, finally... ```elm module View.Login exposing (view) import Model exposing (Model) import Msg exposing (Msg(..), LoginMsg(..)) import Html exposing (Html, text, div, form, a, button, label) import Html.Attributes exposing (href, class) import Html.Events exposing (onClick) import Material.Button as Button import Material.Textfield as Textfield import Material.Options as Options import Material.Grid exposing (grid, size, cell, Device(..)) import Form exposing (Form) import Form.Field import Form.Input import Form.Error import OurForm view : Model -> Html Msg view model = grid [] [ cell [ size All 12 ] [ usernameField model ] , cell [ size All 12 ] [ passwordField model ] , cell [ size All 12 ] [ submitButton model ] ] usernameField : Model -> Html Msg usernameField model = let ( form, apiErrors ) = model.loginForm username = Form.getFieldAsString "username" form |> OurForm.handleAPIErrors apiErrors in Textfield.render Mdl [ 7, 0 ] model.mdl ([ Textfield.label "Username" , Textfield.floatingLabel , Textfield.text' , Textfield.value <| Maybe.withDefault "" username.value , Textfield.onInput <| tagged << (Form.Field.Text >> Form.Input username.path) , Textfield.onFocus <| tagged <| Form.Focus username.path , Textfield.onBlur <| tagged <| Form.Blur username.path ] ++ OurForm.errorMessagesForTextfield username ) passwordField : Model -> Html Msg passwordField model = let ( form, apiErrors ) = model.loginForm password = Form.getFieldAsString "password" form |> OurForm.handleAPIErrors apiErrors in Textfield.render Mdl [ 7, 1 ] model.mdl ([ Textfield.label "Password" , Textfield.floatingLabel , Textfield.password , Textfield.value <| Maybe.withDefault "" password.value , Textfield.onInput <| tagged << (Form.Field.Text >> Form.Input password.path) , Textfield.onFocus <| tagged <| Form.Focus password.path , Textfield.onBlur <| tagged <| Form.Blur password.path ] ++ OurForm.errorMessagesForTextfield password ) submitButton : Model -> Html Msg submitButton model = Button.render Mdl [ 7, 2 ] model.mdl [ Button.raised , Button.ripple , Button.colored , Button.onClick <| tagged Form.Submit ] [ text "Submit" ] tagged : Form.Msg -> Msg tagged = LoginMsg' << LoginFormMsg ``` ### Handling the response header If we open up the developer tools and attempt to login with bad credentials (i.e. anything other than username "bob" with password "secret"), we get a "400 Bad Request" (instead of the 401 we should get) because I didn't actually test logging in with bad credentials in the backend. It's not hugely important here, but we'd expect a 401. Anyway, if we log in with appropriate credentials, we see we get an "Authorization" header back with a token in it. This is what we should be storing in our model. But how can we get at it? The answer lies in abandoning our `post` request entirely and falling down lower to `Http.send`: **(WARNING: Brief dead end ahead)** ```elm module API -- ... login : Model -> ( String, String ) -> (OurHttp.Error -> Msg) -> (String -> Msg) -> Cmd Msg login model loginForm errorMsg msg = let handleSuccessMsg : Http.Response -> Msg handleSuccessMsg response = case Dict.get "authorization" response.headers of Just auth -> msg auth Nothing -> let _ = Debug.log "zomg why did we not have a good header if this call succeeded?" response in NoOp in rawPost model "/sessions" (encodeLoginForm loginForm) (OurHttp.promoteError >> errorMsg) handleSuccessMsg rawPost : Model -> String -> JE.Value -> (Http.RawError -> Msg) -> (Http.Response -> Msg) -> Cmd Msg rawPost model path encoded errorMsg msg = Http.send Http.defaultSettings { verb = "POST" , url = model.baseUrl ++ path , body = Http.string (encoded |> JE.encode 0) , headers = [ ( "Content-Type", "application/json" ) ] } |> Task.perform errorMsg msg -- ... ``` ```elm module OurHttp exposing (fromJson, promoteError, Error(..)) -- ... ``` This sort of works...except it's useless. Since we're making a Cross-Origin request, [we cannot get at this header in the HTTP response at all!](http://stackoverflow.com/questions/7462968/restrictions-of-xmlhttprequests-getresponseheader) So we'll just fall back to a post that knows how to extract the token from the response, and we'll make our backend send it in the response body: ```elm login : Model -> ( String, String ) -> (Error -> Msg) -> (String -> Msg) -> Cmd Msg login model loginForm errorMsg msg = post model "/sessions" (encodeLoginForm loginForm) ("token" := JD.string) errorMsg msg ``` There's a tiny bit of elixir to fix our API up: ```sh vim ../time_tracker_backend/web/controller/session_controller.ex ``` ```elixir def create(conn, %{"username" => "bob", "password" => "secret"}) do # ... new_conn |> put_resp_header("authorization", "Bearer #{jwt}") |> put_resp_header("x-expires", "#{exp}") |> json(%{ data: %{ token: jwt } }) end def create(conn, _) do conn |> put_status(:unauthorized) |> json("UNAUTHORIZED") end ``` OK, now we should get the token back in the case of a successful request. Let's go ahead and store it in our `apiKey` field when logins work: ```elm module Update exposing (update) updateLoginMsg : LoginMsg -> Model -> ( Model, Cmd Msg ) updateLoginMsg msg model = case msg of -- ... LoginSucceeded apiKey -> { model | apiKey = Just apiKey } ! [] |> andLog "Login success" apiKey -- ... ``` With that, once we've logged in we can navigate to the rest of the site. However, now we'll notice that we don't get any of the users in our table and we can no longer create them, though other resources work fine. This is because the users resource requires authorization now. ### Sending our API Key If we send the token along with our API keys in the "authorization" header, things should Just Work. Let's try that out. First, we'll factor out the `send` request bits so that we can have a single place that we start adding the API Key in, and we'll make `get` use `send` behind the scenes: ```elm module API -- ... defaultRequest : Model -> String -> Http.Request defaultRequest model path = { verb = "GET" , url = model.baseUrl ++ path , body = Http.empty , headers = [ ( "Content-Type", "application/json" ) ] } get : Model -> String -> JD.Decoder a -> (Http.Error -> Msg) -> (a -> Msg) -> Cmd Msg get model path decoder errorMsg msg = Http.send Http.defaultSettings (defaultRequest model path) |> Http.fromJson ("data" := decoder) |> Task.perform errorMsg msg post : Model -> String -> JE.Value -> JD.Decoder a -> (OurHttp.Error -> Msg) -> (a -> Msg) -> Cmd Msg post model path encoded decoder errorMsg msg = let request = defaultRequest model path in Http.send Http.defaultSettings { request | verb = "POST" , body = Http.string (encoded |> JE.encode 0) } |> OurHttp.fromJson ("data" := decoder) |> Task.perform errorMsg msg delete : Model -> String -> (Http.RawError -> Msg) -> Msg -> Cmd Msg delete model path errorMsg msg = let request = defaultRequest model path in Http.send Http.defaultSettings { request | verb = "DELETE" } |> Task.perform errorMsg (always msg) put : Model -> String -> JE.Value -> JD.Decoder a -> (OurHttp.Error -> Msg) -> (a -> Msg) -> Cmd Msg put model path encoded decoder errorMsg msg = let request = defaultRequest model path in Http.send Http.defaultSettings { request | verb = "PUT" , body = Http.string (encoded |> JE.encode 0) } |> OurHttp.fromJson ("data" := decoder) |> Task.perform errorMsg msg ``` Next, we'll handle the API Key itself: ```elm module API -- ... defaultRequest : Model -> String -> Http.Request defaultRequest model path = let conditionalHeaders = case model.apiKey of Nothing -> [] Just apiKey -> [ ( "Authorization", "Bearer " ++ apiKey ) ] in { verb = "GET" , url = model.baseUrl ++ path , body = Http.empty , headers = [ ( "Content-Type", "application/json" ) ] ++ conditionalHeaders } ``` With this, we can now see the list of users when we click into the tab, and we can do things to them. ## Summary In today's episode we built a login form and added an `apiKey` to our model. We then captured that `apiKey` on login, and used it in subsequent API calls. This isn't the last word though. Our `apiKey` will become invalid at some point, so we should probably clear it out in that case and navigate to login. Or we could keep the username and password around and quasi-transparently request a new one in the event of a 401 and make the request again for the user. We'll deal with these at some ambiguous future date. I hope you enjoyed it. See you soon! ## Resources - [knewter/time-tracker tagged with `before_episode_023.2`](https://github.com/knewter/time-tracker/tree/before_episode_023.2) - [knewter/time-tracker tagged with `after_episode_023.2`](https://github.com/knewter/time-tracker/tree/after_episode_023.2) - [Oops turns out we can't get the Authorization header in a CORS request](http://stackoverflow.com/questions/7462968/restrictions-of-xmlhttprequests-getresponseheader) - This is why I had to take a detour to make the backend send it to us, sorry!