nextjs-oauth

OAuth2.0 and Next.js Miro App Example

This app shows Miro's OAuth2.0 flow from Miro to a client-side app built with Next.js.

👨🏻‍💻 App Demo

NextJS-OAuth-app-demo.mov

📒 Table of Contents

• Included Features
• Tools and Technologies
• Prerequisites
• Associated Developer Tutorial
• Deploy the app on AWS Amplify
• Run the app locally
• Folder Structure
• Contributing
• License

⚙️ Included Features

• Miro REST API
  • POST /oauth/token

🛠️ Tools and Technologies

• React
• Next.js

✅ Prerequisites

• You have a Miro account.
• You're signed in to Miro.
• Your Miro account has a Developer team.
• Create a new app in Miro
• Your development environment includes Node.js 14.13 or a later version.
• All examples use npm as a package manager and npx as a package runner.

☁️ Deploy the app on AWS, Azure, or Netlify

If you want to understand how to deploy the app to AWS Amplify or Azure (Static Web Apps), please watch the video below. Otherwise, skip to the next section to see how to run this locally.

If you want to understand how to deploy the app to Microsoft Azure (Static Web Apps) please watch the video below.

If you want to understand how to deploy the app to Netlify please watch the video below.

🏃🏽‍♂️ Run the app locally

1. Run yarn install to install dependencies.

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 by clicking Edit in Manifest.
   In the app manifest editor, copy and paste the following yaml code:

# 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

4. Run yarn dev.

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

.
├── package.json <-- The dependencies for the app.
└── .env <-- A file will create, where you store sensitive credentials (client ID, client secret).
└── .sample.env <-- A file with a template to store store sensitive credentials (client ID, client secret).
└── node_modules <-- Node.js modules that are installed based on dependencies.
└── pages
        └── api
            └── authenticate.js <-- Checks user auth status.
            └── redirect.js <-- Handles redirect after successful authorization to get access token.
            └── signin.js <-- Handles OAuth authorization.
    └── _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
    └── favicon.ico <-- App icon for the browser tab.
└── styles
    └── globals.css <-- CSS styling.

🫱🏻‍🫲🏽 Contributing

If you want to contribute to this example, or any other Miro Open Source project, please review Miro's contributing guide.

🪪 License

MIT License.