Simple Elm app with Google authentication via ports

Here’s my first real use of ports in an Elm application. It’ll be light on the commentary, heavy on code.

Overview

This example will use the Google API client for JavaScript to perform OAuth2 authentication using a user’s Google credentials. This will integrate into an Elm application using ports. Specifically:

We’ll define some outgoing ports in order to call JavaScript functions from Elm
We’ll define some incoming ports to take callbacks from JavaScript into Elm
These will be defined in Interop.elm

There’ll be a small amount of JavaScript glue code in index.js which will take care of marshalling the ports to and from JavaScript functions.

On the Elm side of things, the application will provide the bare minimum components to display the results of these calls via the ports mechanism to the user.

Note that I use the following packages/tools in this project:

NoRedInk/elm-decode-pipeline: This simplifies decoding of JSON data structures from ports
elm-live: This application combines HTML, JavaScript and Elm components which the standard Elm development server, elm-reactor, only barely copes with after some cajoling: elm-live does a good job of handling something closer to real apps and has live reloading too!

The application can be run by typing make at the command line:

Downloads jQuery locally
Runs the app using elm-live

`.gitignore`

Ignores some generated files
Ignores assets such as the Google API client ID and jQuery

You’ll need to create your google-api-client-id.txt file by grabbing your Google API client ID after consulting the following resources:

`elm-package.json`

Defines package metadata including description and Git repo
Defines dependencies

This file is typically updated using the elm-package command.

`index.html`

Brings in scripts including jQuery, Elm compiler output and application JavaScript
Contains empty <body> element where Elm application is rendered

`index.js`

This is the main JavaScript application code:

Uses strict mode using "use strict"; because you should always do this!
Stubs out Elm port endpoints in order to produce useful runtime errors if ports with no subscriptions are called
Wraps some things like loading scripts in JavaScript promises to make them easier and more elegant to compose
Subscribes to Google authentication callbacks and hooks them up to Elm subscriptions via ports

`Interop.elm`

Defines the outgoing and incoming ports

`Main.elm`

Defines standard Elm main function

`Makefile`

Downloads jQuery
Runs the app

`Model.elm`

Defines simple data model
Tracks authentication data supplied via ports
Defines a simple message field for displaying error messages to the user

`Msg.elm`

Defines the Elm Msg type
NativeError is used to report errors back from JavaScript
AuthStateChanged is fired whenever the user signs in or out
SignInClicked is triggered when the user clicks the sign-in button
SignOutClicked is triggered when the user clicks the sign-out button

`Subscriptions.elm`

Handles incoming port calls from JavaScript
Decodes the different payloads using elm-decode-pipeline

`Update.elm`

Defines the standard update function for updating the state of the app

`View.elm`

Renders a simple view that displays the state of the app

Repository

Check out the full project here.

blog.rcook.org

Simple Elm app with Google authentication via ports

2018-06-15

Overview

`.gitignore`

`elm-package.json`

`index.html`

`index.js`

`Interop.elm`

`Main.elm`

`Makefile`

`Model.elm`

`Msg.elm`

`Subscriptions.elm`

`Update.elm`

`View.elm`

Repository

Tags

Elm

Google

JavaScript

Promise

jQuery

Ports

Interoperability