This sample app demonstrates the use of the Miro REST API and OAuth authorization. This app is based on the Next.js 12 React Server Components Demo app and includes both react server and react client components. We’ve created our own project based on this, and added the Miro OAuth flow to be included in some boilerplate functionality.
React capabilities covered in this sample app:
- React client components
- React server components
Miro capabilities covered in this sample app:
- Miro OAuth
- Miro REST API
- React 18
- Next JS
- Axios
- Miro REST API
- Mirotone (styling)
- Create a developer team in Miro
- Create an app in Miro
- Create a board in Miro that you'd like to manipulate using our REST API
First, make sure you've handled the prerequisites in full:
- Create a developer team in Miro
- Click the link above, to create a developer team under your account
- Create an app in Miro
- From your developer team in Miro, click the "Build Apps" button in the team dashboard UI
- Name your app, click 'create'
- Scroll down to 'App Credentials' and copy the client id and client secret — we will use these below in step 4
- Continue to scroll down to 'Redirect URI for OAuth2.0' and paste in the following redirect url:
http://localhost:3000/api/redirect/
- Lastly, scroll down to 'Permissions' and check off the
Board:Read
andBoard:Write
scopes
- Navigate back to your developer team dashboard and create a new board in Miro. Make note of the board ID in the URL of the new board — we will use this below in step 5
Next, we can start working directly with this sample app:
- Clone or download repo
cd
to root folder- Run
yarn install
to install dependencies. - Create a .env file in the root folder, and set the following variables:
clientID={YOUR_CLIENT_ID)
clientSecret={YOUR_CLIENT_SECRET}
redirectURL=http://localhost:3000/api/redirect/
boardId={YOUR_BOARD_ID}
- Run
yarn dev
to start the local server
Once your server is up and running, navigate to http://localhost:3000/
in your browser. If the project is running successfully, you should see a 'Sign in' button in the UI.
.
├── package.json <-- The dependencies for the app
└── next.config.js <-- Configuration file for Next JS
└── constants.js <-- Houses isolated variables (Miro board ID)
└── .env <-- File you will create, where you store your sensitive credentials (Client ID, Secret)
└── node_modules <-- Node modules that are installed based on dependencies
└── components
└── input.js <-- client component
└── MiroItem.js <-- client component
└── Time.server.js <-- server component
└── pages
└── api
└── authenticate.js <-- check user auth status
└── createStickyNote.js <-- call Miro API to create sticky note
└── getItems.js <-- call Miro API to retrieve board items
└── redirect.js <-- handle redirect after successful authorization
└── signin.js <-- handle oauth authorization
└── updateContent.js <-- call Miro API to update sticky note content
└── _app.js <-- main app.js file for Next JS app
└── _document.js <-- Next JS import file
└── index.js <-- main index.js file for basic UI functions
└── public
└── styles