Example Clever App

A barebones app that implements SIgn Up With Clever, using Node.js and Express 4.

You can try it out yourself at https://clever-example-app.herokuapp.com/

Running Locally

Make sure you have Node.js and the Heroku CLI installed.

$ git clone git@github.com:brettcvz/clever-example-app.git # or clone your own fork
$ cd clever-example-app
$ npm install

Then, edit the .env file to add your Clever Client ID and Clever Client Secret. These can be found on your Clever Dashboard under the "Settings" tab, or in the Desmos 1Password under Clever Dev API. In addition, set the REDIRECT_URL and SESSION_SECRET variables. Note that the REDIRECT_URL must also be configured in the Clever Dashboard.

.env:

CLEVER_CLIENT_ID=<ClientID>
CLEVER_CLIENT_SECRET=<Client Secret>
REDIRECT_URL=http://localhost:5000/oauth
SESSION_SECRET=abc123

Now, run the app:

$ npm start

Your app should now be running on localhost:5000.

Click the Signup with Clever button, then login using, e.g.

username: teacher1 
password: clever

See https://dev.clever.com/docs/classroom-testing#testing-with-multiple-users for more testing info.

Implementing "Sign Up with Clever"

The basic sequence to implement Sign Up with Clever is as follows:

1. Add a "Sign Up with Clever" button to your application's signup page, that directs the user to the Clever /oauth/authorize endpoint with the correct parameters for your app. You can also add a "Log In with Clever" button that points to the same URL. Button assets can be found in the Clever Dev Docs

2. Implement a route in your app to handle when the OAuth request returns from Clever, that dose the following:

   a. Exchanges a single-use code for a longer-lived token that can be used with the Clever API.

   b. Hits the /v2.0/me endpoint to get the user's Clever ID

   c. Checks to see a user with that Clever ID already exists. If so, log the user in to your app. If not, hit the Clever API to request the user's name, classes, etc. and create the corresponding user in your app.

3. Send the now logged in user to your app's home page.

At step 2.c., you may want to ask the user if they already have an existing account, and if so, if they want to associate their Clever ID with their existing account.

For more details on how to perform an OAuth connection with Clever, see the Clever Dev Docs, or look at the runOAuthFlow method in the clever.js file.

To access information about the currently Clever user, you can use the Clever API, making user's Instant Login Bearer Token.