Merge pull request auth0-training#7 from auth0-training/main

merge ilt into od

.auth0/lab/environment.json

@@ -1,16 +1,17 @@
 {
-  "name": "Lab Node Working with the User Profile",
-  "version": "1.1.1",
+  "name": "Lab Node Working with Connections",
+  "version": "1.1.2",
   "resources": "resources.yml",
   "unauthenticatedTour": ".auth0/lab/guides/signin.tour",
-  "postConfigureTour": ".auth0/lab/guides/working-with-the-user-profile.tour",
+  "postConfigureTour": ".auth0/lab/guides/working-with-connections.tour",
   "clients": [
     {
       "name": "Lab: Web App",
       "directory": "src/web-app",
       "env": {
         "ISSUER_BASE_URL": "$tenant_base_url",
         "CLIENT_ID": "$client_id",
+        "CLIENT_SECRET": "$client_secret",
         "SESSION_SECRET": "a long, randomly-generated string stored in env",
         "PORT": 37500
       }

.auth0/lab/guides/signin.tour

@@ -4,15 +4,15 @@
   "nextTour": "1: Working with the user profile",
   "steps": [
     {
-      "file": "README.md",
+      "file": "",
       "description": "## Sign this Environment into Your Labs Tenant\nBefore getting started, you'll need to sign this Environment into your Auth0 account under the labs tenant. \n\n**IMPORTANT**: If you have not already created a labs tenant, please see the Create a Tenant lab for instructions to do so. \n\n1. #### Click [here](command:auth0.auth.signIn) to sign into your Auth0 account with the Auth0 extension. \n     A browser window will open requesting that you confirm that the code shown matches the one shown in the lower right hand side of your vscode window.\n1. #### Confirm that the values match, then click the **Confirm** button.\n     ![Confirm the values in VS Code](https://cdn.auth0.com/website/a0fun/v2/create-1.gif)\n\n     ![Confirm the values in Auith0](https://cdn.auth0.com/website/a0fun/v2/create-0.gif)\n1. #### Select your labs tenant and click Accept.\n     ![Select the \"labs-\" tenant](https://cdn.auth0.com/website/a0fun/v2/select-0.gif)\n1. #### You should see a success message. Go ahead and close the browser tab.\nNext, you'll set the tenant up with the necessary Application and API to compete this lab.",
       "line": 1
     },
     {
-      "file": "README.md",
+      "file": "",
       "line": 1,
       "title": "Create a user account in the Lab: Web App",
-      "description": "## Create an auth0labs account and log into your labs web application.\n\nOver the course of completing the labs, you'll need to log into the lab applications with throw-away user accounts.\n\nThe easiest way to dynamically create this kind of account, is to append your existing Gmail email address with \"+auth0labs\" at the time of sign in. **You will need a Gmail account for this**.\n\nFor example, if my gmail email address were **[email protected]**, I'd simply log into the labs application with **[email protected]** as my log in. Auth0 will view this as a distinct account from the original.\n\nThus, this method allows you to create a new user in the auth0 database without needing to create a whole new email account.\n\nLet's go ahead and create that user in the Lab: Web App now.\n\n**You ay have already done this, if so, feel free to skip!**\n\n1. #### Start the lab application by clicking [here](command:workbench.action.debug.start).\n    You'll need to wait a moment for the debugger to build and deploy the app.\n\n1. #### Click [here](command:auth0.lab.openEndpointByName?[\"Lab: Web App\"]) to open the application in your browser, once it has finished deploying.\n\n1. #### Click the log-in link in the top navigation.\n\n1. #### Select signup. Then, in the username field, type your gmail address, appending +auth0labs to the portion before @gmail.com.\n    See the yoda example above as a model.\n\n1. #### Enter a strong password and create the account!\n\n    ![account-1](https://cdn.auth0.com/website/a0fun/v2/account-1.gif)\n\nThat's it! You should now have a user account to work with in the AUth0 database."
+      "description": "## Create a new user account and log into your labs web application.\n\nAt this point, you may have one or more existing user accounts in your Lab: Web App Auth0 Application. \n\n**For this lab, let's create one additional user account.** \n\nThere's a quick and easy way to create a new Expenses App account tied to the same Gmail address you already used. \n\nSimply append the email address with **_\"+auth0labs\"_** when you sign up. \n\nFor example, if my gmail email address were **[email protected]_**, I'd log in to the Expenses application with **[email protected]_** as my username. \n\nAuth0 will view this as a distinct account from the original.\n\n**Note: This is a feature Gmail supports but not all email providers do.**\n\nLet's go ahead and create that user in the Lab: Web App now.\n\n\n1. #### Click [here](command:auth0.lab.localConfigure) to ensure the lab is set up correctly.\n\n1. #### Start the lab application by clicking [here](command:workbench.action.debug.start).\n    You'll need to wait a moment for the debugger to build and deploy the app.\n\n1. #### Click [here](command:auth0.lab.openEndpointByName?[\"Lab: Web App\"]) to open the application in your browser, once it has finished deploying.\n\n1. #### Click the log-in link in the top navigation.\n\n1. #### Select signup. Then, in the username field, type your gmail address, appending +auth0labs to the portion before @gmail.com.\n    See the yoda example above as a model.\n\n1. #### Enter a strong password and create the account!\n\n    ![account-1](https://cdn.auth0.com/website/a0fun/v2/account-1.gif)\n\nThat's it! You should now have a user account to work with in the Auth0 database."
     }
   ]
 }

.auth0/lab/resources.yml

@@ -6,5 +6,7 @@ clients: # Add other client settings https://auth0.com/docs/api/management/v2#!/
      alg: "RS256"
     callbacks:
       - "http://localhost:37500/callback"
+      - https://##CODESPACE_NAME##-37500.##GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN##/callback
     allowed_logout_urls:
       - "http://localhost:37500"
+      - https://##CODESPACE_NAME##-37500.##GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN##

.devcontainer/Dockerfile

@@ -1,8 +1,8 @@
-# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.191.1/containers/javascript-node/.devcontainer/base.Dockerfile
+# See here for image contents: https://github.com/devcontainers/images/blob/22ce794a06cb34e12674d6aaf5e4549f6ab8ee4e/src/javascript-node/.devcontainer/Dockerfile
 
-# [Choice] Node.js version: 16, 14, 12
-ARG VARIANT="16-bullseye"
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+# [Choice] Node.js version: 18, 20
+ARG VARIANT="latest"
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:${VARIANT}
 
 # [Optional] Uncomment this section to install additional OS packages.
 # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \

.devcontainer/docker-compose.yml

@@ -5,7 +5,7 @@ services:
       context: .
       dockerfile: Dockerfile
       args:
-        VARIANT: 16-bullseye
+        VARIANT: latest
     deploy:
       resources:
         limits:

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "comments.maxHeight": false,
   "editor.minimap.enabled": false,
   "editor.formatOnSave": false,
     // Enable per-language

README.md

@@ -1,35 +1,23 @@
-[![Auth0 Training](https://user-images.githubusercontent.com/73120/125103885-a2bb5d80-e091-11eb-8084-383003f1e484.png "Auth0 Training")](https://training.auth0.com)
+[![Auth0 Training](https://cdn.auth0.com/website/training/labs/ilt/auth0training-okta.png "Auth0 Training by Okta")](https://training.auth0.com)
 
 # Lab Node Working with the User Profile
 
 This hands-on lab is all about working with users. Learners will navigate within the Auth0 dashboard and APIs to manipulate user data.
 
-> Note: This lab template is an experimental release, and is built on a best-efforts basis by some Auth0 developers in their available innovation time. It is open-source licensed and free to use, and is not covered by any Auth0 Terms of Service or Agreements. If you have issues with this template you can engage with the project's developer community through the repository GitHub Issues list, or contribute fixes and enhancements of your own via a Pull Request.
-### Requirements
+## Requirements
 
-You'll need an Auth0 account. If you do not already have one, you can create a free one [here](https://auth0.com/signup).
+1. A GitHub account: Our labs use GitHub Codespaces, so you'll need a GitHub account to access them. Create a free account [here](https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account).
+2. An Auth0 account: You'll also need an Auth0 account. If you do not already have one, you can create a free one [here](https://auth0.com/signup).
 
-This lab assumes the user is using [Visual Studio Code](https://code.visualstudio.com/download) and [Docker Desktop](https://www.docker.com/products/docker-desktop).
+## Accessing and Working with Auth0 Labs
 
-The [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) extension pack needs to be installed in VSCode.
+1. **Fork this lab repo to your GitHub account:** Click the "Fork" button located in the top right corner of the GitHub page. On the resulting page, under "Owner," select the dropdown menu and choose yourself as the owner for the forked repository. Then click the “Create fork” button. After a moment or two, you'll land on your fork of the repository. This fork now belongs to you, and you can revisit it later at any time.
+2. **Open the lab repo in a Codespace:** From the “Code” dropdown menu, toggle to the Codespaces tab. Click the plus sign to create and open the lab in a Codespace. A new tab will open, and Codespaces will begin configuring the lab environment. Wait for the environment to finish building.
+3. **Begin working with the lab:** Once the environment is ready you'll see a Codetour popup with instructions for connecting the lab to your Auth0 account. This can take some time, as the environment is installing several plugins to facilitate the lab. Once it is complete, you can open the Codetour to view all steps using the panel in the lower right. Follow the lab instructions (clicking to configure, selecting next, inserting code, etc.) in order to complete the lab.
+4. **If you'd like to save your work to your forked lab repo:** You can commit and push your changes to your fork (See: [Using Source Control in Your Codespace](https://docs.github.com/en/codespaces/developing-in-codespaces/using-source-control-in-your-codespace)).
+5. **IMPORTANT: Close the Codespace when you're finished with the lab:** Codespaces come with a set amount of free usage. To avoid using all of your free use allocation, be sure to return to the forked repo, select the "Code" dropdown, select the dots next to your open Codespace, and select "Delete." This will not delete your forked repository. You can keep that forever, and open a new Codespace whenever you like. 
 
-### Getting Started
-
-To get started using this lab, ensure you have met the minimum [requirements](#requirements) and then follow these steps.
-
-1. Clone this repository to your local machine.
-  ```bash
-  git clone https://github.com/auth0-training/labs-node-working-with-the-user-profile.git
-  ```
-2. Start Docker Desktop.
-3. Open the directory containing the source code in VSCode.
-4. When prompted to reopen the project in a development container, select **Reopen in Container**.
-  ![Devcontainer Prompt](https://cdn.auth0.com/website/a0fun/v2/devcontainer-prompt.gif?raw=true)
-
-This will build an image containing all the tools needed to complete this lab. A container will be started and VSCode will connect to it.
-
-### What is Auth0?
----
+## What is Auth0?
 
 Auth0 helps you to:
 
@@ -40,16 +28,14 @@ Auth0 helps you to:
 * Analytics of how, when, and where users are logging in.
 * Pull data from other sources and add it to the user profile, through [JavaScript rules](https://auth0.com/docs/rules/current).
 
-### Issue Reporting
----
+## Issue Reporting
+
 If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The [Responsible Disclosure Program](https://auth0.com/whitehat) details the procedure for disclosing security issues.
 
-### Author
----
+## Author
 
 [Auth0](https://auth0.com)
 
-### License
----
+## License
 
 This project is licensed under the MIT license. See the [LICENSE](LICENSE.txt) file for more info.

src/web-app/env-config.js

@@ -9,6 +9,15 @@ const {
 
 const appUrl = `http://localhost:${PORT}`;
 
+function checkEnvironment(){
+  // Use the Codespace App URL if we're in the Codespace environment
+  if(process.env.CODESPACE_NAME){
+    return `https://${process.env.CODESPACE_NAME}-${PORT}.${process.env.GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}`
+  }
+  // otherwise use the localhost App URL
+  return appUrl;
+}
+
 function checkUrl() {
   return (req, res, next) => {
     const host = req.headers.host;
@@ -38,7 +47,7 @@ console.log('----------------------------------\n');
 
 module.exports = {
   checkUrl,
-  APP_URL: appUrl,
+  APP_URL: checkEnvironment(),
   API_URL: removeTrailingSlashFromUrl(API_URL),
   ISSUER_BASE_URL: removeTrailingSlashFromUrl(ISSUER_BASE_URL),
   CLIENT_ID: CLIENT_ID,

src/web-app/index.js

@@ -40,6 +40,9 @@ app.use(
 
 app.use(
   auth({
+    authorizationParams: {
+        response_type: 'code',
+    },
     secret: SESSION_SECRET,
     auth0Logout: true,
     baseURL: APP_URL,

src/web-app/views/expenses.pug

@@ -21,4 +21,4 @@ block content
         tr
           each key in Object.keys(expense)
             td=expense[key]
-    p Don't spend to much.
+    p Don't spend too much.