Hporutiu update node oauth examples

CONTRIBUTING.md

@@ -102,25 +102,24 @@ Now that you are part of the Miro community, make sure to join us in our [Discor
 
 ## Contributing to App Examples
 
-<b>Please look at [README.template.md](https://github.com/miroapp/app-examples/README.template.md)<b> for an example of
+<b>Please look at [README.template.md](https://github.com/miroapp/app-examples/blob/main/README.template.md)</b> for an example of
 how your README should look in order to contribute to App Examples.
 
 If you want to add an app into our [App Examples folder](https://github.com/miroapp/app-examples/tree/main/examples) please
-<b>make sure the README it follows the same structure as our other app examples</b>. You can take a look at [Drag and Drop
-README](https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop) for example. In order for your app
+<b>make sure the README it follows the same structure as our other app examples</b>. You can take a look at [Calendar app README](https://github.com/miroapp/app-examples/blob/main/examples/calendar/README.md) for example. In order for your app
 example and PR to get approved, please make sure you have the following components in your README:
 
-1. [App title section](https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop#miro-drag-and-drop-app) with simple 1 line description of what you app example does.
-2. 15-60 second [App Demo section](https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop#-app-demo). The shorter the better.
-3. [Table of contents section](https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop#-table-of-contents)
-4. [Included Features section](https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop#%EF%B8%8F-included-features-), which details which Miro SDK or API methods are used in the example.
-5. [Tools and Technologies section](https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop#%EF%B8%8F-tools-and-technologies-), which details which any technologies you are using, i.e. Node.js, React.
-6. [Prerequisistes section](https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop#-prerequisites-), which details any dependencies or additional CLIs that may need to be installed before running the app.
-7. [Run the app section](https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop#%EF%B8%8F-run-the-app-locally-). This section should go over how to run the app locally. Please be as descriptive as possible to ensure the developer can install
+1. [App title section](https://github.com/miroapp/app-examples/tree/main/examples/calendar#miro-calendar-app) with simple 1 line description of what you app example does.
+2. 15-60 second [App Demo section](https://github.com/miroapp/app-examples/tree/main/examples/calendar#-app-demo). The shorter the better.
+3. [Table of contents section](https://github.com/miroapp/app-examples/tree/main/examples/calendar#-table-of-contents)
+4. [Included Features section](https://github.com/miroapp/app-examples/tree/main/examples/calendar#%EF%B8%8F-included-features-), which details which Miro SDK or API methods are used in the example.
+5. [Tools and Technologies section](https://github.com/miroapp/app-examples/tree/main/examples/calendar#%EF%B8%8F-tools-and-technologies-), which details which any technologies you are using, i.e. Node.js, React.
+6. [Prerequisistes section](https://github.com/miroapp/app-examples/tree/main/examples/calendar#-prerequisites-), which details any dependencies or additional CLIs that may need to be installed before running the app.
+7. [Run the app section](https://github.com/miroapp/app-examples/tree/main/examples/calendar#%EF%B8%8F-run-the-app-locally-). This section should go over how to run the app locally. Please be as descriptive as possible to ensure the developer can install
    and configure your app easily, even if it is their first time using these tools and technologies.
-8. [Folder Structure section](https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop#%EF%B8%8F-folder-structure-). This section outlines what each file is for in the app so a developer can quickly
+8. [Folder Structure section](https://github.com/miroapp/app-examples/tree/main/examples/calendar#%EF%B8%8F-folder-structure-). This section outlines what each file is for in the app so a developer can quickly
    understand the file layout of your app.
-9. [Contributing section](https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop#-contributing-). Here you
+9. [Contributing section](https://github.com/miroapp/app-examples/tree/main/examples/calendar#-contributing-). Here you
    can just link to [Miro's contributing guide](https://github.com/miroapp/app-examples/blob/main/CONTRIBUTING.md).
-10. [License section](https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop#-license-). This should
+10. [License section](https://github.com/miroapp/app-examples/tree/main/examples/calendar#-license-). This should
     indicate what license you want to use.

README.template.md

@@ -73,7 +73,7 @@ This app shows how to use a certain Miro SDK or API functionality to accomplish
 
 https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf
 
-5. Go to your developer team, and open your boards. <b>Refresh your browser</b>.
+5. Go to your developer team, and open your boards.
 6. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say `More apps`.
 7. Search for your app `Calendar` or whatever you chose to name it. Click on your app to use it, as shown in the video below. <b>In the video we search for a different app, but the process is the same regardless of the app.</b>
 
@@ -83,7 +83,7 @@ https://github.com/horeaporutiu/app-examples-template/assets/10428517/b23d9c4c-e
 
 <b>Explain your folder structure so a developer can quickly understand the layout of your code.</b>
 
-It should look something like [this](https://github.com/miroapp/app-examples/tree/main/examples/html-preview#folder).
+It should look something like [this](https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop#folder).
 
 ```
 .

examples/nextjs-oauth/.sample.env

@@ -0,0 +1,3 @@
+clientID=<YOUR_CLIENT_ID>
+clientSecret=<YOUR_CLIENT_SECRET>
+redirectURL=http://localhost:3000/api/redirect/

examples/nextjs-oauth/README.md

@@ -1,67 +1,68 @@
-# About the app
+# OAuth2.0 and Next.js Miro App Example
 
-This full-stack app shows how to implement the OAuth 2.0 authorization code grant flow from Miro to a client-side application built with Next.js.
+This app shows Miro's OAuth2.0 flow from Miro to a client-side app built with Next.js.
 
-This app demonstrates the use of the Miro REST API and OAuth authorization. After configuring your project outlined in the Prerequisites section, this app allows you to authenticate yourself with your Miro account, and use the related access tokens to make REST API calls via the Miro Developer Platform.
+# 👨🏻‍💻 App Demo
 
-This app also stores your access and refresh tokens in your browsers cookies to demonstrate the Miro's REST API. When storing tokens in your own app, you should be consider encrypting or storing your user's tokens in a more secure way.
+https://github.com/miroapp/app-examples/assets/10428517/cdda8f44-bf25-420e-ae84-7ad96dba9f52
 
-## Stack
+# 📒 Table of Contents
 
-- [x] [React](https://reactjs.org/)
-- [x] [Next.js](https://nextjs.org/)
-- [x] [Axios](https://axios-http.com/)
-- [x] [Miro REST API](https://developers.miro.com/reference/api-reference)
-- [x] [Mirotone](https://www.mirotone.xyz/css) (styling)
+- [Included Features](#features)
+- [Tools and Technologies](#tools)
+- [Prerequisites](#prerequisites)
+- [Associated Developer Tutorial](#tutorial)
+- [Run the app locally](#run)
+- [Folder Structure](#folder)
+- [Contributing](#contributing)
+- [License](#license)
 
-## Prerequisites
+# ⚙️ Included Features <a name="features"></a>
 
-1. Create a [developer team in Miro](https://developers.miro.com/docs/create-a-developer-team).
-2. Create an [app in Miro](https://developers.miro.com/docs/build-your-first-hello-world-app#step-1-bootstrap-the-hello-world-app).
-3. Create a board in Miro that you'd like to manipulate with the REST API.
-4. Make a note of the board ID in the URL of the new board: you'll add this ID as a value for `boardId` in [`constants.js`](./constants.js) in step 5 below.
+- [Miro REST API](https://developers.miro.com/docs/web-sdk-reference)
+  - [POST /oauth/token](https://developers.miro.com/reference/exchange-authorization-code-with-access-token)
 
-## How to start
+# 🛠️ Tools and Technologies <a name="tools"></a>
 
-First, make sure you handled the [prerequisites](#prerequisites).
+- [React](https://react.dev/)
+- [Next.js](https://nextjs.org/)
 
-Then, proceed to configure the app:
+# ✅ Prerequisites <a name="prerequisites"></a>
 
-- In your account profile, go to **Your apps**, and then select the app you just created to access its settings page.
-- On the app settings page:
-  - Go to **App Credentials**, and copy the app **Client ID** and **Client secret** values: you'll need to enter these values
-    in step 4 below.
-  - Then, open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro) by clicking **Edit in Manifest**.
-- In the app manifest editor, configure the app as follows:
-  - [`sdkUri`](https://developers.miro.com/docs/app-manifest#sdkuri): assign `http://localhost:3000` as a value for this property. \
-    It defines the entry point of the app, and it corresponds to the URL of the server that the app runs on.
-  - [`redirectUris`](https://developers.miro.com/docs/app-manifest#redirecturis): assign `http://localhost:3000/api/redirect/` as a value for this property. \
-    It defines the redirect URL that starts the OAuth 2.0 code grant flow for the REST API.
-  - [`scopes`](https://developers.miro.com/docs/app-manifest#scopes): add the permission scopes that users need to grant the app when they install it. \
-    To enable the app to read from and write to the board, add the following permissions:
-    - `boards:read`
-    - `boards:write`
+- You have a [Miro account](https://miro.com/signup/).
+- You're [signed in to Miro](https://miro.com/login/).
+- Your Miro account has a [Developer team](https://developers.miro.com/docs/create-a-developer-team).
+- Create a [new app in Miro](https://miro.com/app/settings/user-profile/apps)
+- Your development environment includes [Node.js 14.13](https://nodejs.org/en/download) or a later version.
+- All examples use `npm` as a package manager and `npx` as a package runner.
 
-Now you can start working directly with the app:
+# 🏃🏽‍♂️ Run the app locally <a name="run"></a>
 
-1. Clone or download the app repository.
-2. `cd` to the project root folder.
-3. Run `yarn install` to install the dependencies.
-4. Create a `.env` file in the root folder, and set the following variables:
+1. Run `yarn install` to install dependencies.
 
-```
-clientID={YOUR_CLIENT_ID)
-clientSecret={YOUR_CLIENT_SECRET}
-redirectURL=http://localhost:3000/api/redirect/
+2. Rename the `.sample.env` file to `.env` and then add in your clientID, client Secret, and keep the redirect URL the same.
+
+3. Open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro) by clicking **Edit in Manifest**. \
+   In the app manifest editor, copy and paste the following yaml code:
+
+```yaml
+# See https://developers.miro.com/docs/app-manifest on how to use this
+appName: NextJS OAuth
+sdkUri: "http://localhost:3000"
+redirectUris:
+  - http://localhost:3000/api/redirect/
+scopes:
+  - boards:read
+  - boards:write
 ```
 
-5. Go to [`constants.js`](./constants.js), and add the `boardId` of the Miro board you'd like to use/modify.
-6. Run `yarn dev` to start the local web server.
+4. Run `yarn dev`.
 
-Once your server is up and running, go to `http://localhost:3000/` in your browser. \
-If the project is running successfully, you should see a **Sign in** button in the UI.
+5. Once your server is up and running, go to http://localhost:3000/ in your browser.
+   If the project is running successfully, you should see a Sign in button in the UI. Then go through the OAuth flow.
+   If all went well, you should see `Signed in Successfully`. Great job!
 
-## Folder structure
+# 🗂️ Folder structure <a name="folder"></a>
 
 ```
 .
@@ -87,5 +88,12 @@ If the project is running successfully, you should see a **Sign in** button in t
     └── index.js <-- Main index.js file for basic UI functions.
 └── public
 └── styles
-
 ```
+
+# 🫱🏻‍🫲🏽 Contributing <a name="contributing"></a>
+
+If you want to contribute to this example, or any other Miro Open Source project, please review [Miro's contributing guide](https://github.com/miroapp/app-examples/blob/main/CONTRIBUTING.md).
+
+# 🪪 License <a name="license"></a>
+
+[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE).

examples/node-oauth/.sample.env

@@ -0,0 +1,4 @@
+clientID=<YOUR_CLIENT_ID>
+clientSecret=<YOUR_CLIENT_SECRET>
+redirectURL=<YOUR_NGROK_FORWARDING_URL>
+boardId=<YOUR_MIRO_BOARD_ID>

examples/node-oauth/README-ngrok.md

@@ -0,0 +1,108 @@
+# OAuth 2.0 Node.js App Example (With Ngrok)
+
+This app shows how to implement the OAuth 2.0 authorization code grant flow (using [ngrok](https://ngrok.com/docs/) for our redirect URL) to make Miro REST API calls.
+
+# 👨🏻‍💻 App Demo
+
+https://github.com/miroapp/app-examples/assets/10428517/66411aa9-c801-4ed5-93ea-a68494285226
+
+# 📒 Table of Contents
+
+- [Included Features](#features)
+- [Tools and Technologies](#tools)
+- [Prerequisites](#prerequisites)
+- [Associated Developer Tutorial](#tutorial)
+- [Run the app with ngrok](#run)
+- [Folder Structure](#folder)
+- [Contributing](#contributing)
+- [License](#license)
+
+# ⚙️ Included Features <a name="features"></a>
+
+- [Miro REST API](https://developers.miro.com/docs/web-sdk-reference)
+  - [GET /boards/{board_id}](https://developers.miro.com/reference/get-specific-board)
+  - [POST /oauth/token](https://developers.miro.com/reference/exchange-authorization-code-with-access-token)
+
+# 🛠️ Tools and Technologies <a name="tools"></a>
+
+- [Express](https://expressjs.com/)
+- [Axios](https://axios-http.com/docs/intro)
+
+# ✅ Prerequisites <a name="prerequisites"></a>
+
+- Create a [new app in Miro](https://miro.com/app/settings/user-profile/apps)
+- You have a [Miro account](https://miro.com/signup/).
+- You're [signed in to Miro](https://miro.com/login/).
+- Your Miro account has a [Developer team](https://developers.miro.com/docs/create-a-developer-team).
+- Your development environment includes [Node.js 14.13](https://nodejs.org/en/download) or a later version.
+- All examples use `npm` as a package manager and `npx` as a package runner.
+- Install [ngrok](https://ngrok.com/).
+
+# 📖 Associated Developer Tutorial <a name="tutorial"></a>
+
+> To view a more in depth developer tutorial
+> of this topic see the [OAuth 2.0 Miro tutorial](https://developers.miro.com/docs/getting-started-with-oauth) on Miro's Developer documentation.
+
+# 🏃🏽‍♂️ Run the app with ngrok <a name="run"></a>
+
+1. Run `npm install` to install dependencies.
+
+2. Run `ngrok http 3000` and copy the forwarding address. It should look something like:
+
+`https://1ce8-45-94-204-74.ngrok-free.app`. This will be the value for `redirectURL` in your `.env` file.
+
+3. Rename the `.sample.env` file to `.env` and then fill in the values.
+
+> To find your client ID and secret, go to `Your apps`, and then select the app you just created to access its settings page. On the app settings page, go to `App Credentials`, and copy the app Client ID and Client secret values.
+> To find your `boardId` Go to your desired Miro board, copy the board ID from the URL, and paste it to your .env file boardId variable. For more info on how to get your board ID, see the [community question](https://community.miro.com/developer-platform-and-apis-57/where-can-i-find-board-id-3154).
+> The `redirectURL` is just the forwarding address from step 2. Once your `.env` file is completed, it should look similar to this:
+
+```
+clientID=12345678910
+clientSecret=12345678910abcdefg
+redirectURL=https://01-11-11-2011-74.ngrok-free.app
+boardId=abcdefghik=
+```
+
+4. Open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro) by clicking **Edit in Manifest**. \
+   In the app manifest editor, copy and paste the following yaml code:
+
+```yaml
+# See https://developers.miro.com/docs/app-manifest on how to use this
+appName: OAuth2.0 with NodeJS
+redirectUris:
+  - https://[YOUR_NGROK_URL].ngrok-free.app
+scopes:
+  - boards:read
+```
+
+> <b>Note, your `redirectUris` should be different than mine, it's just the forwarding address from ngrok. Make sure
+> both are the same in your app settings and in your `.env` file</b>
+
+5. Run `npm run start` to start the server.
+
+6. Once your server is running, copy the installation URL of your app under `Share App` in the app settings UI and paste it in
+   your browser. This should take you to the Miro OAuth page. Select your dev team, and then click `Add`. <b>You can see this step done in the App Demo at the top of the README.</b>
+
+7. This should take you to your `redirect URL` now. You should now see `Hello, World!` and `Miro API Response:` in your browser.
+   Great job! You've completed this app example! <b>You can see this step done in the App Demo at the top of the README.</b>
+
+# 🗂️ Folder structure <a name="folder"></a>
+
+```
+.
+├── package.json <-- App dependencies that are installed for the project.
+└── index.js <-- The main Node.js script to run the OAuth and API request flow.
+└── .env <-- A file you create, where you store sensitive credentials (client ID, client secret).
+└── .sample.env <-- A file you can use as the template for your .env file.
+└── node_modules <-- Node.js modules that are installed based on dependencies.
+└── app-manifest.yaml <-- Yaml code to configure your Miro App. This is used in App Settings -> Manifest.
+```
+
+# 🫱🏻‍🫲🏽 Contributing <a name="contributing"></a>
+
+If you want to contribute to this example, or any other Miro Open Source project, please review [Miro's contributing guide](https://github.com/miroapp/app-examples/blob/main/CONTRIBUTING.md).
+
+# 🪪 License <a name="license"></a>
+
+[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE).