more sapper demo 💅

demos/webmap-checker-sapper/.env.example

@@ -0,0 +1,5 @@
+CLIENT_ID=YfFEWoHwtOY4KP1t
+REDIRECT_URI=http://localhost:3000/auth/post-sign-in
+ENCRYPTION_KEY=vf00tpMiGRSCO36yrbNm9jWyAStIJWJ5
+SESSION_SECRET=Sb66uSlcA3RqyIXLOtwK5P1a37FvYqHD
+PORT=3000

demos/webmap-checker-sapper/README.md

@@ -21,7 +21,7 @@ Sapper works by starting up an [Express JS](https://expressjs.com/) web server a
 The app has 4 API endpoints
 
 * `src/routes/auth/authorize.js` - starts the oAuth 2.0 process to sign in a user.
-* `src/routes/auth/post-sign-in.js` - competes the oAuth 2.0 process.
+* `src/routes/auth/post-sign-in.js` - completes the oAuth 2.0 process.
 * `src/routes/auth/exchange-token.js` - provides a fresh token based on the secure session cookie when the current token expires.
 * `src/routes/auth/sign-out.js` - signs the user out, destroying the saved session on the server and the session cookie on the client.
 
@@ -46,7 +46,7 @@ This app is based on https://github.com/sveltejs/sapper-template.
 1. Create a `.env` file at the root of the `webmap-checker-sapper` folder that contains the following:
    ```text
    CLIENT_ID=YfFEWoHwtOY4KP1t
-   REDIRECT_URI=http://localhost:3000/auth/post-sign-in/
+   REDIRECT_URI=http://localhost:3000/auth/post-sign-in
    ENCRYPTION_KEY=vf00tpMiGRSCO36yrbNm9jWyAStIJWJ5
    SESSION_SECRET=Sb66uSlcA3RqyIXLOtwK5P1a37FvYqHD
    PORT=3000
@@ -56,7 +56,7 @@ This app is based on https://github.com/sveltejs/sapper-template.
 
 ## Configuration
 
-There are 5 config values stored in `.env`:
+There are five config values stored in `.env`:
 
 * `CLIENT_ID` - The client id from an app registered in ArcGIS Online. Directions for setting this up are part of the [named user login documentation](https://developers.arcgis.com/documentation/core-concepts/security-and-authentication/signing-in-arcgis-online-users/).
 * `REDIRECT_URL` - A valid redirect URL from the app that owns the `CLIENT_ID`. Directions for setting this up are part of the [named user login documentation](https://developers.arcgis.com/documentation/core-concepts/security-and-authentication/signing-in-arcgis-online-users/).
@@ -66,7 +66,7 @@ There are 5 config values stored in `.env`:
 
 ## Authentication Workflow
 
-This sample differs from other workflows in how authentication works but shows the flexibility of the ArcGIS REST JS library to [perform server based authentication], store sessions on the server and seamlessly share sessions with the client and ArcGIS API for JavaScript
+This sample differs from other workflows in how authentication works but shows the flexibility of the ArcGIS REST JS library to perform server based authentication, store sessions on the server and seamlessly share sessions with the client and ArcGIS API for JavaScript
 
 1. First a user sign in with OAuth 2.0. This starts by sending the user to `/auth/authorize`:
 
@@ -88,7 +88,7 @@ This sample differs from other workflows in how authentication works but shows t
    })
    ```
 
-   `error` will be an instace of either [`ArcGISRequestError`](https://esri.github.io/arcgis-rest-js/api/request/ArcGISRequestError/) or [`ArcGISAuthError`](https://esri.github.io/arcgis-rest-js/api/request/ArcGISAuthError/). `ArcGISAuthError` includes a special `retry()` method that can accept a new session and retry the request. You can them implement your logic to refresh a session and retry the request as in this example:
+   `error` will be an instance of either [`ArcGISRequestError`](https://esri.github.io/arcgis-rest-js/api/request/ArcGISRequestError/) or [`ArcGISAuthError`](https://esri.github.io/arcgis-rest-js/api/request/ArcGISAuthError/). `ArcGISAuthError` includes a special `retry()` method that can accept a new session and retry the request. You can them implement your logic to refresh a session and retry the request as in this example:
 
    ```js
    getItem(webmapId, {
@@ -107,8 +107,8 @@ This sample differs from other workflows in how authentication works but shows t
      // handle an actual request failure or error.
    });
    ```
-8. The retry retry workflow is handled entirely by a simple utility function called `retryWithNewSession()`. In order to get a new token a request is made to `/auth/exchange-token`. This request includes the session cookie so the server can find the instance of [`UserSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/) and call [`UserSession.refreshSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/#refreshSession) to refresh the session, strip out the refresh token and return the new session to the client which then retries the request with the new authentication.
-9. In order to load the webmaps we also need to pass our [`UserSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/) to the ArcGIS API for JavaScript [`IdentityManager`](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html) to allow it load resources that require authentication. YOu can use [`UserSession.toCredential()`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/#toCredential-summary) to convert the session into a [`Credential`](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-Credential.html) to pass to [`IdentityManager`](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html) as shown below:
+8. The retry workflow is handled entirely by a simple utility function called `retryWithNewSession()`. In order to get a new token a request is made to `/auth/exchange-token`. This request includes the session cookie so the server can find the instance of [`UserSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/) and call [`UserSession.refreshSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/#refreshSession) to refresh the session, strip out the refresh token and return the new session to the client which then retries the request with the new authentication.
+9. In order to load the webmaps we also need to pass our [`UserSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/) to the ArcGIS API for JavaScript [`IdentityManager`](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html) to allow it load resources that require authentication. You can use [`UserSession.toCredential()`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/#toCredential-summary) to convert the session into a [`Credential`](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-Credential.html) to pass to [`IdentityManager`](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html) as shown below:
 
    ```js
    require([
@@ -118,6 +118,6 @@ This sample differs from other workflows in how authentication works but shows t
    });
    ```
 
-   New credentials should also be registered with [`IdentityManager`](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html) when they are retrieved from the server as older sessions expires.
+   New credentials should also be registered with [`IdentityManager`](https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html) when they are retrieved from the server as older sessions expire.
 
 

demos/webmap-checker-sapper/package.json

@@ -2,7 +2,7 @@
   "name": "sapper-webmap-checker",
   "description": "this thing is cray cray",
   "private": true,
-  "version": "1.17.1",
+  "version": "1.19.0",
   "scripts": {
     "dev": "sapper dev",
     "build": "sapper build --legacy",
@@ -13,10 +13,10 @@
     "test": "run-p --race dev cy:run"
   },
   "dependencies": {
-    "@esri/arcgis-rest-auth": "^1.17.1",
-    "@esri/arcgis-rest-items": "^1.17.1",
-    "@esri/arcgis-rest-users": "^1.17.1",
-    "@esri/arcgis-rest-request": "^1.17.1",
+    "@esri/arcgis-rest-auth": "^1.19.0",
+    "@esri/arcgis-rest-items": "^1.19.0",
+    "@esri/arcgis-rest-users": "^1.19.0",
+    "@esri/arcgis-rest-request": "^1.19.0",
     "compression": "^1.7.1",
     "cookies": "^0.7.3",
     "dotenv": "^6.2.0",

demos/webmap-checker-sapper/src/components/Nav.html

@@ -1,6 +1,6 @@
 <nav class="flex items-center justify-between flex-wrap bg-teal p-6">
   <div class="flex items-center flex-no-shrink text-white mr-6">
-    <span class="font-semibold text-4xl">Web Map Dependecy Checker</span>
+    <span class="font-semibold text-4xl">Web Map Dependency Checker</span>
   </div>
   {#if $session}
   <p class="text-white">

demos/webmap-checker-sapper/src/components/WebMap.html

@@ -1,8 +1,8 @@
-<!-- We need to use a ref here so we can acces this div inside out component -->
-<div ref:mapContainer class="webmap-contianer"></div>
+<!-- We need to use a ref here so we can access this div inside out component -->
+<div ref:mapContainer class="webmap-container"></div>
 
 <style>
-  .webmap-contianer {
+  .webmap-container {
     width: 100%;
     height: 400px;
   }

demos/webmap-checker-sapper/src/routes/auth/post-sign-in.js

@@ -3,7 +3,7 @@ import { UserSession } from "@esri/arcgis-rest-auth";
 // setup config variables
 require("dotenv").config();
 const { CLIENT_ID, REDIRECT_URI } = process.env;
-
+debugger;
 // a user will be redirected to /auth/post-sign-in after completing the sign in
 // form in ArcGIS Online. We will allow UserSession.exchangeAuthorizationCode to
 // trade the oAuth authorization code for a token and create a user session.

demos/webmap-checker-sapper/src/routes/index.html

@@ -15,6 +15,6 @@
 <a
   href="/auth/authorize"
   class="inline-block px-6 py-3 leading-none border rounded text-teal border-teal hover:border-dark-teal hover:text-dark-teal hover:bg-white mt-1"
-  >Sign in to get stared</a
+  >Sign in to get started</a
 >
 {/if}

demos/webmap-checker-sapper/src/server.js

@@ -77,7 +77,7 @@ express()
 
         // since the store is shared between the client and server
         // we dont want to put refresh tokens in it. The store also needs to be
-        // in a serizliable format so sapper and send it to the client.
+        // in a serializable format so sapper and send it to the client.
         if (request.session && request.session.userSession) {
           userSession = request.session.userSession.toJSON();
           delete userSession.refreshToken;