AWS Amplify Multi-Auth GraphQL Public Create, Authenticated Read, Update, Delete

Since the release of multiple authorization support in Amplify GraphQL, a number of excellent blogs [1] [2] have been written about how multi-auth can readily support the public read, authenticated CRUD use case. This post describes using multi-auth to support another use case: public create , authenticated read/update/delete: Public ("unauthenticated") users can create objects in a GraphQL table; i.e., a user can create an object in the table without having to sign in with user name and password. The unauthenticated user cannot read, update, or delete any object in the table. An authenticated user can read, update, delete the objects that s/he owns in the same GraphQL table after signing into Amazon Cognito with user name and password. An example of this use case is where a website has a public form that asks users to fill out (e.g., taking a survey) without having to sign in.  The information from the form is stored in the GraphQL table.  Other than creating the fo

43. Media Library - Postmortem and What's Next

To wrap up our series on the media-library project I want to reflect on the positive and negative parts of the project with a view to doing things better in the future, and then discuss what features might make sense for the next iteration. Positive Hooks - This entire application is written without using a single React Class Component. To say I am a fan of Hooks is an understatement. By not using Hooks I find my code is both easier to write and read. Render props - I am a fan of the render props pattern, although it does seem that custom Hooks may replace render props over time. I am not a fan of Higher Order Components (HOC). This entire application is written without creating a single HOC (but we do use a few). Firebase (the platform) - I really like Firebase as a platform. I don't remember having a problem with it throughout the entire development cycle. I appreciate the efforts to keep Firebase minimal and not bloat it with a bunch of rarely used features. In particular,

42. Media Library - Publish

It feels like this blog series has been going on forever, maybe because it has. We finally reached our goal of having something worth showing users in the last post. We can now turn our attention to getting the application published somewhere users can access it. Code Background  Not surprisingly we will leverage Firebase Hosting to host our application. This in one of the most straightforward operations related to our application.  Walk Through I am going to start by creating a production build of our application. > npm run build There are some good bits in the create-react-app documentation about installing and using serve. This is a good way to test your production build before you push it to a live server. See: . The steps to deploy to Firebase Hosting are also discussed on that same page. Below are the steps we are using and the answers to the Fir

41. Media Library - Images for Users

In this post we will finally get to the key part of the application - letting users select and download images. Code Background  For the most part this post is about pulling together a lot of the concepts we have applied elsewhere.  Walk Through Let's start by replacing our Images component placeholder with a component that will display all of the images for a selected property. Before we create the component itself I want to create a helper component. I want to be able to let users filter the list of displayed images. We can use react-select to help. I'm going to create a generic component that uses react-select to allow us to generically identify a list for filtering. MultiSettingSelect.jsx import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import Select from 'react-select'; export default function MultiSettingSelect({   values,  

40. Media Library - Property, with map, for Users

In the last post we created a property list from which users can select a property. In this post we continue by creating the property components/pages. Code Background  There is one new concept I want to introduce in this post. When we display property details I want to display a map with the location of the property. I've decided to use Leaflet, and the React helper library React-Leaflet. In my opinion Leaflet is the best open-source option for displaying the map we want.   Walk Through Let's start by create the property container to pull in the bits of the store we will need. We want a specific property, its images and the settings. Notice that we are using ownProps to leverage the property ID from the url to filter on a specific property. PropertyContainer.jsx import { connect } from 'react-redux'; import Property from '../../