Remove stytch auth and implement custom Auth #400
Conversation
|
|
@mit-27 is attempting to deploy a commit to the Panora Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis update primarily revolves around removing the Stytch authentication library and implementing a custom authentication system, alongside enhancing the user experience by refining UI components and backend services. The changes include the introduction of new components, hooks for user and project management, and updates to existing components to accommodate new authentication and theming functionalities. Changes
Assessment against linked issues
Recent Review DetailsConfiguration used: CodeRabbit UI Files selected for processing (3)
Files skipped from review as they are similar to previous changes (2)
Additional comments not posted (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
|
🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎ To accept the risk, merge this PR and you will not be notified again.
Next stepsWhat is an install script?Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts. Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead. What is protestware?This package is a joke, parody, or includes undocumented or hidden behavior unrelated to its primary function. Consider that consuming this package my come along with functionality unrelated to its primary purpose. Take a deeper look at the dependencyTake a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev. Remove the packageIf you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency. Mark a package as acceptable riskTo ignore an alert, reply with a comment starting with
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
Out of diff range and nitpick comments (7)
apps/client-ts/src/state/projectStore.ts (1)
9-9: Initialization ofidProjectas an empty string is approved. Consider adding a comment explaining this choice for future maintainability.apps/client-ts/src/components/Nav/theme-provider.tsx (1)
7-9: Introduction ofThemeProvideris approved. Consider adding a brief comment explaining its role and usage to enhance code readability.apps/client-ts/src/state/profileStore.ts (1)
12-13: Allowing the profile to be set tonullis approved. Consider adding a comment explaining this choice to aid in future maintenance and clarity.apps/client-ts/src/app/(Dashboard)/layout.tsx (1)
27-30: Use ofRootLayoutto wrap children is approved. Consider adding a comment explaining its role and usage to enhance code readability.apps/client-ts/src/hooks/useProjectsByUser.tsx (1)
9-14: Checks to ensureuserIdis not undefined or empty before fetching projects are approved. Consider adding a comment explaining why these checks are necessary for clarity and future maintainability.apps/client-ts/src/components/Nav/main-nav.tsx (1)
32-32: Review dynamic class application in JSX.Consider simplifying the expression for
classNameto improve readability. Extract complex logic into a separate function or useclassnameslibrary.apps/client-ts/src/components/Auth/CustomLoginComponent/LoginUserForm.tsx (1)
30-37: Refine form validation messages for better user experience.Consider providing more descriptive validation messages that guide the user on how to correct their input.
| handleRequest(err, user, info) { | ||
| // You can throw an exception based on either "info" or "err" arguments | ||
| if (err || !user) { | ||
| throw err || new UnauthorizedException(); | ||
| } | ||
| return user; | ||
| } |
There was a problem hiding this comment.
Consider removing the unused info parameter to clean up the code.
- handleRequest(err, user, info) {
+ handleRequest(err, user) {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| handleRequest(err, user, info) { | |
| // You can throw an exception based on either "info" or "err" arguments | |
| if (err || !user) { | |
| throw err || new UnauthorizedException(); | |
| } | |
| return user; | |
| } | |
| handleRequest(err, user) { | |
| // You can throw an exception based on either "info" or "err" arguments | |
| if (err || !user) { | |
| throw err || new UnauthorizedException(); | |
| } | |
| return user; | |
| } |
|
|
||
| setProfile(data); | ||
| // Cookies.set('access_token',data.access_token,{expires:1}); | ||
| // console.log("Bearer Token in client Side : ",data.access_token); | ||
|
|
||
| toast("User has been fetched !", { | ||
| description: "", | ||
| action: { | ||
| label: "Close", | ||
| onClick: () => console.log("Close"), | ||
| }, | ||
| }) |
There was a problem hiding this comment.
Refactor success toast message to include more details.
- toast("User has been fetched !", {
+ toast(`User ${data.first_name} has been successfully fetched!`, {This change provides more context to the user about the operation's success.
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| setProfile(data); | |
| // Cookies.set('access_token',data.access_token,{expires:1}); | |
| // console.log("Bearer Token in client Side : ",data.access_token); | |
| toast("User has been fetched !", { | |
| description: "", | |
| action: { | |
| label: "Close", | |
| onClick: () => console.log("Close"), | |
| }, | |
| }) | |
| setProfile(data); | |
| // Cookies.set('access_token',data.access_token,{expires:1}); | |
| // console.log("Bearer Token in client Side : ",data.access_token); | |
| toast(`User ${data.first_name} has been successfully fetched!`, { | |
| description: "", | |
| action: { | |
| label: "Close", | |
| onClick: () => console.log("Close"), | |
| }, | |
| }) |
| // const { id_organization, ...rest } = data; | ||
| const res = await this.prisma.projects.create({ | ||
| data: { | ||
| ...rest, | ||
| name: data.name, |
There was a problem hiding this comment.
Consider removing or uncommenting the commented-out code related to id_organization to clarify its usage.
- // const { id_organization, ...rest } = data;
+ const { id_organization, ...rest } = data;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| // const { id_organization, ...rest } = data; | |
| const res = await this.prisma.projects.create({ | |
| data: { | |
| ...rest, | |
| name: data.name, | |
| const { id_organization, ...rest } = data; | |
| const res = await this.prisma.projects.create({ | |
| data: { | |
| name: data.name, |
|
|
||
| console.log(data) |
There was a problem hiding this comment.
Consider enhancing the logging in the onSuccess method to provide more detailed information about the operation.
- console.log(data)
+ console.log("Project created successfully:", data)Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| console.log(data) | |
| console.log("Project created successfully:", data) |
| toast("User has been generated !", { | ||
| description: "", | ||
| action: { | ||
| label: "Close", | ||
| onClick: () => console.log("Close"), | ||
| }, | ||
| }) | ||
| }, |
There was a problem hiding this comment.
Consider enhancing the success notification to include more details about the user created, such as the user's name or email.
- toast("User has been generated !", {
+ toast(`User ${data.first_name} has been successfully created!`, {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| toast("User has been generated !", { | |
| description: "", | |
| action: { | |
| label: "Close", | |
| onClick: () => console.log("Close"), | |
| }, | |
| }) | |
| }, | |
| toast(`User ${data.first_name} has been successfully created!`, { | |
| description: "", | |
| action: { | |
| label: "Close", | |
| onClick: () => console.log("Close"), | |
| }, | |
| }) | |
| }, |
| useEffect(() => { | ||
|
|
||
| if(profile) | ||
| { | ||
| router.replace('/connections'); | ||
| } | ||
|
|
||
| },[profile]); |
There was a problem hiding this comment.
Optimize useEffect hook for user redirection.
The useEffect hook can be optimized by combining the conditions for user redirection into a single hook to reduce redundancy and improve performance.
| const onSubmit = (values: z.infer<typeof formSchema>) => { | ||
|
|
||
| loginMutate({ | ||
| email:values.email, | ||
| password_hash:values.password | ||
| }, | ||
| { | ||
| onSuccess: () => router.replace("/connections") | ||
| }) | ||
|
|
||
| } |
There was a problem hiding this comment.
Optimize form submission handling.
Refactor the form submission logic to handle different scenarios such as network failures or invalid credentials more gracefully.
| import useProfile from '@/hooks/useProfile'; | ||
| import useProfileStore from '@/state/profileStore'; | ||
| import useProjectStore from '@/state/projectStore'; | ||
| import { ThemeToggle } from '@/components/Nav/theme-toggle'; | ||
| import { projects as Project } from 'api'; |
There was a problem hiding this comment.
Imported projects from 'api' but it is not used anywhere in the file.
Consider removing this import if it's not intended for future use to keep the code clean and maintainable.
| @@ -13,6 +13,8 @@ | |||
| import { handleServiceError } from '@@core/utils/errors'; | |||
| import { LoginDto } from './dto/login.dto'; | |||
| import { users as User } from '@prisma/client'; | |||
| import { ConfigService } from '@nestjs/config'; | |||
There was a problem hiding this comment.
ConfigService is imported but never used.
Remove the unused import to clean up the code.
- import { ConfigService } from '@nestjs/config';Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| import { ConfigService } from '@nestjs/config'; |
| foundUser = await this.prisma.users.findUnique({ | ||
| where: { | ||
| email: user.email | ||
| } | ||
| }); |
There was a problem hiding this comment.
Use const for foundUser since it is never reassigned.
Modify the declaration to use const for better code clarity and to prevent accidental reassignment.
- let foundUser = await this.prisma.users.findUnique({
+ const foundUser = await this.prisma.users.findUnique({Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| foundUser = await this.prisma.users.findUnique({ | |
| where: { | |
| email: user.email | |
| } | |
| }); | |
| const foundUser = await this.prisma.users.findUnique({ | |
| where: { | |
| email: user.email | |
| } | |
| }); |
There was a problem hiding this comment.
Actionable comments posted: 1
Out of diff range and nitpick comments (1)
packages/api/src/@core/auth/auth.controller.ts (1)
Line range hint
1-12: Consider removing unused imports to clean up the file.- import { Query, Res, Param, Response } from '@nestjs/common'; - import { ApiKeyAuthGuard } from './guards/api-key.guard';
| handleRequest<TUser = any>(err: any, user: any, _info: any, _context: ExecutionContext, _status?: any): TUser { | ||
| if (err || !user) { | ||
| throw err || new UnauthorizedException(); | ||
| } | ||
| return user; | ||
| } |
There was a problem hiding this comment.
Consider removing the unused parameters _info, _context, and _status to clean up the method signature.
- handleRequest<TUser = any>(err: any, user: any, _info: any, _context: ExecutionContext, _status?: any): TUser {
+ handleRequest<TUser = any>(err: any, user: any): TUser {Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| handleRequest<TUser = any>(err: any, user: any, _info: any, _context: ExecutionContext, _status?: any): TUser { | |
| if (err || !user) { | |
| throw err || new UnauthorizedException(); | |
| } | |
| return user; | |
| } | |
| handleRequest<TUser = any>(err: any, user: any): TUser { | |
| if (err || !user) { | |
| throw err || new UnauthorizedException(); | |
| } | |
| return user; | |
| } |
There was a problem hiding this comment.
Actionable comments posted: 2
Out of diff range and nitpick comments (3)
apps/client-ts/src/app/(Dashboard)/events/page.tsx (1)
4-4: Ensure that theHeadingcomponent is used consistently across the application for UI uniformity.apps/client-ts/src/app/(Dashboard)/connections/page.tsx (1)
4-4: Ensure that theHeadingcomponent is used consistently across the application for UI uniformity.apps/client-ts/src/app/(Dashboard)/configuration/page.tsx (1)
44-44: Added import forHeading. Ensure this component is used consistently across the application for UI uniformity.
| <div className="flex-1 space-y-4 p-4 md:p-8 pt-6"> | ||
| <div className="flex-1 space-y-4 p-8 pt-6"> | ||
| <div className="flex items-center justify-between space-y-2"> | ||
| <h2 className="text-3xl font-bold tracking-tight">Events</h2> | ||
| <Heading | ||
| title="Events" | ||
| description="" | ||
| /> |
There was a problem hiding this comment.
The JSX structure has been modified to include a Heading component with a title and an empty description. Consider providing a meaningful description or removing the empty attribute if it's not needed.
| <div className="flex-1 space-y-4 p-4 md:p-8 pt-6"> | ||
| <div className="flex-1 space-y-4 p-8 pt-6"> | ||
| <div className="flex items-center justify-between space-y-2"> | ||
| <h2 className="text-3xl font-bold tracking-tight">Configuration</h2> | ||
| <Heading | ||
| title="Configuration" | ||
| description="" | ||
| /> |
There was a problem hiding this comment.
The JSX structure has been modified to include a Heading component with a title and an empty description for the configuration section. Consider providing a meaningful description or removing the empty attribute if it's not needed.
…tytch-add-auth
There was a problem hiding this comment.
Actionable comments posted: 0
Out of diff range and nitpick comments (3)
apps/client-ts/src/components/Connection/AddConnectionButton.tsx (3)
Line range hint
172-262: Ensure consistent error handling in the form submission process.The current implementation logs the error to the console when there is an error in the
mutatefunction call within theonSubmitmethod. However, this does not provide any feedback to the user. It would be beneficial to implement a user-friendly error handling mechanism, such as displaying an error message on the UI.
Line range hint
172-262: Consider using a conditional rendering strategy for form fields.The current implementation uses a ternary operator to switch between two completely different sets of form fields based on the
showNewLinkedUserDialog.importstate. This could be refactored into smaller, more manageable components or custom hooks to improve readability and maintainability.
Line range hint
172-262: Optimize the rendering of form fields.The form fields are re-rendered every time the state changes, which might lead to performance issues on larger forms or slower devices. Consider memoizing the form fields or using React's
PureComponentormemofor functional components to avoid unnecessary re-renders.
Summary by CodeRabbit
New Features
Homecomponent for improved navigation.Enhancements
ThemeProviderfor dynamic theming support.Bug Fixes
Refactor
Documentation
Style
Tests
Chores
Revert