Simple Elm app with Google authentication via ports

2018-06-15

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:

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:

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

.gitignore

You’ll need to create your google-api-client-id.txt file by grabbing your Google API client ID after consulting the following resources: * Creating and managing projects * Setting up OAuth 2.0

elm-package.json

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

index.html

index.js

This is the main JavaScript application code:

Interop.elm

Main.elm

Makefile

Model.elm

Msg.elm

Subscriptions.elm

Update.elm

View.elm

Repository

Check out the full project here.

Tags: Elm, Google, JavaScript, Promise, jQuery, Ports, Interoperability

All content © 2018 Richard Cook. All rights reserved.