Query user's assignments for all courses and list by due date in Next.js

[CuriousDroid]

Hello, 

I am a student working on a small application using the Canvas API for me and my classmates. I'd like to create a Next.js app that allows users of the site to sign in using their Google account, and then displays a list of their unsubmitted assignments, organized by due date (almost like a to-do list). Is this possible to do using the Canvas LMS api? How should I make sure that authentication is handled safely?

Thank you in advance for your help!

[seanbeirnes · Accepted solution]

Hello @CuriousDroid,

I think it is great that you are trying to make a useful tool for yourself and your classmates. However, if you are doing this to learn Next.js and web development, you may be better served by trying to use an API that is easier to access (either freely or easier to obtain an API key). The reason I mention this is that your app will need to provide an access token to access data via the Canvas API on behalf of a user, and to get an Access Token, your app must go through the OAuth2 authentication flow, which requires that an API Key was already set up by a Canvas administrator in the Canvas instance available on the domain that your user would like to connect to your app (more details below). If you are not a Canvas administrator in the Canvas instance that you are making this Next.js app for, it will not be possible to get an API Key set up for your app to work. I have provided more specific details below explaining this.

Based on the information you provided, here are the steps your app would have to complete:

1. Sign the user in with the user's Google Account (requires implementing the Google Identity SDK and OAuth flow)
2. The first time the user uses the app, they need to authorize your app to access the Canvas API on their behalf via the OAuth flow.
3. Then your app can pull the data from the Canvas API and present it.

Here is where you may hit some roadblocks:

• This implementation assumes that you can create an API Key in the Admin settings of Canvas. If you do not have an administrator account, you could still do this in a local Canvas developer environment, but you will not be able to make this "live" for users in any Canvas install unless that Canvas instance has an API Key set up to communicate with your app.
• Your app will only work for a Canvas installation in which an API Key has been set up where your app has both the Client ID and Client Secret to complete the OAuth flow.
• If the above two points can be achieved, your app will need to help the user select which Canvas install is the one they want to connect to your app. It would likely be something like the user entering the URL of their Canvas instance (Ex: https://someschool.instructure.com). Then your app attempts to guide the user through the OAuth flow of that instance (assuming that your app has a Client ID and Client Secret for an API Key set up in the Canvas instance on that domain). This will require a lot of error handling and input verification since you do not know what the user will try to input.

I hope this helped. Canvas has a lot of security built in (and for good reason), so directly accessing the API requires several steps and permissions to be granted. If you wanted to explore making a Chrome Extension, that could be a viable way to accomplish your "Assignment To-Do" app via content script injection, but then you are just running some extra JavaScript on a Canvas page instead of setting up an entire web app with Next.js.