Implement Google SSO Integration – Frontend

Priority: High
Difficulty: Advanced
Type: Frontend Feature

Description:
Integrate the Google SSO backend into the frontend login flow. The Google button already exists in UI; this task makes it functional.

Requirements:

On Google button click → redirect to backend endpoint /auth/google.
Handle the callback response:
- Extract JWT returned from backend.
- Save JWT into Redux store (authSlice).
- Persist JWT to localStorage for session.
Update global auth state (user logged in = true).
Provide loading/error feedback during login.

Acceptance Criteria:

Clicking Google button opens Google login and completes flow.
JWT is stored in Redux + localStorage.
Logged-in state is reflected in the app (e.g., console shows User authenticated).
Works with Redux DevTools.

Hey, I would love to work on this issue. Could you please assign it to me?

@AsadAhmedSaiyed

Hi @AsadAhmedSaiyed, this is an advanced-level task. Are you sure you want to work on this task, or maybe you can check if there could be a bit easier tasks opened?

@Alexandrbig1

Yeah @Alexandrbig1, but all easy level tasks are already assigned. It would be great if you could raise more beginner level issues?

@AsadAhmedSaiyed

@AsadAhmedSaiyed, thanks for the interest! I update tasks regularly — I’ll add more beginner-friendly issues within 24 hours. Meanwhile, feel free to check the Figma for ideas. If you spot a feature you’d like to work on, open an issue with the proposal, and I’ll review and assign it. Appreciate it!

@AsadAhmedSaiyed

@AsadAhmedSaiyed, I’ve added a few more tasks to the board. Please check the "Todo" column. If you find one that’s still open and you’d like to work on it, leave a comment there, and I’ll assign it to you.

@Alexandrbig1

Hi @Alexandrbig1, I’d like to contribute to this task. Could you please assign it to me?

@Ankit-Kum-ar

@Ankit-Kum-ar, thanks for your interest! Great work on your previous task! I've assigned you to this task. Looking forward to your PR's.

@Alexandrbig1

Hey @Alexandrbig1 , can you confirm if the Google authentication has been set up in the backend repo? I need to check the endpoint paths for reference.
Also, I noticed that in the .env.example file, the NODE_ENV is set to developments—it should be development instead in the backend repo.

@Ankit-Kum-ar

Hi @Ankit-Kum-ar, Google auth in backend still in process. #82 . Yes, you are correct about 'NODE_ENV = development' - I'll update it. Thank you!

@Alexandrbig1

Hey @Alexandrbig1 ,
A few things to update in the backend repo:

Can you install the passport-google-oauth20 package? We're using it for OAuth integration.
I noticed there's no CORS config. Please add this:
app.use(cors({ origin: 'http://localhost:3000', credentials: true }));
It would be great to have a single env.js file where all the environment variables are defined. That way, we won't need to import them multiple times in the code.
In the passport.config.js file, we’re missing this part to load the environment variables:
import dotenv from 'dotenv'; dotenv.config();

Let me know if you have any questions!

Thanks!

I've made those changes, and my frontend code is complete and working fine.

@Ankit-Kum-ar

Hi @Ankit-Kum-ar, I installed passport-google-oauth20,dotenv.config() is loaded in the server entry file. There’s an .env.example in the repo. Real project credentials aren’t shared—use the example/local values for development while the backend is still in progress.

Quick question: did you test Google SSO and confirm it works on your side?

@Alexandrbig1

Hey @Alexandrbig1, I know I need to set up the .env myself, but there were a couple of issues with the backend code:

The origin is not defined in the cors configuration in app.js.
In passport.config.js, we forgot to import dotenv.

My frontend code is ready and fully working—Google Auth is working completely fine. Just make these two changes in the backend, and my code will work perfectly.

I’ve made the following changes to the backend:

CORS Configuration: In app.js, I added the origin and credentials options to the cors middleware:

app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

Updated Auth Route: Changed the route from /auth to /api/auth:

// app.use('/auth', authRoutes);
app.use('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/api/auth', authRoutes);

Dotenv Import: Imported dotenv in passport.config.js and configured it:

import dotenv from 'dotenv';
dotenv.config();

@Alexandrbig1

Should I make a PR of my frontend code? @Alexandrbig1
Ping me, and I will create.

@Ankit-Kum-ar

@Ankit-Kum-ar, yes — please open a PR.

@Alexandrbig1

@Alexandrbig1, Here’s the PR. Please take a look.

Navigation Menu

Repository navigation

Implement Google SSO Integration – Frontend #83

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Implement Google SSO Integration – Frontend #83

Description

Activity

AsadAhmedSaiyed commented on Oct 5, 2025

Alexandrbig1 commented on Oct 5, 2025

AsadAhmedSaiyed commented on Oct 6, 2025

Alexandrbig1 commented on Oct 6, 2025

Alexandrbig1 commented on Oct 6, 2025

Ankit-Kum-ar commented on Oct 7, 2025

Alexandrbig1 commented on Oct 7, 2025

Ankit-Kum-ar commented on Oct 9, 2025

Alexandrbig1 commented on Oct 9, 2025

Ankit-Kum-ar commented on Oct 13, 2025

Alexandrbig1 commented on Oct 13, 2025

Ankit-Kum-ar commented on Oct 14, 2025

Ankit-Kum-ar commented on Oct 14, 2025

Alexandrbig1 commented on Oct 15, 2025

Ankit-Kum-ar commented on Oct 15, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions