OIDC Webtask

A Sample webtask project that uses Auth0's OIDC Provider for authentication.

Live Demo - Give it a try.

Getting Started

Prepping the Environment

1. Install Node v8.2.1 or Above.
2. Install Visual Studio Code, the Insiders Edition is highly recommended.
3. Install the WT-CLI.
   • You will need to initalize the cli, wt init.

Configuring an Auth0 Application & API

1. Signup for an Auth0 Account.
   • Free Tier works fine.
2. Create an Application with the following settings.
   • Name: OIDC Demo
   • Type: Single Page Web Application
   • Allowed Callback URLs: https://<YOUR WEBTASK CONTAINER>.sandbox.auth0-extend.com/oidc-client/callback
3. Create an API with the following settings:
   • Name: OIDC API
   • Identifier: https://<YOUR WEBTASK CONTAINER>.sandbox.auth0-extend.com/oidc-api
4. Add a Scope to the OIDC API of read:jokes.

Deploying The Webtask

1. Clone the repository: git clone https://github.com/NotMyself/oidc_webtask.git
2. Change directory into the cloned repository cd oidc_webtask.
3. Open the directory in Visual Studio Code: code ..
4. Copy the .env_example file to a .env file in the src/api directories.
5. Update the src/api/.env file to include Auth0 Domain.
6. Copy the .env_example file to a .env file in the src/client directories.
7. Update the src/client/.env file to include Auth0 Domain and Client ID.
8. Open the integrated terminal: ctrl ~.
9. Run the script scripts/publish

The output will look like this:

Note: The URL at the end of the output is where your webtask is hosted.

Implementation Notes

The task I was given was to build a secure Webtask, and add an OIDC provider to secure it and do a brief write up on your process and the decisions you made.

@jcenturion and I had previously worked with a prototype webtask compiler that allowed you to write React components directly in the webtask editor and have it served up as a SPA style website. I decided to use this technique to present a frontend that could consume a secured webtask backend API.

The front end uses Materialize, React, React Router, and Auth0.js. I chose Materialize as it is a nice front end css framework that I have not used previously. I also chose to use the React Context API over some thing like Redux to keep things simple as well as to get a sense of what it is like to work with.

The backend api uses Request, Express, Express JWT, Express JWT AUthz and Jwks RSA to create a typical backend API.

Implementation of Authentication was fairly straight forward. I found this post by Abdulazeez Adeshina very helpful in implementing it in React.

Once I had my login implemented, I moved on to creating a secuired API. I found the Auth0 documentation very helpful in doing this.

One sticking point that I ran into was specifying an audience correctly. I attempted to use the UserInfo audience to secure the API. I had to read up on APIs, Audencies and Scope in the docs.

After creating an API specifically for this demo with apporiate scopes it all started working.