- Nodejs
- Yarn
- Supabase environment
- Make sure you have a supabase/auth project ready to go.
- Clone .env.example to .env.local, and fill in the environment variables.
- Run
yarnto install dependencies. - Run
yarn devto begin debugging.
For more advanced information, please see the frontend master sheet on Notion.
SmartStudy+ uses Supabase for authentication but stores user data in MongoDB. To ensure consistency between these systems, we've implemented a comprehensive synchronization mechanism.
The synchronization mechanism works in two ways:
-
Automatic Synchronization: When a user makes an authenticated request, the system checks if they exist in MongoDB. If not, it automatically creates a new user record using the Supabase user data.
-
Manual Synchronization: After a successful signup on the client, the system explicitly calls the
/api/user/createendpoint to create a new user in MongoDB.
Both approaches ensure that users created in Supabase are also created in MongoDB, maintaining consistency between the two systems.
The synchronization is implemented in several key places:
-
auth-form.tsx: After successful authentication, calls the
/api/user/auth-statusendpoint to check if the user exists in MongoDB. If not, it calls/api/user/createto create the user. -
fetchWithAuth.ts: Before making any authenticated API calls, checks if the user exists in MongoDB. If not, it creates the user.
-
getUserId.ts: When retrieving the user ID, also ensures the user exists in MongoDB.
/api/user/auth-status: Checks if a user exists in MongoDB based on their Supabase ID./api/user/create: Creates a new user in MongoDB using data from Supabase.
The frontend automatically handles the synchronization, so no additional steps are needed when implementing new features. Any authenticated API calls will ensure the user exists in MongoDB before proceeding.
...