Serverless Form Collection Application

Collect and manage form data with serverless tech.

Frontend

• React application using create react app
• Routing via react router 4
• State management via redux
• Talks to API Gateway via axios
• Auth via Auth0
• Hosted on Netlify

Backend

• Node backend running in AWS Lambda Functions
• DynamoDB noSQL for database
• Authorization via API Gateway Custom Authorizer Function

Setup

1. Clone down the repo and install the dependencies

# install frontend dependencies
cd frontend && npm i

# install backend dependencies
cd backend && npm i

2. Setup auth0 client. See Auth0 Setup below

3. Then deploy the backend application. (install serverless if you haven't already)

cd backend

serverless deploy

4. Add the API values to src/_config.js and bootup the frontend!

cd frontend

npm start

Deployment

Connect your repo to netlify and add the build command cd frontend && npm install && npm run build

Auth0 Setup

1. Create an Auth0 Client

   1. Choose Single Page web app
   2. Grab your auth0 domain and clientID from your auth0 client settings
   3. plug those values into the frontend and backend config

2. Install the Auth0 Authorization extension in your auth0 account

3. Add an auth0 rule that will attach user roles to your JWT token

   function (user, context, callback) {
     if (context.clientID === 'your-auth-client-id') {
       // Update namespace with your namespace
       var namespace = 'https://serverless.com/';
       // console for debug purposes
       console.log('user.roles', user.roles);
       // add role to JWT token
       context.idToken[namespace + 'roles'] = user.roles;
     }
     callback(null, user, context);
   }
   

4. Add your auth0 values to /frontend/src/_config.js