GitHunt
CH

chris/elm-lambda-oauth-boilerplate

Boilerplate for doing OAuth with an Elm front end, and AWS Lambda backend app.

Elm Lambda OAuth Boilerplate

This repo is a mono-repo, containing both the frontend and backend code for a basic boilerplate
that does OAuth for an Elm application, using an
AWS Lambda function for the OAuth callback handler.

Please note I'm still new to Elm (feel free to provide feedback or PR's). This is not meant
to be production code, but shows the feasibility of this approach. I wanted to explore the
idea of a super low-cost, low traffic application. By hosting the frontend code on S3, that's
extremely cheap, and then the use of a Lambda function essentially makes the backend free
(less than 1 million requests per month is free). This approach can of course also yield nice
savings for a high traffic application as well.

This sample uses Strava as the OAuth provider.

The Elm application is deployed as static JavaScript, and redirects users to Strava to
authenticate. It specifies the URL to an AWS Lambda function as the OAuth callback. That callback,
will then redirect back to the Elm application, passing it a JWT token if authentication was
successful. The Elm application will then save the JWT token to local storage, as well as remove
it from the URL so that it doesn't get bookmarked or have the user wonder about it. This is NOT a
security measure, it's more about having a nice UX.

Note, you should be able to use any OAuth 2 compliant service to do auth. You will just need to
change the URL the Elm app redirects to if you don't use Strava.

This system uses the Serverless framework for implementation and
deployment of the AWS Lambda function.

To use this or try it out yourself:

  1. Setup an application on Strava (or your authentication system of choice).
  2. Configure the OAuth keys in server/env.yml.
  3. Configure the frontend application URL in server/env.yml. Note you can use localhost:8080,
    for a locally running frontend app.
  4. Create a key to be used for JWT encoding, and set this in server/env.yml.
  5. Configure your IAM user in serverless.yml (and add any other configuration your account may
    need here in order for Serverless to deploy.)
  6. Configure an AWS role to support Serverless deploy. Your user will need to have the
    AWSLambdaFullAccess policy, as well as:
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "Stmt1478749816000",
                "Effect": "Allow",
                "Action": [
                    "cloudformation:*",
                    "iam:CreateRole",
                    "iam:DeleteRolePolicy",
                    "iam:GetRole",
                    "iam:PutRolePolicy",
                    "apigateway:*"
                ],
                "Resource": [
                    "*"
                ]
            }
        ]
    }
    
  7. Deploy the Lambda function (from within the server directory) using serverless deploy.
  8. Take the URL you got from that deploy and fix the oauth_redirect_url value in
    frontend/src/elm/Main.elm.
  9. Put your Strava client ID into strava_oauth_url in frontend/src/elm/Main.elm, and/or
    update the URL with the OAuth endpoint for the service you're using.
  10. Run the Frontend app (see README.md in the frontend directory).

Languages

JavaScript58.7%Elm34.3%HTML4.5%CSS2.5%
Created March 14, 2017
Updated January 28, 2023
chris/elm-lambda-oauth-boilerplate | GitHunt