harakeke-2022 / petsitter

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.

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 🎉

petsitter's Issues

#1 Back end: create routes

• finish seed for petsitter DB
• Pet sitters

#18 Front end : CSS Polishing

#16 Front end : User Accout Page

• if you set up user account poped up
• CSS icon using

#15(Stretch)write test

-[] Create test for back end(router)
-[] Create test for front end

#13 Logo!!

• vector img up date
• logo version and favicon build

#4 - Back-end: Auth0 setup

• Auth0 setup with backend

#3 - Back end: make mock data

• build pet sitter listing mock data

Name of branch:
1-backend-create-routes-claire

#6 - Front end: Formatting of listing

how the listing sits on the page

• in App.jsx Setup Route and path
• make listing file
• make components.
• showing date from DB

Merged to #7

#17 Front end : connect page

• pop up button
• button hover
• contect page
• formApi using
• FaQ making
• hardcode data

#21 Fixing picture for lisiting

-[] if there is new add listing, display default picture

#5 - Front end: Home Screen

• navigation components
• landing page -backgrount img setting
• landing page - button(resiste Btnr, petsitterBtn )
• Linking router setting
• Auth0 if setup account, btn chnaged or disappear

#12 - Front end: React-Route-dom version upgrade

check for boiler plate router format?
"http://localhost:3000/#/routerName"

• React-Route Dom version 6 install
• React-Route-Dom uptodate
• App.jsx Routes build
• "history" parts remove and replace "Navigate"
• make connection with components
• Link with routers

#20 create about us page

#11 - Front end: Auth0 Setup

• Set up auth0.com page
• connect with Backend and Frontend
• check up correct redirect (register page)
• user account edit
• petsitter list delete
• petsitter list edit

#7- Front end: Build Listing Page

• search section
• showing Ul and listitem
• check profile button
• delete button
• add listing button

#19 Create patch route, db, api, action, reducer

• Patch route
• Db function
• API
• Action
• Reducer
• Component

#2 Back end: create DB functions

• GET for all listings
• CREATE a listing
• DELETE a listing

#9 - Front end: Pet sitter sign up form

• components PetsitterForm build jsx
• build submit button
• submit button connect
• build api and check connect
• submit button to redirect to individual profile (that was just made)

#8 - Front end: User sign up form Page

• Registeration Form build
• Registeration API build
• Registeration AuthUser connect

#14 Front end : Create Footer

• create design for footer
• create Footer.jsx

#10 - Front end: Pet sitter profile

• build petsitter profile page build
• componets jsx build
• bring infomations from DB
• contact button
• user Image from DB
• pet sitter component showing information
• Google map (adding a link)

Image for readme