feat: authentication with Google and GitHub

[Abbhiishek]

Type

enhancement

---

Description

This PR introduces several enhancements to the application:

• Implemented user authentication and registration using Clerk.
• Added a webhook handler to manage user creation and updates.
• Integrated the ClerkProvider component into the main application layout to manage user authentication state.
• Introduced a Prisma client for structured data management.
• Added new environment variables for Clerk and webhook authentication.
• Updated the TypeScript configuration with new paths.
• Updated the documentation to reflect the new environment variables.
• Added new dependencies for Clerk, themes, and svix.

---

PR changes walkthrough

	Relevant files
Enhancement	7 files page.tsx                                                                                                        apps/web/app/(auth)/login/[[...sign-in]]/page.tsx Added a new SignIn component from Clerk to handle user authentication. +9/-0 page.tsx                                                                                                        apps/web/app/(auth)/signup/[[...sign-up]]/page.tsx Added a new SignUp component from Clerk to handle user registration. +9/-0 Providers.tsx                                                                                              apps/web/app/Providers.tsx Introduced a new ClerkProvider component to manage user authentication state. +16/-0 route.ts                                                                                                        apps/web/app/api/webhook/user/route.ts Implemented a new webhook handler to manage user creation and updates. +78/-0 layout.tsx                                                                                                    apps/web/app/layout.tsx Integrated the Providers component into the main application layout. +6/-1 prismadb.ts                                                                                                  apps/web/lib/prismadb.ts Added Prisma client for database operations. +5/-0 schema.prisma                                                                                              apps/web/prisma/schema.prisma Introduced a new Prisma schema for structured data management. +71/-0
Configuration changes	2 files .env.example                                                                                                .env.example Added new environment variables for Clerk and webhook authentication. +6/-0 tsconfig.json                                                                                              apps/web/tsconfig.json Added new paths configuration for TypeScript. +3/-0
Documentation	1 files environment-variables.md                                                                        docs/contributing-to-keyshade/environment-variables.md Updated the documentation to include new environment variables. +4/-0
Dependencies	1 files package.json                                                                                                package.json Added new dependencies for Clerk, themes, and svix. +3/-0

---

User description

Description

This PR introduces several new features and updates to enhance our application's authentication and data management capabilities.

Features

Authentication Support for Google and GitHub: Users can now authenticate using their Google or GitHub accounts. This provides a seamless and secure way for users to access our application.

Webhook for User Account Updates: A new webhook has been implemented that triggers whenever a user creates or updates their account. This allows us to keep our user data up-to-date and consistent across our application.

Prisma Schema Addition to Web App Module: The Prisma schema has been added to the web app module. This will facilitate efficient and structured data management in our application.

Fixes #3 #4

ENV Updates

New Environment Variables: Three new secrets have been introduced - CLERK_SECRET_KEY, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, and CLERK_WEBHOOK_SIGNING_KEY. These will be used for secure communication and data transfer.

Dependencies

1. svix: For managing and handling webhooks (verify webhook payload)
2. @clerk/nextjs: For integrating Clerk authentication in Next.js applications.
3. @clerk/themes: For theming support in Clerk.

Future Improvements

• Login and Signup screen to be designed.

Mentions

@rajdip-b

Screenshots of relevant screens

Login Page

Sign Up page

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

Documentation Update

• This PR requires an update to the documentation at docs.keyshade.xyz
• I have made the necessary updates to the documentation, or no documentation changes are required.

[codiumai-pr-agent-free]

PR Description updated to latest commit (a15e58d)

[codiumai-pr-agent-free]

PR Analysis

• 🎯 Main theme: Implementing user authentication and registration using Clerk
• 📝 PR summary: This PR introduces user authentication and registration using Clerk. It also adds a webhook handler for user creation and updates, integrates the ClerkProvider component into the main application layout, introduces a Prisma client for structured data management, and updates the TypeScript configuration with new paths. New environment variables for Clerk and webhook authentication are added, and the documentation is updated to reflect these changes.
• 📌 Type of PR: Enhancement
• 🧪 Relevant tests added: No
• ⏱️ Estimated effort to review [1-5]: 4, because the PR introduces significant changes to the application, including user authentication, webhook handling, and database management. It requires a thorough understanding of Clerk, Prisma, and TypeScript to review effectively.
• 🔒 Security concerns: No

PR Feedback

💡 General suggestions: The PR is well-structured and introduces significant enhancements to the application. However, it would be beneficial to include tests to verify the new functionality, especially the authentication and webhook handling. Additionally, it would be helpful to handle potential errors in the webhook handler to ensure the application's robustness.

🤖 Code feedback:

---

relevant file	apps/web/app/api/webhook/user/route.ts
suggestion	Consider adding error handling for potential issues during the webhook handling process. This could include handling cases where the webhook verification fails, the event type is not as expected, or the database operation fails. [important]
relevant line	const webhookSecret = process.env.CLERK_WEBHOOK_SIGNING_KEY || "";

---

relevant file	apps/web/app/api/webhook/user/route.ts
suggestion	It would be beneficial to validate the payload and headers before processing them. This could prevent potential issues if the payload or headers are not as expected. [medium]
relevant line	const payload = await request.json();

---

relevant file	apps/web/app/api/webhook/user/route.ts
suggestion	Consider using more descriptive variable names for better code readability. For example, 'evt' could be renamed to 'event', and 'wh' could be renamed to 'webhook'. [medium]
relevant line	let evt: Event | null = null;

---

relevant file	apps/web/app/Providers.tsx
suggestion	It would be beneficial to add error handling for potential issues during the ClerkProvider setup. This could include handling cases where the ClerkProvider fails to initialize or the appearance settings are not as expected. [medium]
relevant line	<ClerkProvider

---

✨ Usage tips:

---

To invoke the PR-Agent, add a comment using one of the following commands:

• /review: Request a review of your Pull Request.
• /describe: Update the PR title and description based on the contents of the PR.
• /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback.
• /ask <QUESTION>: Ask a question about the PR.
• /update_changelog: Update the changelog based on the PR's contents.
• /add_docs 💎: Generate docstring for new components introduced in the PR.
• /generate_labels 💎: Generate labels for the PR based on the PR's contents.
• /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component.

See the tools guide for more details.
To edit any configuration parameter from the configuration.toml, add --config_path=new_value.
For example: /review --pr_reviewer.extra_instructions="focus on the file: ..."
To list the possible configuration parameters, add a /config comment.

[rajdip-b]

Hey man, thats some great work. Although, I would like to flag off some stuff. See, the user management and stuff like those are already built into the backend under apps/api. Naturally, we would like all of these computations to happen in the backend. This is so because in the longer run, we might want to give the users the opportunity to lon in via the cli

[Abbhiishek]

sure i will try to migrate it to apps/api . However i never code with nestjs . need sometime to figure out stuffs

[rajdip-b]

sure i will try to migrate it to apps/api . However i never code with nestjs . need sometime to figure out stuffs

We are always there for assisting. Also, most of the code regarding authentication and issuing JWTs are already done. All you need to do is integrate github and google and we are good to go

[Abbhiishek]

sure i will try to migrate it to apps/api . However i never code with nestjs . need sometime to figure out stuffs

We are always there for assisting. Also, most of the code regarding authentication and issuing JWTs are already done. All you need to do is integrate github and google and we are good to go

Clerk issues Jwt token of their own , we can tweak body of it to some extend.

[rajdip-b]

@Abbhiishek that's not gonna work then :/ We need to move to manual authentication. I am linking some articles for your reference.

• https://www.loginradius.com/blog/engineering/oauth-implemenation-using-node/
• https://medium.com/@jackrobertscott/easy-google-auth-with-node-js-99ac40b97f4c
• https://www.loginradius.com/blog/engineering/google-authentication-with-nodejs-and-passportjs/
• https://medium.com/@jackrobertscott/easy-github-auth-with-node-js-502d3d8f8e62

[Abbhiishek]

@rajdip-b i am not getting the point why clerk is a bad choice here. Open to feedback

• clerk provide web hooks i am able to save all user data to our own database
• it has node-sdk that can work in nestjs backend https://clerk.com/docs/references/nodejs/overview

[rajdip-b]

Hmm, okie. Well see the bottomline is this:

• Get the users to authenticate using Github and Google
• Upon valid signup, we need to fetch their details - name, email, profile picture
• We need to store it in our db and then, we start with our own flow.
• As for the JWT, if the jwt signing secret can be modified, that would be really nice since we wouldn't need to generate ours

If these can be done, I am totally fine. I just dont want to overcomplicate the flow thats all

[HarshPatel5940]

@rajdip-b i am not getting the point why clerk is a bad choice here. Open to feedback

• clerk provide web hooks i am able to save all user data to our own database
• it has node-sdk that can work in nestjs backend https://clerk.com/docs/references/nodejs/overview

We can do this. There is a one concern, lets say we suddenly get a high rush of users (10k+) and clerk starts charging us. there would be a chance we would not like to pay that as its costly, right?

---

Now if we are planning to Oauth only for github and google, i feel it would be better that we handle our authentication manually in nestJs itself. Now why this

1. since we are planning to host an api, we could easily host this as well
2. next reason is because I would definitely prefer complete control on auth data so we can modify and use the data as needed, else where.

[rajdip-b]

@Abbhiishek I'm sort of in agreement with @HarshPatel5940 in this matter. I mean, paying extra just to make something that takes 10 20 LOC is not ideal. You might want to give a look at passportjs. Alternatively, you can also collaborate with Harsh to build this feature!

[HarshPatel5940]

One of the potential alternatives can be using lucia, https://lucia-auth.com/ which can be easily integrated with nestJs api

[rajdip-b]

@Abbhiishek @HarshPatel5940 hey folks! Made any progress in this one?

[rajdip-b]

@Abbhiishek @HarshPatel5940 closing this one since @HarshPatel5940 will be creating a new PR.