Fullstack boilerplate

Getting Started

From the GitHub UI

See the instructions here to use GitHub's feature to create a new repo from a template.

From the command line

git clone [email protected]:dev-academy-challenges/boilerplate-full-stack-auth0.git [your-project-name]
cd [your-project-name]
cp client/auth_config.json.example client/auth_config.json
cp server/.env.example server/.env
npm install # to install dependencies
npm run knex migrate:latest
npm run knex seed:run
npm run dev # to start the dev server

You can find the server running on http://localhost:3000.

Routes

General Routes

GET / Home Page React route.

GET /about How it works Page React route.

GET /services Services Page React route.

Auth0 form Link - not a route. Redirects to /login or /register.

/login React route.

/register React route. User chooses 'business' or 'customer' userType. Conditionally renders either:

• (For customer): Just a 'register' button. POSTs to /customer
• (For businesses): Business info form and register button. POSTs to /business

Customer Routes

POST /users Send data from /register

GET /customer/jobs/add View form to submit a new job POSTs to /customer/jobs (i.e. redirects to customer dashboard).

GET /customer/jobs View client dashboard with their existing jobs and button to add new 'Job submission complete' message shows on this page with a timeout.

POST /customer/jobs Submit a customer's job request

[
  {
    "id": 1,
    "userId": "2",
    "description": "Plumbing wanted",
    "image": "pipes.jpeg",
    "category": "Plumbing",
    "priceMin": "50",
    "priceMax": "100",
    "dateAdded": "2022-05-04T21:15:34.334Z",
    "status": "Pending",
  }
]

GET /customer/jobs/:id View details of a specific job

PUT /customer/jobs/:id Edit details of a specific job (stretch)

GET /customer/quotes Customer route to view ALL quotes across ALL jobs

GET /customer/jobs/:id/quotes Customer route to view the quotes for a specific job Get to this route from the customer's list of jobs (/customer/jobs) by clicking on a specific job.

GET /customer/jobs/quotes/:quotesid Customer route to a particular quote for a specific job (stretch?) Job id comes from props. (if that doesn't work, try something like /customer/jobs/:jobid/quotes/:quotesid).

Business Routes

POST /business Send data from /register for businesses

GET /business/jobs Business's view of currently available jobs UseState and filter to only see open jobs in that particular business category. Each job links to

GET /business/quote/add View form to submit quote on a particular job Retrieve data from props to specificy job's id in form.

POST /business/quote/add Data for quote on a particular job

[
        {
          id: 1,
          user_id: 1,
          job_id: 
          price: 500,
          date_added: '2022-05-04T21:15:34.334Z',
          notes: 'We can do it for 500 if its quick',
          business_id: null
        }
]

GET /business/edit Edit business form

PUT /business/edit Edit business details

[
  {
    "id": 1,
    "name": "Pumbers Inc",
    "website": "plimbing.com",
    "category": "Plumbing",
    "logo": "Plumbing",
    "averageRating": "2",
  }
]

Details

This repo includes:

• React Components:
  • App
  • Nav is used for login, logout, registration
  • Authenticated is used for show/hide components if the user is logged in
  • PingRoutes is used for testing the routes
  • Users are used to display the registered users
  • Registration is used to save the users' info after they are registered with Auth0
• an example database module (server/db/users.js)
• an API client module (client/apis/users.js)

Auth0

1. Navigate to, Auth0.com and sign-up if you don't already have a tenant.
2. Go to Applications, and click on Create Application button
3. Give your application a meaningful name, then select Single Page Web Applications and click the Create button.
4. In Auth0.com, set the Allowed Callback Url with http://localhost:3000/
5. In Auth0.com, set the Allowed Logout Url with http://localhost:3000/
6. In Auth0.com, set the Allowed Web Origins with http://localhost:3000/

Server

1. In Auth0.com, create a new API and give it a name and an identifier, for example: Default and https://myapp/api. This identifier will be used as the audience. Click Create.
2. On your new API page, click Settings and scroll down and to RBAC Settings and activate Enable RBAC and Add Permission in the Access Token.
3. Go to Permissions, add the custom permissions that reflects your needs. For the purpose of this demo, create a permission called read:my_private_route.

Users who are assigned roles with these permissions will be able to access your back-end endpoints.

• If you have a REST API endpoint that you want it to be accessible only by users with a specific permission(s), you can add [create|read|update|delete|use]:entityname permission in Auth0.

Here are a few examples that may help you with modelling your routes with permissions:

Permission (Scope)	Description
read:employee	Allows a user to view employees
read:account_balance	Allows a user to view account balances
create:appointment	Allows a user to create appointments
update:reminder	Allows a user to update reminders
delete:song	Allows a user to delete songs
use:app	Allows using an app

Suppose you have an endpoint that returns the salary amount given the employee id. You don't want that to public or protected. Only users with whom have the read:account_balance permission are allowed to consume this endpoint.

Client

1. Copy the Domain of your application in Auth0.com and paste it in the domain into client/auth_config.json
2. Copy the Client ID of your application in Auth0.com and paste it in the client into client/auth_config.json
3. Copy the API Audience URL from Auth0.com you created in the server setup and paste it in the audience into client/auth_config.json

Creating & assigning Roles

In large companies and enterprises, assigning individual permissions to each user can be tedious. Instead, we use Roles. Roles are just a collection/container of permissions.

1. In Auth0, and under User Management, click on Roles and click on create Role button.
2. Give it a name and description, say Admin.
3. Click on Permissions tab and click on add Permissions button.
4. Select the API and the permissions you want to use for the role.
5. Now the role is ready to be assigned for users.
6. In Auth0 and under User Management, click on Users.
7. Find the user you want to assign the Admin role to and click on it.
8. Click on the Role tab, click on Assign Roles button and select the role from the drop-drown list.

Creating a new Machine to Machine Application

Let's create a new application in Auth0, this application will be linked and connected to an out-of-the-box API that can retrieve metadata about users. This metadata will be the user's role.

1. Go to Applications, and click Create Application button.
2. Give it a name, for example, Metadata Application.
3. Select Machine to Machine Applications and click Create.
4. Select the Auth0 Management API from the drop-down list.
5. Open APIs tab and make sure that Auth0 Management API is enabled.
6. Expand it and select the following permissions:
   1. read:roles
   2. read:users
   3. read:role_members
7. Open the Settings.
8. Copy the Client ID and paste it in AUTH0_MACHINE_2_MACHINE_CLIENT_ID in the .env file.
9. Copy the Secret and paste it in AUTH0_MACHINE_2_MACHINE_SECRET.
10. Set the AUTH0_DOMAIN to be your domain. It should look like https://mydomain.au.auth0.com.
11. Set the AUTH0_SSO_AUDIENCE to be the same audience in the client/auth_config.json.

Now the server will be able to get a new access token and retrieve the user's roles. If the logged-in user has a Role(s), it will be displayed next to the name. (see Nav.jsx)

🎉 Congratulations! Your application is now Authenticated with Auth0 🎉