From 5f670a63aea39c4cbc59d449c3b895f3c6768872 Mon Sep 17 00:00:00 2001 From: Horea Porutiu Date: Mon, 18 Mar 2024 10:06:56 +0100 Subject: [PATCH] adding edits from mettin feedback --- .../3rd-party-oauth-login/APP_SUBMISSION.md | 2 +- examples/3rd-party-oauth-login/README.md | 24 +++++++++---------- examples/3rd-party-oauth-login/src/app.js | 12 +++++----- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/examples/3rd-party-oauth-login/APP_SUBMISSION.md b/examples/3rd-party-oauth-login/APP_SUBMISSION.md index 0d3d2f0cc..b18121a26 100644 --- a/examples/3rd-party-oauth-login/APP_SUBMISSION.md +++ b/examples/3rd-party-oauth-login/APP_SUBMISSION.md @@ -1,5 +1,5 @@ ## Submission to Miro Marketplace Congrats! You have finished building your app & you'd like to publish it for -users. You can submit your app on the +users. You can submit your app to the [Miro Marketplace](https://developers.miro.com/docs/submit-your-app) for review. diff --git a/examples/3rd-party-oauth-login/README.md b/examples/3rd-party-oauth-login/README.md index e1c5dc7e5..23568b160 100644 --- a/examples/3rd-party-oauth-login/README.md +++ b/examples/3rd-party-oauth-login/README.md @@ -1,6 +1,6 @@ # 3rd Party OAuth Login -This app allows you to login to a 3rd party service using (you will need to provide OAuth URL) and tracks the logged in status via local storage. +This app allows you to login to a 3rd party service using OAuth (you will need to provide an OAuth URL) and tracks the logged in status via local storage. # 👨🏻‍💻 App Demo 🔊(Sound On)🔊 @@ -44,17 +44,17 @@ https://github.com/miroapp/app-examples/assets/10428517/fef43c9f-d528-4787-8c66- ``` http://localhost:3000 ``` -3. Run `npm install` in the `src/backend` directory. -4. Run `node app.js` in the `src/backend` directory. -5. If you need to use something like Ngrok for your redirectURL (I had to do this to go through the OAuth process for my Slack app) run `ngrok http 4000`. -6. Your ngrok forwarding address should look something like: `https://bced-81-59-0-206.ngrok-free.app`. Then your redirect URL in the other service (for me it was in the App Settings in Slack) should be: +3. Run `cd src/backend`. +4. Run `npm install`. +5. Run `node app.js`. +6. If you need to use something like ngrok for your redirectURL (I had to do this to go through the OAuth process for my Slack app) run `ngrok http 4000`. +7. Your ngrok forwarding address should look something like: `https://bced-81-59-0-206.ngrok-free.app`. Then your redirect URL in the other service (for me it was in the App Settings in Slack) should be: `https://bced-81-59-0-206.ngrok-free.app/redirect` -7. Go into `src/backend` and fill in the `.sample.env` file with your OAuthURL, clientId, and clientSecret and - rename it to `.env` and then save the file. +8. Go into `src/backend` and fill in the `.sample.env` file with your OAuthURL, clientId, and clientSecret and rename it to `.env` and then save the file. > For me, I had to go into my Slack App settings -> Basic Settings for the clientId and ClientSecret. I had to go to App Settings -> Manage Distribution and then check all the boxes, and then I was able to find the "Sharable URL" that I used as my "redirectURL". Also this likely requires the app to have some scopes, so you would have to add that in the OAuth and permission page of the app settings. -8. 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**. \ +9. 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, and then click save: ```yaml @@ -67,15 +67,15 @@ scopes: - boards:write ``` -9. Go back to your app home page, and under the `Permissions` section, you will see a blue button that says `Install app and get OAuth token`. Click that button. Then click on `Add` as shown in the video below. In the video we install a different app, but the process is the same regardless of the app. +10. Go back to your app home page, and under the `Permissions` section, you will see a blue button that says `Install app and get OAuth token`. Click that button. Then click on `Add` as shown in the video below. In the video we install a different app, but the process is the same regardless of the app. > ⚠️ We recommend to install your app on a [developer team](https://developers.miro.com/docs/create-a-developer-team) while you are developing or testing apps.⚠️ https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf -10. Go to your developer team, and open your boards. -11. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say `More apps`. -12. Search for your app `3rd Party OAuth Login` or whatever you chose to name it. Click on your app to use it, as shown in the video below. In the video we search for a different app, but the process is the same regardless of the app. +11. Go to your developer team, and open your boards. +12. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say `More apps`. +13. Search for your app `3rd Party OAuth Login` or whatever you chose to name it. Click on your app to use it, as shown in the video below. In the video we search for a different app, but the process is the same regardless of the app. https://github.com/horeaporutiu/app-examples-template/assets/10428517/b23d9c4c-e785-43f9-a72e-fa5d82c7b019 diff --git a/examples/3rd-party-oauth-login/src/app.js b/examples/3rd-party-oauth-login/src/app.js index 22141f2dc..719e1d015 100644 --- a/examples/3rd-party-oauth-login/src/app.js +++ b/examples/3rd-party-oauth-login/src/app.js @@ -2,9 +2,9 @@ // check eslint global config import "./assets/style.css"; -var loginBtn = document.getElementById("loginButton"); -var logoutBtn = document.getElementById("logoutButton"); -var loginText = document.getElementById("loginText"); +const loginBtn = document.getElementById("loginButton"); +const logoutBtn = document.getElementById("logoutButton"); +const loginText = document.getElementById("loginText"); // Attach click event listeners loginBtn.addEventListener("click", startOAuthFlow); @@ -25,7 +25,7 @@ async function initialize() { // This function displays the user login status on the UI async function displayLoginStatus(loggedIn) { try { - var statusParagraph = document.getElementById("loginStatus"); + const statusParagraph = document.getElementById("loginStatus"); if (loggedIn) { statusParagraph.textContent = @@ -51,7 +51,7 @@ async function displayLoginStatus(loggedIn) { async function isLoggedIn() { try { // Check if the user is logged in by checking the local storage on the browser - const loggedIn = localStorage.isLoggedIn; + const loggedIn = localStorage.getItem("isLoggedIn") === "true"; // Check if the currentId exists in the loggedInUserIds array await displayLoginStatus(loggedIn); @@ -67,7 +67,7 @@ async function isLoggedIn() { async function startOAuthFlow() { try { const response = await fetch("http://localhost:4000"); - let OAuthURL = await response.json(); + const OAuthURL = await response.json(); window.open(OAuthURL, "_blank"); // Add an event listener to receive messages from the backend, it will be called after the OAuth flow is completed