OAuth State Mismatch Error in AdonisJS Ally Google Authentication Callback

[Raja2703]

I am encountering an OAuth state mismatch error when implementing Google OAuth authentication using AdonisJS and the @adonisjs/ally package. Here’s a detailed breakdown of my implementation and the issue:

Server-Side Code (authController.ts):

public async googleCallback(ctx: HttpContext) {
  const { ally, response } = ctx;
  try {
    const google = ally.use('google');
    const googleUser = await google.user();
    console.log(1, 'googleUser');

    const { email, avatarUrl, token } = googleUser;

    const verifiedToken = await axios.get(
      `https://oauth2.googleapis.com/tokeninfo?id_token=${token.idToken}`
    );

    if (verifiedToken.data.hd === 'example.com' || !verifiedToken.data.hd) {
      const jwtSecretKey = env.get('JWT_SECRET_KEY');
      const jwtExpireDuration = env.get('JWT_EXPIRATION');
      const employee = await EmployeeRepo.getEmployeeDetailsByEmail(email);
      console.log(4, 'employee');

      if (!employee) {
        throw Exceptions.unauthorised('E_EMPLOYEE_NOT_FOUND', 'Employee not found');
      }

      const token = JWT.sign(
        {
          id: employee.id,
          email: employee.email,
          role: employee.role.role,
          profilePic: avatarUrl,
        },
        jwtSecretKey,
        { expiresIn: jwtExpireDuration }
      );

      return {
        success: true,
        token,
        userId: employee.id,
        role: employee.role.role,
      };
    } else {
      response.status(401);
      return {
        success: false,
        message: 'Authorization failed. Unauthorized domain',
      };
    }
  } catch (err) {
    console.log(err);
    return this.exceptionHandler.handle(err, ctx);
  }
}

Route Setup:

router
  .group(() => {
    router
      .group(() => {
        router.get('/login', '#controllers/auth_controller.redirect');
        router.get('/handleCallback', '#controllers/auth_controller.googleCallback');
      })
      .prefix('google');
  })
  .prefix('auth');

Client-Side Code:

In the client, after Google redirects the user back, the code and state (status) parameters are captured, and the API request is made as follows:

const code = route.query.code;
const state = route.query.state;

const response = await axios.get(
  `${baseURL}/auth/google/handleCallback?code=${code}&state=${state}`
);

Issue:

After a successful redirection to my client app, I pass the code and state (status) back to the backend using the /auth/google/handleCallback route. However, I receive the following error in my client:

{ 
  "message": {
    "name": "Exception",
    "status": 400,
    "code": "E_OAUTH_STATE_MISMATCH"
  }
}

However i get this error only in the hosted CLIENT and API. It works fine on my localhost.

Steps Taken:

In my Google Cloud Console, the redirect URL is set to https://clientUrl/loading.
In the client, I capture both code and state and pass them in the query parameters to the backend callback route.
I'm using AdonisJS with @adonisjs/ally version 5.0.2.

Expected Behavior:

Google should redirect back with a valid state that matches what the AdonisJS ally package expects, and I should be able to exchange the authorization code for a token successfully.

Request for Help:

I’m looking for guidance on how to properly handle the state parameter to avoid this "E_OAUTH_STATE_MISMATCH" error in AdonisJS with Google OAuth. Any insight or potential fixes would be greatly appreciated!

Thanks in advance for any help or advice!