feat-#429: Added Signin with Google button #454
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hey @siddharthisrani! Thanks for sticking to the guidelines! High five! 🙌🏻 |
|
Please attach a video of a working demo |
|
@Sukomal07 can you please review |
|
@Deblin798 feel free to review |
InShot_20240721_134133218.mp4 |
There was a problem hiding this comment.
Thank you for the PR @siddharthisrani
Just couple of review comments, kindly address
And if any env variables are used, add it in the .env.sample
| clientID: process.env.GOOGLE_CLIENT_ID, | ||
| clientSecret: process.env.GOOGLE_CLIENT_SECRET, | ||
| callbackURL: 'http://localhost:8080/api/auth/google/callback', | ||
| }, |
There was a problem hiding this comment.
As we are deploying in vercel, we can't hardcode this to 8080, kindly move this to evn variable or in this case i guess you need to use the backend_url env variable
| sameSite: 'lax', | ||
| }); | ||
| res.redirect('http://localhost:5173/signup?google-callback=true'); | ||
| } |
There was a problem hiding this comment.
Same here, kindly use frontend url env variable
|
|
||
| const handleGoogleLogin = () => { | ||
| window.location.href = 'http://localhost:8080/api/auth/google'; | ||
| }; |
| const response = await axiosInstance.get('/api/auth/check'); | ||
| const { token, user } = response.data; | ||
| localStorage.setItem('token', token); | ||
| if (user && user._id && user.role) { |
There was a problem hiding this comment.
localstorage we are setting token not in the cookies? @Sukomal07 kindly confirm
There was a problem hiding this comment.
@siddharthisrani Is this a GoogleAuth token? In the /auth/check route, you collect token from cookies
const token = req.cookies.access_token;
Then why do you set Token in localstorage ?
…Google OAuth and redirects
|
Hii @krishnaacharyaa the requested changes to use environment variables for URLs in Google OAuth and redirects Changes Made: |
|
@Sukomal07 can you please have a look at this PR |
@siddharthisrani didn't reply to my question. |
|
@siddharthisrani please sync up with @Sukomal07 , so that we can merge this |
Regarding the question about token storage: In the current implementation, the token is being set in local storage after a successful Google OAuth login. This was done to maintain consistency with other parts of the application that also use local storage for token management. However, from the backend, we are also sending the token in cookies to enhance security and manage user sessions more effectively. Here’s the relevant code: router.get(
This implementation ensures that the token is available in cookies for enhanced security, while local storage is used to maintain consistency in token management across the application. Please let me know if my answer is according to your requirements. If any further changes needed i will be happy to assist you. |
|
@siddharthisrani can we do without saving token in localstorage ? |
Sure ,i will look in this part for solutions and get back to you . |
|
Hii @Sukomal07 |
|
@siddharthisrani Nice , then remove localstorage part from all of your code. |
…r Google OAuth and resolved merge conflict
|
Hii @Sukomal07, I've removed the token saving in local storage from all the relevant parts of the code. Please review the latest commits. |
| const response = await axiosInstance.get('/api/auth/check'); | ||
| const { token, user } = response.data; | ||
| localStorage.setItem('token', token); | ||
| if (user && user._id && user.role) { |
There was a problem hiding this comment.
@siddharthisrani Is this a GoogleAuth token? In the /auth/check route, you collect token from cookies
const token = req.cookies.access_token;
Then why do you set Token in localstorage ?
Summary
This PR introduces the 'Sign in with Google' button to the login page, enabling users to authenticate using their Google accounts.
Description
This PR addresses the need for Google authentication within the WanderLust application. The changes include:
Addition of 'Sign in with Google' Button:
Implemented a new button on the login page to initiate Google sign-in.
Google OAuth2 Strategy Integration:
Integrated Passport.js with the Google OAuth2 strategy for handling authentication.
Google OAuth2 Configuration:
Configured the application to use Google OAuth2 credentials (client ID and secret) via environment variables.
OAuth2 Callback Handling:
Implemented the logic to handle the Google OAuth2 callback, authenticate users, and create user sessions.
Frontend UI Update:
Updated the frontend to display 'Create Post' and 'Logout' buttons upon successful Google login.
Technical details:
The Google OAuth2 client ID and secret are securely managed through environment variables.
Passport.js is used to manage the Google authentication strategy.
The frontend dynamically updates to reflect the user's authenticated state.
Issue(s) Addressed
Closes #429
Prerequisites
Yes followed all the CONTRIBUTING GUIDELINES?