feat: Added Oauth2 Register and Login using Appwrite #383
Conversation
|
@thecloudcode is attempting to deploy a commit to the Sanchit Bajaj's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe primary change involves re-enabling and updating the Google login functionality in the authentication module. This update leverages Google OAuth2 for user login, aiming to enhance user experience by providing a more reliable authentication method. The change also replaces GitHub login with Google login on the login page, simplifying the authentication process. Changes
Sequence Diagram(s)sequenceDiagram
actor User
User ->> LoginPage: Clicks "Login with Google"
LoginPage ->> AuthAPI: Calls `loginWithGoogle`
AuthAPI ->> GoogleOAuth: Redirects to Google OAuth
GoogleOAuth ->> User: Prompt User to Authenticate
User ->> GoogleOAuth: Authenticates
GoogleOAuth ->> AuthAPI: Returns Authorization Code
AuthAPI ->> LoginPage: Stores Token & Redirects User
LoginPage ->> User: User logged in successfully
Assessment against linked issues
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 (
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Great job, @thecloudcode! 🎉 Thank you for submitting your pull request. Your contribution is valuable and we appreciate your efforts to improve our project. Keep being the part of the community!
'We will promptly review your changes and offer feedback. Keep up the excellent work!
Kindly remember to check our Contributing Guidelines'
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (1)
src/components/pages/auth/login/index.tsx (1)
Line range hint
194-200: Add explicittypeattributes to button elements to prevent unintended form submissions.The button elements used for OAuth2 login do not specify their
type. In HTML, the default type for a button issubmit, which can lead to unintended form submissions if the button is within a<form>element. To avoid this, explicitly set the type tobuttonfor these elements.+ type="button"Also applies to: 269-275, 280-286
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock,!**/*.lock
Files selected for processing (2)
- src/backend/auth.api.ts (2 hunks)
- src/components/pages/auth/login/index.tsx (2 hunks)
Additional context used
Biome
src/backend/auth.api.ts
[error] 120-120: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
[error] 154-154: Change to an optional chain. (lint/complexity/useOptionalChain)
Unsafe fix: Change to an optional chain.
src/components/pages/auth/login/index.tsx
[error] 194-200: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 269-275: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 280-286: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
Additional comments not posted (2)
src/components/pages/auth/login/index.tsx (2)
15-15: Ensure correct import ofloginWithGoogle.The import statement for
loginWithGoogleis correctly updated to reflect its usage in theonClickhandler. This change aligns with the backend changes and is necessary for the OAuth2 feature implementation.
273-273: Correctly implemented onClick handler for Google login.The
onClickhandler for the Google login button is correctly set to trigger theloginWithGooglefunction. This setup is essential for initiating the OAuth2 login process with Google.
Sanchitbajaj02
added
🛠 goal: fix
|
Hi, @thecloudcode, I have checked the end to end workflow of your changes. I concluded that the auth is fine but after authentication, user is not validated on the frontend side. |
|
Okey I will surely @Sanchitbajaj02 |
|
This PR has been automatically closed due to inactivity from the owner for 15 days. |
Related Issue
fixes: #284
Closes #284
Description
This issue needs a lot of description.
Initial error : "This provider is disabled. Please enable the provider from your Appwrite console to continue," indicates that the Google OAuth provider had not been enabled in the Appwrite console.
Then, he/she has to go to Google Developer Console, create new project, enable OAuth Consent Screen, and create his OAuth Credentials. He will get App Id and App Secret.
Paste that App Id and App Secret while enabling Github OAuth and Google OAuth and also take the URI and paste into his Google Developer Console.
This will enable the Google and Github OAuth in Appwrite console.
This is all the owner has to do, to make things work. I have updated the necessary codes, through which the website will have proper Oauth2 Login
Screenshots & Videos
Login._.Palettegram.-.from.professionals.by.professionals.-.Google.Chrome.2024-06-15.11-27-40.mp4
The reason why you are seeing Authorization blocked and 404 error in video is because, I didn't paste the URI from Appwrite Project Auth while enabling Github and Google and added into my Google Cloud Console, because of my Credit Card Issues
But, this won't happen in your case, if you follow the steps correctly.
Follow the steps, I mentioned and it will fix this. I have updated the required codes.
Summary by CodeRabbit