A real-time privacy-first social media platform leveraging feature-rich direct messaging text channels. Built as part of the course project for COSC 310 at UBC.
5
stars
1
forks
source link
Completed full integration of site-wide authentication #136
Integrated the Clerk authentication provider in the frontend via the Navbar login button (conditionally renders based on whether you are signed in or not)
Refactored the log-in.tsx and create-account.tsx pages to use the SignIn and SignUp components from the Clerk provider
Added an account profile component on the top right of the navbar in the application shell to be able to view and update your account settings
Added a backend API endpoint to sync account changes via the provider with our MongoDB database (webhooks/clerk-mongodb-sync.tsx) which successfully passes all test cases performed with Postman and the Clerk testing suite in the central dashboard
Refactored all components to use session data
Refactored registration and login endpoints to work with the data sent by the Clerk provider according to the data passed within the webhook backend API endpoint
Created delete-user and update-user-data to facilitate account updates via Clerk
Added a new npm run accord script to concurrently run npm run dev, npm run proxy and npm run ngrok
Created a middleware.ts file to handle which pages can be accessed without authentication and which pages require authentication to be accessed
Created a proxyServer.ts file to only exposes one API endpoint instead of the whole web app via ngrok such that we can reroute all traffic at localhost:3001 to precisely one API endpoint in localhost:3000 (nothing more, nothing less). However, this pull request currently exposes numerous API endpoints as some debugging was attempted in order to resolve the inability to access the main application shell after single sign on (SSO)
Created a static server to host our API publicly in facilitating the ability to use webhooks such that our MongoDB database gets updated in realtime when Clerk records updates on their end (requires tunelling via ngrok).
Visual Summary of Changes
My Account
Sign In
My Account
Syncing with MongoDB Upon Changes Received by Clerk (Tests):
Creating a new user
Updating an existing user
Reflection of received data in real-time on MongoDB (user data edited as part of the test)
Our exposed API endpoint via ngrok
Thinks to Know
You need to do ngrok http --domain=ant-inspired-bass.ngrok-free.app 3001 within the grok executable first before you launch the app on localhost. You need to run this command in the ngrok executable which you get by going to ngrok and downloading your windows client. You open up the terminal in that downloaded client to run this command, and leave it on in the background. This is called tunelling as you are effectively using your computer to publicly host an API. This is temporary as once we host our entire web application, our API will be exposed by default. I am doing this for privacy as otherwise we would need to host our entire web application to expose our API, hence the use of a proxy server to prevent that (host only the backend API to use webhooks for syncing data between Clerk and our MongoDB database).
Once that is up and running, you have to now do npm run accord as 3 scripts need to run to make this successful.
Summary of Changes
log-in.tsxandcreate-account.tsxpages to use theSignInandSignUpcomponents from the Clerk providerwebhooks/clerk-mongodb-sync.tsx) which successfully passes all test cases performed withPostmanand theClerktesting suite in the central dashboardregistrationandloginendpoints to work with the data sent by the Clerk provider according to the data passed within the webhook backend API endpointdelete-userandupdate-user-datato facilitate account updates via Clerknpm run accordscript to concurrently runnpm run dev,npm run proxyandnpm run ngrokmiddleware.tsfile to handle which pages can be accessed without authentication and which pages require authentication to be accessedproxyServer.tsfile to only exposes one API endpoint instead of the whole web app viangroksuch that we can reroute all traffic atlocalhost:3001to precisely one API endpoint inlocalhost:3000(nothing more, nothing less). However, this pull request currently exposes numerous API endpoints as some debugging was attempted in order to resolve the inability to access the main application shell after single sign on (SSO)ngrok).Visual Summary of Changes
My Account
Sign In
My Account
Syncing with MongoDB Upon Changes Received by Clerk (Tests):
Creating a new user
Updating an existing user
Reflection of received data in real-time on MongoDB (user data edited as part of the test)
Our exposed API endpoint via
ngrokThinks to Know
ngrok http --domain=ant-inspired-bass.ngrok-free.app 3001within the grok executable first before you launch the app on localhost. You need to run this command in the ngrok executable which you get by going tongrokand downloading your windows client. You open up the terminal in that downloaded client to run this command, and leave it on in the background. This is called tunelling as you are effectively using your computer to publicly host an API. This is temporary as once we host our entire web application, our API will be exposed by default. I am doing this for privacy as otherwise we would need to host our entire web application to expose our API, hence the use of a proxy server to prevent that (host only the backend API to use webhooks for syncing data between Clerk and our MongoDB database).npm run accordas 3 scripts need to run to make this successful.