Skip to content

notes.md

Latest commit

 

History

History
44 lines (29 loc) · 2.36 KB

notes.md

File metadata and controls

44 lines (29 loc) · 2.36 KB

Notes for Fullstack with Clerk Auth

Initialization

  1. npm create vite@latest: TypeScript + SWC options
  2. npm create amplify@latest: Init in root (.) of project
  3. touch .env.local: Get this from Clerk and display as showin in sample.envlocal file
  4. npm install @clerk/clerk-react: Installs the clerk deps for Vite
  5. Follow this doc for install steps
  6. Install Tailwind, DaisyUI, and React Router:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm i -D daisyui@latest

npm install react-router-dom

Landing Page

This is going to be an app where users can upload text with photos to create a timeline of events.

The landing page should speak on that.

  1. Create HomePage Route
  2. DaisyUI Nav, Hero, and Footer

Auth Pages

This app needs a place to add milestones (text + images), and view them. Note that the only person that should be able to view them are the owner.

View and Create Milestones Pages

If this where an application where you simply needed to be signed in to see some protected data, then using the AWS Amplify .authorization(allow => ([allow.authenticated()])) would be fine. But in this app, we want owner authorization. Amplify uses cognito to apply an owner using the format <sub>::<username>. Since we're not using Cognito, we have to manage that ourselves.

  1. Create the page✅
  2. Protect the Page with Clerk Auth✅
  3. Create the API to auth based on a simple Lambda function✅
  4. Enhance to the Lambda function to check the Authorization header which will contain the Clerk logic so I can manually verify the JWT
  5. Review how to add ownership by looking at my cdk starter repo

"Retrieve the session token from either __session cookie for a same origin request or from the Authorization header for cross origin requests."